摘要：接受一個(gè)對象作參數(shù)，來定義安裝時(shí)長和安裝是否成功，如果狀態(tài)為，則認(rèn)為此次安裝失敗，并且拋棄如果一個(gè)舊版本的正在運(yùn)行，則它將保持不變。在頁面既可以在中獲取到，也可以在頁面中獲取到，這就意味著你不必一定要通過來向緩存中添加內(nèi)容。

原文鏈接：The offline cookbook
作者：Jake Archibald

使用AppCache可以為我們提供幾種支持內(nèi)容離線工作的模式。如果這些模式正是你所需要的，那么恭喜你，你中了APPCache的大獎(jiǎng)（盡管頭等獎(jiǎng)依然無人認(rèn)領(lǐng)），但我們這些其余的人都擠在角落里來回?fù)u擺（譯者注：作者指的是由于設(shè)計(jì)上的原因，AppCache逐漸地被Web標(biāo)準(zhǔn)移除，雖然現(xiàn)在依然有瀏覽器支持這個(gè)功能，但最好不要再使用它了）

對于ServiceWorker（介紹）,我們放棄嘗試去解決離線問題，并且給開發(fā)者們提供靈活的組件從而讓他們自己去解決離線問題。它為您提供了控制緩存和處理請求的方式。這就意味著您可以創(chuàng)建您自己的模式。接下來讓我們來看一下幾個(gè)隔離環(huán)境下的可行模式，但是在實(shí)踐中，您可能會(huì)根據(jù)URL和context以串聯(lián)方式用到其中的多個(gè)模式。

目前，除非另有說明，所有的示例代碼都可以運(yùn)行在Chrome和Firefox瀏覽器中。關(guān)于ServiceWorker支持程度的完整詳情，請查閱"Is Service Worker Ready?"。

有關(guān)對于其中部分模式的運(yùn)行演示，請查閱Trained-to-thrill，并且此處的視頻將向您展示性能影響。

您可以通過ServiceWorker來獨(dú)立地從緩存中處理請求，所以我們要先多帶帶地研究一下它們。首先，我們啥時(shí)候應(yīng)該進(jìn)行緩存呢？

ServiceWorker提供給您一個(gè)install事件，您可以使用它把資源準(zhǔn)備好，即在處理其他事件之前必須要提前準(zhǔn)備好的東西。但是當(dāng)這些操作正在進(jìn)行中的時(shí)候，任何舊版本的ServiceWorker仍舊在運(yùn)行并且提供給頁面，因此您在此處進(jìn)行的操作一定不能中斷它們。

適用于： CSS、圖片、字體、JS文件、模板等，基本包含了你認(rèn)為網(wǎng)站在當(dāng)前“版本”中應(yīng)該需要的所有靜態(tài)資源。

如果未能獲取上述資源，那么您的網(wǎng)站完全無法運(yùn)行，對應(yīng)的本機(jī)應(yīng)用會(huì)將這些對象包含在初始下載中。

self.addEventListener("install", function(event) {
  event.waitUntil(
    caches.open("mysite-static-v3").then(function(cache) {
      return cache.addAll([
        "/css/whatever-v3.css",
        "/css/imgs/sprites-v6.png",
        "/css/fonts/whatever-v8.woff",
        "/js/all-min-v4.js"
        // etc
      ]);
    })
  );
});

event.waitUntil接受一個(gè)promise對象作參數(shù)，來定義安裝時(shí)長和安裝是否成功，如果promise狀態(tài)為rejected，則認(rèn)為此次安裝失敗，并且拋棄ServiceWorker（如果一個(gè)舊版本的ServiceWorker正在運(yùn)行，則它將保持不變）。caches.open和caches.addAll都返回promise對象，如果其中有任何一個(gè)資源獲取失敗，則caches.addAll會(huì)調(diào)用reject。
在trained-to-thrill 上，我使用此方法緩存靜態(tài)資源。

此方式與上述相似，但區(qū)別是：即使緩存失敗，既不會(huì)延遲安裝也不會(huì)導(dǎo)致安裝失敗。

適用于： 體積較大的，且暫時(shí)用不到的資源，比如用于游戲的較高級別的資源。

