Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

從製作 apps 開始上手

Web apps 是使用標準網頁科技建置的 apps。它們在任何現代的瀏覽器中運作、且可以用大家喜愛的工具開發。有一些特徵可以區分 Web apps 和網站:Apps 由使用者安裝、Apps 自給自足且不必總是需要瀏覽器的視窗 (如 chrome),也可以離線運作。舉例來說,Gmail、Twitter和 Etherpad 都是 Web apps。

「Open Web apps」計畫提議在現存的網站上加上一些東西,藉以將它們轉化成為豐富、有趣且具備強而有力運算環境的 apps。這些 apps 在桌上型電腦和行動裝置上運作,且若與網站相比之下更容易被使用者發現及使用。這些 apps 它們已經漸漸顯露出新奇的特色,像是貫串一個使用者所有裝置的同步。

在開始之前

如果您是第一次接觸開發 web apps 的話,那您也許需要驗證 實作狀態的 API

發佈 app

為了要從一個網站建立成為一個 Web app,所需要做的事情就是加上一個「app manifest」。這是一個描述這個 app 的 JSON 檔案,內容包括它的名稱、圖示和讓人閱讀的描述。

這個 manifest 必須被放置在與您的網站相同的網域,除此之外,必須使用「application/x-web-app-manifest+json」這種 Content-Type (請注意:現在在 Firefox 並不強制這樣做,但是如果要放上市集的話,就要遵守這個方式)。如果要了解 manifest 的全部細節的話請參考這份文件,為了幫助您開始開發,也請使用線上的 manifest 檢驗器

「相同來源」的方針

這裡要注意一件很重要的事情,每個 app 必須被放置在它所屬的網域。不同的 apps 不該共用相同的網域。例如,一種折衷的解決方案是將各個 app 放置在不同的子網域 (subdomain)。關於來源方面,可以參考關於 manifests 的常見問答

檢查是否已經安裝該 app 了

當網頁瀏覽器載入這個 app 的頁面時,這個頁面必須處理「該 user 尚未安裝這個 app」這件事情。因此您可以使用getSelf()檢查這個 app 已經被安裝了,如下:

var request = navigator.mozApps.getSelf();
request.onsuccess = function() {
  if (request.result) {
    // we're installed
  } else {
    // not installed
  }
}
request.onerror = function() {
  alert('Error checking installation status: ' + this.error.message);
}

安裝 app

您可以直接在您的網站上散佈這個您的 app。在您將 app 提交到 Mozilla 市集之前,您可以透過「從您的網站安裝」來測試您的 manifest 是有效的。

只需要放一個按鈕或是連結來執行下面這段 javascript 就可以了:

var request = navigator.mozApps.install("https://path.to/my/example.webapp");
request.onsuccess = function() {
  // great - display a message, or redirect to a launch page
}
request.onerror = function() {
  // whoops - this.error.name has details
}

執行navigator.mozApps.install()會讓瀏覽器載入 manifest 並且問使用者是否要安裝這個應用程式。如果使用者允許的話,這個 app 就會安裝到瀏覽器中。

navigator.mozApps.install()中的第二個參數是install_data它會保存一些資訊到應用程式安裝好之後的資料存放處。這些資訊能同步到其他裝置,也能在應用程式中使用 getSelf()接收 (參考 檢查是否已經安裝該 app 了)。如下例:

navigator.mozApps.install(
    "https://path.to/my/example.webapp",
    {
        user_id: "some_user"
    }
);

Promoting the app

Mozilla 正在建立一個使用開放架構的市集,包含探索、評論、評比、和帳務功能,因此可供第三方業者建立各自專屬的商店。而您不必將您的 app 列在商店內。

如果您要使用者購買您的 app,請看 市集付款

Mozilla 的 App 市集近期就會推出。您也可以藉由 申請 Apps 開發者電子報 來取得 Mozilla App 市集的進度,及開發 apps 的撇步和建議。

離線環境運作以及使用進階的行動裝置 APIs

近代的網頁瀏覽器已經添加了許多重要的功能,這些功能可以讓應用程式在離線環境下執行,或是存取行動裝置的性能。這裡有一些派得上用場的連結:

在本地端儲存資料

localStorage API」提供了以「key-value」方式運作且持續的資料儲存方式,我們可以用這種方式來記錄使用者造訪 app 的使用資料。如果使用者用的是現代的瀏覽器、像是 Firefox 4 或是更新的版本、或是 Google Chrome、您也可以用「IndexedDB」這個結構化、高效能的 client 端的儲存方式。

如果有一些資料需要跨越各個裝置、被分享到使用者所安裝的各個運作中的 app 的話,您應該如之前所述、在「install()」函數中加上「install_data」這個參數。

範例

一些 open web apps 的範例:

其他參考資料

Apps 開發者首頁

文件標籤與貢獻者

 此頁面的貢獻者: teoli, naihsi
 最近更新: teoli,