चौथा चरण: वेबव्यू की मदद से बाहरी लिंक खोलना

इस चरण में आपको पता चलेगा कि:

  • अपने ऐप्लिकेशन में बाहरी वेब कॉन्टेंट को सुरक्षित और सैंडबॉक्स तरीके से दिखाने का तरीका.

इस चरण को पूरा करने में लगने वाला अनुमानित समय: 10 मिनट.
इस चरण में आपको क्या पूरा करना है, यह देखने के लिए इस पेज पर सबसे नीचे देखें ↓.

वेबव्यू टैग के बारे में जानें

कुछ ऐप्लिकेशन को बाहरी वेब कॉन्टेंट सीधे उपयोगकर्ता को दिखाना होता है, लेकिन उन्हें ऐप्लिकेशन के अनुभव में बनाए रखना होता है. उदाहरण के लिए, हो सकता है कि एक समाचार एग्रीगेटर बाहरी साइटों की खबरों को मूल साइट के सभी फ़ॉर्मैट, इमेज, और व्यवहार के साथ जोड़ना चाहे. इन और दूसरे इस्तेमाल के लिए, Chrome Apps में webview नाम का एक कस्टम एचटीएमएल टैग होता है.

वेबव्यू का इस्तेमाल करके, Todo ऐप्लिकेशन

वेबव्यू टैग लागू करना

टूडू आइटम के टेक्स्ट में यूआरएल खोजने और हाइपरलिंक बनाने के लिए, Todo ऐप्लिकेशन को अपडेट करें. इस लिंक पर क्लिक करने से, एक नई Chrome ऐप्लिकेशन विंडो (ब्राउज़र टैब नहीं) खुलती है. इसमें वेबव्यू से कॉन्टेंट दिखता है.

अनुमतियां अपडेट करें

manifest.json सेक्शन में जाकर, webview की अनुमति का अनुरोध करें:

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

वेबव्यू एम्बेडर पेज बनाना

अपने प्रोजेक्ट फ़ोल्डर के रूट में एक नई फ़ाइल बनाएं और उसे webview.html नाम दें. यह फ़ाइल एक <webview> टैग वाला बेसिक वेबपेज है:

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

टूडू आइटम में यूआरएल के लिए पार्स करें

controller.js के आखिर में, _parseForURLs() नाम का एक नया तरीका जोड़ें:

  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://" से शुरू होने वाली कोई स्ट्रिंग मिलती है, तो यूआरएल के चारों ओर एक एचटीएमएल ऐंकर टैग बनाया जाता है.

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() में अब भी, कोड को ठीक करें, ताकि वह लेबल के innerHTML के बजाय, लेबल के innerText का इस्तेमाल करे:

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;
  ...
}

वेबव्यू वाली नई विंडो खोलें

controller.js में, _doShowUrl() तरीका जोड़ें. इस तरीके से chrome.app.window.create() से एक नई Chrome ऐप्लिकेशन विंडो खुलती है. इस विंडो में 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);

chrome.app.window.create() कॉलबैक में, देखें कि src टैग एट्रिब्यूट के ज़रिए वेबव्यू का यूआरएल कैसे सेट किया गया है.

आखिर में, उपयोगकर्ता के किसी लिंक पर क्लिक करने पर doShowUrl() को कॉल करने के लिए, Controller कंस्ट्रक्टर में क्लिक इवेंट लिसनर जोड़ें:

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));
  ...
}

वह ऐप्लिकेशन लॉन्च करें जिसे पूरा कर लिया गया है

आपने चौथा चरण पूरा कर लिया है! अगर अपने ऐप्लिकेशन को फिर से लोड किया जाता है और http:// या https:// से शुरू होने वाले पूरे यूआरएल के साथ 'काम की सूची' जोड़ी जाती है, तो आपको कुछ ऐसा दिखेगा:

ज़्यादा जानकारी के लिए

इस चरण में पेश किए गए कुछ एपीआई के बारे में ज़्यादा जानकारी के लिए, यहां देखें:

क्या आप अगले चरण पर जाने के लिए तैयार हैं? पांचवां चरण - वेब से इमेज जोड़ना » पर जाएं