self.addEventListener("install", function(event) {
  event.waitUntil(
    caches.open("mygame-core-v1").then(function(cache) {
      cache.addAll(
        // levels 11-20
      );
      return cache.addAll(
        // core assets & levels 1-10
      );
    })
  );
});

我們沒有將levels 11-20的cache.addAll promise對象，返回給event.waitUntil，所以事件即使失敗，游戲在離線的時(shí)候依然可以使用。當(dāng)然，您必須考慮到缺少這些level的情況，如果缺少它們，則嘗試重新緩存它們。

在當(dāng)level 11-20正在下載的時(shí)候，ServiceWorker可能會(huì)終止，因?yàn)樗呀?jīng)完成處理事件。這就意味著它們就不會(huì)被緩存下來。未來，我們計(jì)劃添加一個(gè)在后臺(tái)下載的API以處理類似這樣的情況，以及下載像電影一樣的大體積文件。

適用于： 清理和遷移

在新的ServiceWorker已經(jīng)被安裝，并且較早版本的sw沒有在使用的情況下，則新的ServiceWorker會(huì)被激活，您就會(huì)得到一個(gè)activate事件。由于舊版本的退出，所以此時(shí)非常適合處理 IndexedDB 中的架構(gòu)遷移和刪除未使用的緩存。

self.addEventListener("activate", function(event) {
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.filter(function(cacheName) {
          // 如果您想刪除緩存，則返回true，
          // 但是請記住緩存在該域名內(nèi)的所有頁面之間
          // 是共享的
        }).map(function(cacheName) {
          return caches.delete(cacheName);
        })
      );
    })
  );
});

在激活的過程中，諸如fetch等事件會(huì)被放置在一個(gè)隊(duì)列中，所以一個(gè)長時(shí)間的激活可能會(huì)阻塞頁面加載。保證您的激活盡可能地簡潔，僅用于舊版本處于活動(dòng)狀態(tài)時(shí)無法執(zhí)行的操作。

在trained-to-thrill上，我使用此方法移除舊緩存。

適用于： 如果整個(gè)站點(diǎn)無法離線工作，您可以允許用戶選擇需要離線的可用內(nèi)容，比如，YouTube上的某個(gè)視頻，維基百科上的某篇文章，F(xiàn)lickr上的某張圖片等等。

為用戶提供一個(gè)“稍后閱讀”或者“離線保存”的按鈕。當(dāng)點(diǎn)擊按鈕，從網(wǎng)絡(luò)中獲取您所需要的內(nèi)容并把它放進(jìn)緩存中。

document.querySelector(".cache-article").addEventListener("click", function(event) {
  event.preventDefault();

  var id = this.dataset.articleId;
  caches.open("mysite-article-" + id).then(function(cache) {
    fetch("/get-article-urls?id=" + id).then(function(response) {
      // /get-article-urls returns a JSON-encoded array of
      // resource URLs that a given article depends on
      return response.json();
    }).then(function(urls) {
      cache.addAll(urls);
    });
  });
});

cacheAPI在頁面既可以在ServiceWorker中獲取到，也可以在頁面中獲取到，這就意味著你不必一定要通過ServiceWorker來向緩存中添加內(nèi)容。

適用于： 頻繁更新的資源，比如用戶收件箱，或者文章內(nèi)容。同樣適用于不重要但需要謹(jǐn)慎處理的內(nèi)容，比如用戶頭像。

如果請求的資源與緩存中的任何資源均不匹配，則從網(wǎng)絡(luò)中獲取，將其發(fā)送到頁面中，同時(shí)將其添加到緩存中。

如果您針對一系列網(wǎng)址執(zhí)行此操作，如頭像，那么您需要謹(jǐn)慎，不要使域名下的存儲(chǔ)變得臃腫，如果用戶需要回收磁盤空間，您不會(huì)想成為主要候選對象。請確保將緩存中不再需要的項(xiàng)目刪除。

self.addEventListener("fetch", function(event) {
  event.respondWith(
    caches.open("mysite-dynamic").then(function(cache) {
      return cache.match(event.request).then(function (response) {
        return response || fetch(event.request).then(function(response) {
          cache.put(event.request, response.clone());
          return response;
        });
      });
    })
  );
});

為了高效使用內(nèi)存，只允許讀取一次response或request的body，在上面的代碼中，使用.clone來創(chuàng)建能夠多帶帶地讀取數(shù)據(jù)的額外副本。

