MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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.

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.

A diagram showing that when a web page is opened in the system browser, it is given a toolbar.

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.

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.

Etiquetas do documento e colaboradores

 Colaboradores desta página: chrisdavidmills, jwhitlock, PriscillaAlcalde
 Última atualização por: chrisdavidmills,