如何在 Firefox OS 上建立瀏覽器 APP

Firefox OS 上的瀏覽器 APP 利用 Gecko 提供的 Browser API 來管理網頁瀏覽,並利用 HTML5 技術提供使用者界面。根據不同的實作它可以實現分頁,瀏覽歷史,書籤… 等等功能。這篇文章示範如何建立一個可以在 Firefox OS 裝置上使用的瀏覽器 APP,它包含了最基本的網誌列跟上一頁/下一頁功能。

文章範例的原始碼可以在這裡下載:
https://github.com/begeeben/firefox-os-browser-sample


基本工具: WebIDE

Firefox 34 以及之後的版本都包含了 WebIDE。開發瀏覽器 APP 的並不一定需要一台 Firefox OS 手機,我們可以在 WebIDE 上用 Firefox OS simulator 來執行這個 APP。使用 WebIDE 可以很容易的從範本建立一個 APP,並做 HTML/CSS/JS 編輯。要開啟 WebIDE,從上面的標題列選 Tools > Web Developer > WebIDE :

open webide


 

使用範本建立 APP:

首先,從 WebIDE 的空白範本建立一個 APP。Privileged APP 才能有 browser 權限使用 Browser API,它提供了一些在 Firefox OS 上才能用的 method 和 event 來管理 iframe

new priviledged app

建好的 APP 看起來像下面這張圖,接下來我們要開始寫 code 做瀏覽器 APP 需要的功能。

mybrowser empty


 

設定 manifest.webapp:

從範本建立好的 APP 已經在 manifest.webapp 裡設定  type  為 privileged

要使用 Browser API 我們需要加上  browser 權限:


 

HTML 結構:

這個瀏覽器 APP 上面會有一條工具列,畫面中央會拿來放用來瀏覽網頁用的 iframe,之後將用 javascript 來產生這個 iframe。這個 APP 剛開啟的時候預設顯示 “Hello myBrowser!"。

預設看起來長這樣:

browser startup


 

管理瀏覽網頁的 iframe:

要提供 iframe 裡面網頁的資訊到使用者界面上,需要接收處理  mozbrowser event。在  iframe 上加  mozbrowser 參數,就可以在這  iframe 上使用 Browser API。在這裡為了要把 UI 和 mozbrowser 的處理邏輯分開,我們建立一個 tab.js,這樣也預留了未來可以做多分頁瀏覽的彈性。

在  iframe 加上  mozallowfullscreen 參數可以允許網頁使用全螢幕。在網頁裡面在要顯示全螢幕的 element 上呼叫 Element.mozRequestFullscreen 。

加了  remote 參數讓  iframe 跑在另一個獨立的 child process 上。這是為了避免惡意的網站直接存取瀏覽器 APP 本身。(目前的 Firefox OS 版本還沒有允許 Nested OOP,因此這個參數在我們的範例還沒有作用,需要等 Bug 1020135 (nested-oop) [meta] Allow nested oop <iframe mozbrowser>)

Tab object 在建構的時候會建立一個 iframe ,並且開始聽這個  iframe 上的  mozbrowser event。

除了這五個 event 以外,這個簡單的 APP 還有很多  mozbrowser event 沒用到。這些 event 提供很多  iframe 有用的資訊,比如說 title ,URL,讀取進度,context menu 等等。

例如,我們可以用  mozbrowsertitlechange event 來收到  iframe 裡面網頁的 title 。在 tab.js 裡面當收到  title 的時候,發出一個  CustomEvent  ‘ tab:titlechange’ 通知其他組件更新頁面的 title。

這裡示範在 ‘ tab:titlechange ‘ event 的時候更新網頁 title。如果要做分頁總覽功能,也要用一樣的方式更新各個頁面的 title

 

在使用者送出 input 的時候瀏覽網頁:

在網址列裡面直接打搜尋條件很普遍而且很方便。當使用者送出 URL 的時候,先判斷這是不是一個有效的 URL,如果不是,就當做搜尋條件,使用搜尋引擎 URI 來搜尋。

接下來確認有沒有 Tab object,沒有的話就新建一個,把 URL 傳給 Tab 並設定成  iframesrc 。

currentTab.reload 裡面用了 iframe.reload 這個 Browser API 來重新讀取頁面。

 

開啟或關閉上一頁或下一頁按鈕:

最後要用 Browser API 檢查網頁能不能回上一頁或到下一頁。 iframe.getCanGoBack 會回傳一個 DOMRequest,在  onsuccess callback 裡面我們可以知道檢查的結果。這邊用 Promise 包起來讓他比較方便存取。

在網頁讀取完以後檢查能不能回上一頁,也就是當  mozbrowserloadend event 發生的時候。

 


 

執行 APP:

手邊可能沒有 Firefox OS 手機能用,不過你還是可以在 WebIDE 裡面用 Firefox OS simulator 來跑 APP:

Firefox_WebIDE_installing_simulator

按右上方的 Select Runtime 選一個版本:

Firefox_WebIDE_choose_simulator

當 Firefox OS 跑起來後,按上面中間的那些按鈕,你就可以執行和 debug 這個 APP。現在你有了一個新的 Firefox OS 瀏覽器 APP!

mybrowser finished

 

結語:

要讓這個簡單的瀏覽器 APP 好用還缺很多功能,比如說書籤,設定,搜尋建議,分享… 等。你將會需要 HTML storage 和  mozActivity 來實現這些功能。歡迎實現你的點子,然後分享到 Firefox OS 的 Marketplace 上!


 

參考閱讀:

https://hacks.mozilla.org/2014/08/building-the-firefox-browser-for-firefox-os/
https://developer.mozilla.org/en-US/docs/Web/API/Using_the_Browser_API

您可能也會喜歡

目前找不到相關文章

對此文章發表回應

你的電子郵件位址並不會被公開。 必要欄位標記為 *