在trained-to-thrill上，我使用此方法緩存Flickr圖像。

適用于： 頻繁更新，但卻沒必要獲取最新的資源。用戶頭像就屬于此類。

如果緩存中已經(jīng)有一個(gè)可用的版本，直接使用該版本，但是會(huì)為了下一次的請求而獲取一個(gè)更新版本。

self.addEventListener("fetch", function(event) {
  event.respondWith(
    caches.open("mysite-dynamic").then(function(cache) {
      return cache.match(event.request).then(function(response) {
        var fetchPromise = fetch(event.request).then(function(networkResponse) {
          cache.put(event.request, networkResponse.clone());
          return networkResponse;
        })
        return response || fetchPromise;
      })
    })
  );
});

它和 HTTP 的 stale-while-revalidate 非常相似。

注意： Chrome暫時(shí)還不支持Push。（譯者注：Chrome 50及之后的版本開始支持，更多信息請參考 can i use）

Push API是基于ServiceWorker構(gòu)建的另一個(gè)功能。它允許喚醒ServiceWorker以響應(yīng)來自系統(tǒng)服務(wù)的消息，即使用戶沒有為您的站點(diǎn)打開一個(gè)標(biāo)簽，Push API也同樣可以工作。只有ServiceWorker被喚醒。您從頁面請求執(zhí)行此操作權(quán)限的同時(shí)，用戶也將收到提示。

適用于： 與通知有關(guān)的內(nèi)容，比如聊天消息，突發(fā)新聞，或者Email等。同樣適用于不經(jīng)常更改的可立即同步的內(nèi)容，例如待辦事項(xiàng)更新或者日程表的更改。

用戶常見的頁面表現(xiàn)是，出現(xiàn)一個(gè)通知，當(dāng)點(diǎn)擊它的時(shí)候，會(huì)打開或者聚焦到相關(guān)的頁面，但是在點(diǎn)擊它之前，務(wù)必要更新緩存。顯然，用戶在收到推送消息的時(shí)候，一定是在線的，但是，當(dāng)他們最終與通知交互時(shí)可能已經(jīng)離線，因此，允許離線訪問此內(nèi)容非常重要。Twitter原生應(yīng)用在大多數(shù)情況下都是非常好的離線優(yōu)先例子，但在這點(diǎn)上卻有點(diǎn)小問題。

如果沒有網(wǎng)絡(luò)連接，Twitter無法提供與推送消息相關(guān)的內(nèi)容。但是點(diǎn)按通知會(huì)移除通，從而使用戶獲取的信息比點(diǎn)按通知之前還要少。不要這么做！

下面的代碼會(huì)在展示通知之前更新緩存。

self.addEventListener("push", (event) => {
  if (event.data.text() == "new-email") {
    event.waitUntil(async function() {
      const cache = await caches.open("mysite-dynamic");
      const response = await fetch("/inbox.json");
      await cache.put("/inbox.json", response.clone());
      const emails = await response.json();
      registration.showNotification("New email", {
        body: "From " + emails[0].from.name
        tag: "new-email"
      });
    }());
  }
});

self.addEventListener("notificationclick", function(event) {
  if (event.notification.tag == "new-email") {
    // Assume that all of the resources needed to render
    // /inbox/ have previously been cached, e.g. as part
    // of the install handler.
    new WindowClient("/inbox/");
  }
});

注意： 后臺(tái)同步尚未加入到Chrome穩(wěn)定版本中。（譯者注：Chrome 49及之后的版本中開始支持，但FireFox、Safari尚未支持，更多信息請參考 can i use）

后臺(tái)同步是基于ServiceWorker來構(gòu)建的另一個(gè)功能。它允許您一次性地，或者按照（非常具有啟發(fā)性的）時(shí)間間隔來請求后臺(tái)數(shù)據(jù)同步。即使用戶沒有為您的站點(diǎn)打開一個(gè)標(biāo)簽，后臺(tái)同步也同樣可以工作。只有ServiceWorker被喚醒。您從頁面請求執(zhí)行此操作權(quán)限的同時(shí)，用戶也將收到提示。

適用于： 不緊急的更新，尤其是那些定期進(jìn)行的更新，每次更新都發(fā)送一個(gè)推送消息顯得太頻繁，比如社交時(shí)間表和新聞資訊。