MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

ブラウザアプリ (現在は System の一部です) は、ページナビゲーション・検索・ブックマークなどを含むブラウザとして必要な機能を持っています。この記事では ブラウザアプリの基本的な機能の動作と、巨大なシステムの一部として動作していることについて説明します。

Gaia は Gecko 上で動作しています。これは、Gekco インスタンスとして一般的な Web ページをナビゲートするブラウザアプリや System ブラウザ を設計可能にしています。これは、mozBrowser API を操作することにより可能になっています。

注意: B2G OS 2.1 以上から、ブラウザアプリは System アプリの一部となっています。これは、ブラウザアイコンをクリックして開いたり、ユニバーサルサーチからアクセスしたり、ナビゲーションケイパビリティからアクセスできることを意味しています。このアプリとブラウジングタブは今後 Haida ユーザーエクスペリエンスとして共通のエクスペリエンスとして統合され、タスクマネージャーに表示・シートとして表示(エッジジェスチャー)されます。

システムブラウザ (Browser Chrome)

B2G OS ユーザーがホームスクリーンに表示されるように Web ページをブックマークした際、ブラウザアプリの代わりにシステムブラウザを開くサブシーケンスが動作します。これは画面下に戻る・進む・更新機能を含むツールバーを持っています。Gaia では、この機能を Browser Chrome または wrapper と呼んでいます。以下の図のように右下の矢印を押したときに表示されます。

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

もし Web ページで戻る・進む・更新機能を利用したい場合、アプリマニフェストに以下のように Browser Chrome を有効にすることで実現できます。

declare { chrome: { navigation: true } }

注意: Browser Chrome のツールバーはコンテンツの高さに影響します。そのため、Web ページレイアウトに考慮する必要があります。

処理順番

B2G OS 上で新しい Web ページを開いた際、以下の処理順番になります。

Gecko > WrapperFactory > Window Manager > AppWindow > BrowserFrame

system/js/wrapper_factory から継承している Wrapper は mozbrowseropenwindow イベントをブックマークページから受信します。

handleEvent 部分で、ハンドラーは Web ページをブラウザアプリ・Browser Chrome どちらで開くかを定義したイベントをチェックします。

最後に、一致するウィンドウ上で起動するために launchWrapper が実行されます。

ユニバーサルサーチとナビゲーション

新しい検索とナビゲーションバーでは、B2G OS 上からユーザーはお気に入りページや、入力した URL 、新しいアプリを入手することができます。

B2G OS は web アプリを利用しており、欲しいアプリがインストールされていない新しいアプリだとしてもすぐに開くことができます。そのため、この機能はブラウザからのスマートロケーションバーやホームスクリーンからの adaptive app search の組み合わせとみなせます。全ては web ライクですぐに使えるため、何もインストールする必要はありません。

ブラウザアプリ

ブラウザアプリは一般的なブラウザ体験を提供するための認定 web アプリです。メイン機能は 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();
});

ブラウザは DOM がロードされた時に init() 関数を実行します。

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);
},

getAllElements 関数は全てのキャメルケース要素のハンドラーを取得した後に、 apps/browser/js/browser_db.js を実行しデフォルトのサーチエンジンやブックマークの追加の準備をするために利用します。

ブックマーク

B2G OS 2.0 から apps/bookmark はブックマークの保存 / 削除アクティビティのハンドラーとして利用しています。

最も興味深い実装として、以下のような 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
  }
},

上述しているように、アクティビティは save.html や remove.html によってハンドリングされています。この操作は 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);
      }
    ...
  }
}

メッセージハンドラのリスナーである navigator.mozSetMessageHandler('activity') が save-bookmark または remove-bookmark アクティビティのメッセージを受信したときに、ActivityHandler 関数は対応する操作のハンドラーを呼び出します。

ドキュメントのタグと貢献者

 このページの貢献者: hamasaki, gurezo, mantaroh
 最終更新者: hamasaki,