Au cours de cette étape, vous allez apprendre:
- Afficher du contenu Web externe dans votre application de manière sécurisée et dans un bac à sable
Durée estimée pour cette étape: 10 minutes.
Pour avoir un aperçu de ce que vous allez faire dans cette étape, descendez en bas de cette page ↓.
En savoir plus sur la balise WebView
Certaines applications doivent présenter du contenu Web externe directement à l'utilisateur, tout en les conservant dans l'expérience de l'application. Par exemple, un agrégateur d'actualités peut vouloir intégrer des actualités provenant de sites externes en utilisant la mise en forme, les images et le comportement du site d'origine. Pour ces utilisations et d'autres, les applications Chrome disposent d'une balise HTML personnalisée appelée webview.
Implémenter la balise WebView
Mettez à jour l'application Todo pour rechercher des URL dans le texte de la tâche et créer un lien hypertexte. Lorsque vous cliquez sur le lien, une nouvelle fenêtre d'application Chrome (et non un onglet de navigateur) s'ouvre avec une WebView présentant le contenu.
Modifier les autorisations
Dans manifest.json, demandez l'autorisation webview:
"permissions": [
"storage",
"alarms",
"notifications",
"webview"
],
Créer une page d'intégration de WebView
Créez un fichier dans le répertoire racine de votre projet et nommez-le webview.html. Ce fichier est une page Web de base avec une balise <webview>:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<webview style="width: 100%; height: 100%;"></webview>
</body>
</html>
Analyser les URL dans les tâches
À la fin de controller.js, ajoutez une méthode appelée _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);
Lorsqu'une chaîne commençant par "http://" ou "https://" est trouvée, une balise d'ancrage HTML est créée pour encapsuler l'URL.
Afficher des liens hypertextes dans la liste de tâches
Recherchez showAll() dans controller.js. Mettez à jour showAll() pour analyser les liens à l'aide de la méthode _parseForURLs() ajoutée précédemment:
/**
* 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));
};
Procédez de la même manière pour showActive() et 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));
};
Enfin, ajoutez _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);
...
}
Toujours dans editItem(), corrigez le code afin qu'il utilise le innerText du libellé au lieu du innerHTML du libellé:
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;
...
}
Ouvrir une nouvelle fenêtre contenant une vue Web
Ajoutez une méthode _doShowUrl() à controller.js. Cette méthode ouvre une nouvelle fenêtre d'application Chrome via chrome.app.window.create() avec webview.html comme source de fenêtre:
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);
Dans le rappel chrome.app.window.create(), notez comment l'URL de WebView est définie via l'attribut de balise src.
Enfin, ajoutez un écouteur d'événements de clic dans le constructeur Controller pour appeler doShowUrl() lorsqu'un utilisateur clique sur un lien:
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));
...
}
Lancer votre application de tâches terminée
Vous avez terminé l'étape 4. Si vous actualisez votre application et que vous ajoutez une tâche avec une URL complète commençant par http:// ou https://, vous devriez obtenir un résultat semblable à celui-ci:
Pour en savoir plus
Pour en savoir plus sur certaines des API présentées dans cette étape, consultez les ressources suivantes:
Prêt à passer à l'étape suivante ? Passez à l'étape 5 : Ajouter des images depuis le Web.