ขั้นตอนที่ 4: เปิดลิงก์ภายนอกด้วย WebView

ในขั้นตอนนี้ คุณจะได้เรียนรู้สิ่งต่อไปนี้

  • วิธีแสดงเนื้อหาเว็บภายนอกภายในแอปของคุณด้วยวิธีที่ปลอดภัยและใช้แซนด์บ็อกซ์

เวลาที่ใช้โดยประมาณเพื่อทําขั้นตอนนี้ให้เสร็จสมบูรณ์: 10 นาที
หากต้องการดูตัวอย่างสิ่งที่คุณจะทําในขั้นตอนนี้ ให้เลื่อนลงไปที่ด้านล่างของหน้านี้ ↓

ดูข้อมูลเกี่ยวกับแท็ก WebView

แอปพลิเคชันบางรายการต้องแสดงเนื้อหาเว็บภายนอกต่อผู้ใช้โดยตรง แต่ต้องแสดงเนื้อหานั้นภายในประสบการณ์การใช้งานแอปพลิเคชัน เช่น ผู้รวบรวมข่าวอาจต้องการฝังข่าวจากเว็บไซต์ภายนอกโดยคงการจัดรูปแบบ รูปภาพ และลักษณะการทำงานทั้งหมดของเว็บไซต์ต้นฉบับไว้ สําหรับการใช้งานเหล่านี้และการใช้งานอื่นๆ แอป Chrome มีแท็ก HTML ที่กําหนดเองชื่อ webview

แอป Todo ที่ใช้ WebView

ติดตั้งแท็ก WebView

อัปเดตแอป Todo เพื่อค้นหา URL ในข้อความของรายการสิ่งที่ต้องทำและสร้างไฮเปอร์ลิงก์ เมื่อคลิก ลิงก์จะเปิดหน้าต่างแอป Chrome ใหม่ (ไม่ใช่แท็บเบราว์เซอร์) ที่มี WebView ซึ่งนำเสนอเนื้อหา

อัปเดตสิทธิ์

ใน manifest.json ให้ขอสิทธิ์webview

"permissions": [
  "storage",
  "alarms",
  "notifications",
  "webview"
],

สร้างหน้าเว็บสำหรับฝัง WebView

สร้างไฟล์ใหม่ในรูทของโฟลเดอร์โปรเจ็กต์ แล้วตั้งชื่อว่า webview.html ไฟล์นี้เป็นหน้าเว็บพื้นฐานที่มีแท็ก <webview> 1 รายการ

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <webview style="width: 100%; height: 100%;"></webview>
</body>
</html>

แยกวิเคราะห์ URL ในรายการสิ่งที่ต้องทํา

เพิ่มเมธอดใหม่ชื่อ _parseForURLs() ที่ท้าย controller.js

  Controller.prototype._getCurrentPage = function () {
    return document.location.hash.split('/')[1];
  };

  Controller.prototype._parseForURLs = function (text) {
    var re = /(https?:\/\/[^\s"<>,]+)/g;
    return text.replace(re, '<a href="$1" data-src="$1">$1</a>');
  };

  // Export to window
  window.app.Controller = Controller;
})(window);

เมื่อพบสตริงที่ขึ้นต้นด้วย "http://" หรือ "https://" ระบบจะสร้างแท็กแอตทริบิวต์ HTML เพื่อล้อมรอบ URL

ค้นหา showAll() ใน controller.js อัปเดต showAll() ให้แยกวิเคราะห์ลิงก์โดยใช้วิธี _parseForURLs() ที่เพิ่มไว้ก่อนหน้านี้

/**
 * An event to fire on load. Will get all items and display them in the
 * todo-list
 */
Controller.prototype.showAll = function () {
  this.model.read(function (data) {
    this.$todoList.innerHTML = this.view.show(data);
    this.$todoList.innerHTML = this._parseForURLs(this.view.show(data));
  }.bind(this));
};

ทําแบบเดียวกันนี้สําหรับ showActive() และ showCompleted()

/**
 * Renders all active tasks
 */
