Nesta etapa, você vai aprender:
- Como mostrar conteúdo da Web externo no seu app de maneira segura e no sandbox.
Tempo estimado para concluir esta etapa: 10 minutos.
Para conferir uma prévia do que você vai concluir nesta etapa, role até a parte de baixo da página ↓.
Saiba mais sobre a tag de visualização da Web
Alguns aplicativos precisam apresentar conteúdo da Web externo diretamente ao usuário, mas mantê-lo dentro da experiência do aplicativo. Por exemplo, um agregador de notícias pode querer incorporar as notícias de sites externos com toda a formatação, imagens e comportamento do site original. Para esses e outros usos, os apps do Chrome têm uma tag HTML personalizada chamada webview.
Implementar a tag WebView
Atualize o app de tarefas para pesquisar URLs no texto do item de tarefas e criar um hiperlink. O link, quando clicado, abre uma nova janela do app Chrome (não uma guia do navegador) com uma visualização da Web que apresenta o conteúdo.
Atualizar permissões
Em manifest.json, solicite a permissão webview:
"permissions": [
"storage",
"alarms",
"notifications",
"webview"
],
Criar uma página de incorporação de webview
Crie um novo arquivo na raiz da pasta do projeto e nomeie-o como webview.html. Esse arquivo é uma
página da Web básica com uma tag <webview>:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<webview style="width: 100%; height: 100%;"></webview>
</body>
</html>
Analisar URLs em itens de lista de tarefas
No final de controller.js, adicione um novo método chamado _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);
Sempre que uma string que começa com "http://" ou "https://" é encontrada, uma tag âncora HTML é criada para envolver o URL.
Renderizar hiperlinks na lista de tarefas
Encontre showAll() em controller.js. Atualize showAll() para analisar links usando o
método _parseForURLs() adicionado anteriormente:
/**
* 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));
};
Faça o mesmo para 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));
};
Por fim, adicione _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);
...
}
Ainda em editItem(), corrija o código para que ele use o innerText do rótulo em vez do
innerHTML do rótulo:
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;
...
}
Abrir nova janela contendo o WebView
Adicione um método _doShowUrl() ao controller.js. Esse método abre uma nova janela do app do Chrome usando
chrome.app.window.create() com webview.html como a origem da janela:
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);
No callback chrome.app.window.create(), observe como o URL da webview é definido pelo atributo de tag
src.
Por fim, adicione um listener de evento de clique no construtor Controller para chamar doShowUrl() quando um
usuário clicar em um 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));
...
}
Iniciar o app de tarefas concluído
Você concluiu a Etapa 4! Se você recarregar o app e adicionar um item de lista de tarefas com um URL completo começando com http:// ou https://, você verá algo parecido com isto:
Para saber mais
Para informações mais detalhadas sobre algumas das APIs apresentadas nesta etapa, consulte:
Tudo pronto para continuar para a próxima etapa? Acesse Etapa 5: adicionar imagens da Web »