In questo passaggio, imparerai:
- Come mostrare contenuti web esterni all'interno dell'app in modo sicuro e protetto tramite sandbox.
Tempo stimato per completare questo passaggio: 10 minuti.
Per visualizzare l'anteprima di ciò che completerai in questo passaggio, vai alla fine di questa pagina ↓.
Scopri di più sul tag WebView
Alcune applicazioni devono presentare contenuti web esterni direttamente all'utente, ma conservarli all'interno dell'esperienza dell'applicazione. Ad esempio, un aggregatore di notizie potrebbe voler incorporare le notizie di siti esterni con tutta la formattazione, le immagini e il comportamento del sito originale. Per questi e altri utilizzi, le app di Chrome prevedono un tag HTML personalizzato chiamato webview.
Implementare il tag WebView
Aggiorna l'app Attività per cercare gli URL nel testo dell'elemento di attività e creare un link ipertestuale. Se selezionato, il link apre una nuova finestra dell'app Chrome (non una scheda del browser) con un componente WebView che presenta i contenuti.
Aggiorna autorizzazioni
In manifest.json, richiedi l'autorizzazione webview:
"permissions": [
"storage",
"alarms",
"notifications",
"webview"
],
Crea una pagina per l'incorporamento di WebView
Crea un nuovo file nella directory principale della cartella del progetto e assegnagli il nome webview.html. Questo file è una
pagina web di base con un tag <webview>:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<webview style="width: 100%; height: 100%;"></webview>
</body>
</html>
Analizza gli URL negli elementi di promemoria
Alla fine di controller.js, aggiungi un nuovo metodo chiamato _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);
Ogni volta che viene trovata una stringa che inizia con "http://" o "https://", viene creato un anchor tag HTML per racchiudere l'URL.
Visualizza i link ipertestuali nell'elenco di cose da fare
Individua showAll() in controller.js. Aggiorna showAll() per analizzare i link utilizzando il
metodo _parseForURLs() aggiunto in precedenza:
/**
* 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));
};
Ripeti l'operazione per showActive() e 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));
};
Infine, aggiungi _parseForURLs() a 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);
...
}
Sempre in editItem(), correggi il codice in modo che utilizzi il valore innerText dell'etichetta anziché innerHTML dell'etichetta:
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;
...
}
Apri una nuova finestra contenente WebView
Aggiungi un metodo _doShowUrl() a controller.js. Questo metodo apre una nuova finestra dell'app Chrome tramite chrome.app.window.create() con webview.html come origine della finestra:
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);
Nel callback chrome.app.window.create(), controlla come viene impostato l'URL del componente WebView tramite l'attributo
del tag src.
Infine, aggiungi un listener di eventi di clic all'interno del costruttore Controller per chiamare doShowUrl() quando un utente fa clic su un link:
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));
...
}
Avvia l'app Attività completata
Fatto! Passaggio 4. Se ricarichi l'app e aggiungi un elemento di promemoria con un URL completo che inizia con http:// o https://, dovresti vedere qualcosa di simile al seguente:
Per maggiori informazioni
Per informazioni più dettagliate su alcune delle API introdotte in questo passaggio, fai riferimento a:
Vuoi continuare con il passaggio successivo? Vai al Passaggio 5: aggiungi immagini dal Web »