Controller.prototype.showActive = function () {
  this.model.read({ completed: 0 }, function (data) {
    this.$todoList.innerHTML = this.view.show(data);
    this.$todoList.innerHTML = this._parseForURLs(this.view.show(data));
  }.bind(this));
};

/**
 * Renders all completed tasks
 */
Controller.prototype.showCompleted = function () {
  this.model.read({ completed: 1 }, function (data) {
    this.$todoList.innerHTML = this.view.show(data);
    this.$todoList.innerHTML = this._parseForURLs(this.view.show(data));
  }.bind(this));
};

และสุดท้าย ให้เพิ่ม _parseForURLs() ไปยัง editItem()

Controller.prototype.editItem = function (id, label) {
  ...
  var onSaveHandler = function () {
    ...
      // Instead of re-rendering the whole view just update
      // this piece of it
      label.innerHTML = value;
      label.innerHTML = this._parseForURLs(value);
    ...
  }.bind(this);
  ...
}

ยังคงอยู่ใน editItem() ให้แก้ไขโค้ดเพื่อให้ใช้ innerText ของป้ายกำกับแทน innerHTML ของป้ายกำกับ ดังนี้

Controller.prototype.editItem = function (id, label) {
  ...
  // Get the innerHTML of the label instead of requesting the data from the
  // Get the innerText of the label instead of requesting the data from the
  // ORM. If this were a real DB this would save a lot of time and would avoid
  // a spinner gif.
  input.value = label.innerHTML;
  input.value = label.innerText;
  ...
}

เปิดหน้าต่างใหม่ที่มี WebView

เพิ่มเมธอด _doShowUrl() ลงใน controller.js วิธีนี้จะเปิดหน้าต่างแอป Chrome ใหม่ผ่าน chrome.app.window.create() โดยมี webview.html เป็นแหล่งที่มาของหน้าต่าง

  Controller.prototype._parseForURLs = function (text) {
    var re = /(https?:\/\/[^\s"<>,]+)/g;
    return text.replace(re, '<a href="$1" data-src="$1">$1</a>');
  };

  Controller.prototype._doShowUrl = function(e) {
    // only applies to elements with data-src attributes
    if (!e.target.hasAttribute('data-src')) {
      return;
    }
    e.preventDefault();
    var url = e.target.getAttribute('data-src');
    chrome.app.window.create(
     'webview.html',
     {hidden: true},   // only show window when webview is configured
     function(appWin) {
       appWin.contentWindow.addEventListener('DOMContentLoaded',
         function(e) {
           // when window is loaded, set webview source
           var webview = appWin.contentWindow.
                document.querySelector('webview');
           webview.src = url;
           // now we can show it:
           appWin.show();
         }
       );
     });
  };

  // Export to window
  window.app.Controller = Controller;
})(window);

ใน Callback chrome.app.window.create() ให้บันทึกวิธีตั้งค่า URL ของ WebView ผ่านแอตทริบิวต์แท็ก src

สุดท้าย ให้เพิ่ม Listener เหตุการณ์คลิกภายในคอนสตรัคเตอร์ Controller เพื่อเรียก doShowUrl() เมื่อผู้ใช้คลิกลิงก์

function Controller(model, view) {
  ...
  this.router = new Router();
  this.router.init();

  this.$todoList.addEventListener('click', this._doShowUrl);

  window.addEventListener('load', function () {
    this._updateFilterState();
  }.bind(this));
  ...
}

เปิดแอป Todo ที่เสร็จสมบูรณ์แล้ว

ขั้นตอนที่ 4 เสร็จแล้ว หากคุณโหลดแอปซ้ำและเพิ่มรายการสิ่งที่ต้องทำซึ่งมี URL แบบเต็มที่ขึ้นต้นด้วย http:// หรือ https:// คุณควรจะเห็นหน้าแบบนี้

สำหรับข้อมูลเพิ่มเติม

ดูข้อมูลโดยละเอียดเพิ่มเติมเกี่ยวกับ API บางรายการที่แนะนำในขั้นตอนนี้ได้ที่

พร้อมที่จะดำเนินการขั้นตอนถัดไปไหม ไปที่ขั้นตอนที่ 5 - เพิ่มรูปภาพจากเว็บ »