O app Browser (que agora faz parte do sistema) fornece a funcionalidade do tipo navegador onde ele é necessário — incluindo navegação de página, pesquisa, e bookmarks. Este artigo explica como a funcionalidade básica do aplicativo do navegador funciona, e como ele se encaixa no sistema maior.
Já que o Gaia é feito para rodar a partir do Gecko, foi possível projetar um navegador app/System Browser para navegação regular de páginas web com base nessa instância Gecko. Este pode ser manipulado pela API mozBrowser.
Nota: DoFirefox OS 2.1 em diante, o app Browser é parte do System app. Isto significa que a navegação na web pode ser feita tanto clicando no ícone do Browser para abrir o aplicativo do navegador ou acessando o recurso de pesquisa e navegação universal. As abas de aplicativos e de navegação são então unificadas para uma experiência comum e existem na visão do gerenciador de tarefas e folhas (por gestos de ponta), como parte da experiência do usuário Haida.
Navegador do sistema (Navegador Chrome)
Quando um usuário Firefox OS marca uma página web para que ela apareça na tela inicial, a página web será posteriormente aberta no Navegador do sistema, ao invés do aplicativo Browser. Ele inclui uma barra de ferramentas na parte inferior contendo as funções gerais voltar/avançar/atualizar. Em Gaia isso é chamado de navegador Chrome ou wrapper. Você pode ver isso em ação no lado direito da imagem abaixo.
Se você quer que sua página da web ainda apresente as funções voltar/avançar/atualizar, você pode declarar o seguinte no manifesto do aplicativo que habilita o navegador Chrome.
declare { chrome: { navigation: true } }
Nota: A barra de ferramentas do navegador Chrome afeta a altura do conteúdo, de modo que este precisa ser levado em consideração para seus layouts de páginas web.
O fluxo de código
Ao abrir uma nova página web no Firefox OS, o fluxo de chamadas é
Gecko > WrapperFactory > Window Manager > AppWindow > BrowserFrame
Wrappers herdados a partir do system/js/wrapper_factory receberão o evento mozbrowseropenwindow para uma página Web marcada.
Na seção handleEvent, o manipulador irá verificar o evento para decidir se a página web deve ser aberta como um aplicativo ou no browser chrome.
Finalmente, o launchWrapper é chamado para abrir a janela correspondente.
Navegação & Busca Universais
Com a nova barra de pesquisa e navegação, os usuários podem acessar seus favoritos, digitar uma URL, ou descobrir um novo aplicativo, a partir de qualquer lugar no Firefox OS. A barra de pesquisa vive no topo da tela, e os usuários podem simplesmente tocar ou arrastar para abri-la.
Pense nisso como uma combinação do Awesome Bar do navegador e o app de pesquisa adaptativa do homescreen. Já que o Firefox OS usa aplicativos da web, quando você encontrar o que deseja, mesmo que seja um novo aplicativo, ele abrirá imediatamente. Você não precisa instalar nada, porque tudo é instantâneo e web-like.
App Browser
O aplicativo Browser é um webapp certificado que proporciona uma experiência geral de navegador web. A função principal está localizada no apps/browser/js/browser.js:
var Browser = {
init: function browser_init() {
this.getAllElements();
...
BrowserDB.init((function() {
...
}
}
};
window.addEventListener('load', function browserOnLoad(evt) {
window.removeEventListener('load', browserOnLoad);
Browser.init();
});
O navegador irá chamar sua função init(), enquanto o DOM é carregado.
getAllElements: function browser_getAllElements() {
var elementIDs = [
'toolbar—start', ... 'danger—dialog'];
// Loop and add element with camel style name to Modal Dialog attribute.
elementIDs.forEach(function createElementRef(name) {
this[this.toCamelCase(name)] = document.getElementById(name);
}, this);
},
A função getAllElements é usada para obter todos os manipuladores de elementos camelCase, após o qual o apps/browser/js/browser_db.js é chamado, para se preparar para adicionar o mecanismo de pesquisa padrão e bookmarks.
Bookmarks
Do Firefox OS 2.0, o apps/bookmark é usado para lidar com atividades bookmark salvar/remover.
A parte mais interessante apps/bookmark/webapp.manifest, é:
"activities": {
"save—bookmark": {
"filters": {
"type": "url",
"url": { "required":true, "pattern":"https?:.{1,16384}" }
},
"disposition": "inline",
"href": "/save.html",
"returnValue": true
},
"remove—bookmark": {
"filters": {
"type": "url",
"url": { "required":true, "pattern":"https?:.{1,16384}" }
},
"disposition": "inline",
"href": "/remove.html",
"returnValue": true
}
},
Conforme visto acima, a atividade é tratada pelo save.html e remove.html. Ambas as operações são delegadas para apps/bookmark/js/activity_handler.js:
var ActivityHandler = {
'save—bookmark': function ah_save(activity) {
},
'remove—bookmark': function ah_remove(activity) {
}
};
navigator.mozSetMessageHandler('activity', function onActivity(activity) {
var name = activity.source.name;
switch (name) {
case 'save—bookmark':
case 'remove—bookmark':
if (activity.source.data.type === 'url') {
ActivityHandler[name](activity);
}
...
}
}
Quando o manipulador ouvinte de mensagem navigator.mozSetMessageHandler('activity') recebe as atividades salvar-bookmark ou remover-bookmark, a função ActivityHandler é acionada para lidar com operações correspondentes.