本頁面由 Cloud Translation API 翻譯而成。

離線食譜

Jake Archibald

我們透過 Service Worker 放棄嘗試解決離線問題，並提供開發人員可自行解決問題的動態元件。可讓您控管快取和要求的處理方式。也就是說，您可以自行建立模式。我們將個別介紹幾種可能的模式，但實際上，您可能會根據網址和情境同時使用其中許多模式。

如要查看這些模式的實際示範，請參閱「Trained-to-thrill」和這部影片，瞭解成效影響。

快取機器：儲存資源的時機

Service Worker 可讓您獨立處理快取和請求，因此我會分別示範這兩項功能。首先，請問您何時會執行快取？

安裝時：做為依附元件

Service Worker 會提供 install 事件。您可以使用這個事件來準備其他事件必須先準備好的內容。在這種情況下，任何先前版本的 Service Worker 仍在執行並提供網頁，因此您在此處執行的操作不得中斷這項作業。

適用於：CSS、圖片、字型、JS、範本...基本上，凡是您認為屬於網站「版本」的靜態內容，皆可使用此方法。

這些是指如果無法擷取，就會導致網站完全無法運作的項目，而相應的平台專屬應用程式會在初始下載時提供這些項目。

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 會使用承諾定義安裝的長度和成功與否。如果承諾遭到拒絕，安裝作業就會視為失敗，且這個 Service Worker 會遭到放棄 (如果有舊版正在執行，則會保留不變)。caches.open() 和 cache.addAll() 會傳回承諾。如果無法擷取任何資源，cache.addAll() 呼叫就會遭到拒絕。

在 trained-to-thrill 中，我用它來快取靜態資產。

安裝時，而非做為依附元件

這與上述方法類似，但不會延遲安裝程序，也不會在快取失敗時導致安裝失敗。

適用於：較大的資源，例如遊戲後續關卡的素材資源，這些資源並非立即需要。

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 and levels 1–10
        ();
    }),
  );
});

上述範例不會將關卡 11 至 20 的 cache.addAll 承諾傳回 event.waitUntil，因此即使失敗，遊戲仍可離線使用。當然，您必須考量這些層級可能不存在的情況，並在缺少時重新嘗試快取。

在第 11 到 20 級下載時，Service Worker 可能會因已完成事件處理作業而遭到終止，這表示這些事件不會快取。日後，Web Periodic Background Sync API 將處理這類情況，以及電影等較大的下載作業。該 API 目前僅支援 Chromium 分支。

啟用

適用於：清理和遷移。

新版 Service Worker 安裝完成且舊版未使用後，新版就會啟用，並觸發 activate 事件。由於舊版已淘汰，因此您可以處理 IndexedDB 中的結構定義遷移作業，並刪除未使用的快取。

self.addEventListener('activate', function (event) {
  event.waitUntil(
    caches.keys().then(function (cacheNames) {
      return Promise.all(
        cacheNames
          .filter(function (cacheName) {
            // Return true if you want to remove this cache,
            // but remember that caches are shared across
            // the whole origin
          })
          .map(function (cacheName) {
            return caches.delete(cacheName);
          }),
      );
    }),
  );
});

在啟用期間，其他事件 (例如 fetch) 會放入佇列，因此啟用程序可能會長時間執行，進而阻斷網頁載入作業。請盡量精簡啟用程序，並只用於舊版無法執行的操作。

在 trained-to-thrill 中，我用它來移除舊的快取。

使用者互動時

適用情況：當整個網站無法離線時，您可以選擇允許使用者選取要離線使用的內容。例如 YouTube 上的影片、維基百科上的文章、Flickr 上的特定相片庫。

為使用者提供「稍後閱讀」或「離線儲存」按鈕。點選後，請從網路擷取所需內容，並將內容放入快取。

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

快取 API 可用於網頁和 Service Worker，也就是說，您可以直接從網頁新增至快取。

網路回應

適用於：經常更新的資源，例如使用者的收件匣或文章內容。也適用於非必要內容 (例如圖像)，但請小心使用。

如果請求與快取中的任何內容不符，請從網路取得該請求，並將其傳送至網頁，同時將其加入快取。

如果您要為一系列網址 (例如顯示圖片) 執行這項操作，請務必小心，不要讓來源的儲存空間過大。如果使用者需要回收磁碟空間，您不應成為主要候選人。請務必刪除不再需要的快取項目。

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

為提高記憶體使用效率，您只能讀取回應/要求的內容一次。上述程式碼使用 .clone() 建立其他可個別讀取的副本。

在 trained-to-thrill 中，我用它來快取 Flickr 圖片。

Stale-while-revalidate

適用情況：經常更新資源，但不一定要使用最新版本。這類內容可能包括虛擬人物。

如果有可用的快取版本，請使用該版本，但下次請擷取更新版本。

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」非常相似。

在推送訊息中

Push API 是另一項建構在 Service Worker 之上的功能。這樣一來，Service Worker 就能在回應作業系統訊息服務傳送的訊息時喚醒。即使使用者沒有開啟網站的分頁，也會發生這種情況。只有 Service Worker 會喚醒。您可以透過網頁要求權限，系統就會向使用者顯示提示訊息。

適用於：與通知相關的內容，例如即時通訊訊息、即時新聞或電子郵件。以及不常變更的內容，因為這類內容可從即時同步處理作業中受益，例如待辦事項清單更新或日曆變更。

常見的最終結果是通知，只要輕觸即可開啟/聚焦相關頁面，但在發生這種情況之前更新快取非常重要。使用者在收到推播訊息時顯然已連上線，但最終與通知互動時可能已離線，因此提供離線內容十分重要。

以下程式碼會在顯示通知前更新快取：

self.addEventListener('push', function (event) {
  if (event.data.text() == 'new-email') {
    event.waitUntil(
      caches
        .open('mysite-dynamic')
        .then(function (cache) {
          return fetch('/inbox.json').then(function (response) {
            cache.put('/inbox.json', response.clone());
            return response.json();
          });
        })
        .then(function (emails) {
          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/');
  }
});

關於 background-sync

背景同步處理是另一項以 Service Worker 為基礎建構的功能。您可以使用這項功能，要求背景資料同步處理作業一次性執行，或在 (非常推測) 間隔期間執行。即使使用者沒有開啟網站的分頁，也會發生這種情況。只有 Service Worker 會喚醒。您可以透過網頁要求權限，系統就會向使用者顯示提示。

適用情況：非緊急更新，尤其是更新頻率很高，每則更新都傳送推播訊息會讓使用者感到頻繁的情況，例如社群時間軸或新聞文章。

self.addEventListener('sync', function (event) {
  if (event.id == 'update-leaderboard') {
    event.waitUntil(
      caches.open('mygame-dynamic').then(function (cache) {
        return cache.add('/leaderboard.json');
      }),
    );
  }
});

快取持續性

來源會獲得一定數量的可用空間，可用於執行所需作業。這些可用空間會在所有來源儲存空間之間共用：(本機) 儲存空間、IndexedDB、檔案系統存取權，當然還有快取資料。

您獲得的金額未指定。這項時間會因裝置和儲存空間狀況而異。您可以透過以下方式查看獲得的點數：

if (navigator.storage && navigator.storage.estimate) {
  const quota = await navigator.storage.estimate();
  // quota.usage -> Number of bytes used.
  // quota.quota -> Maximum number of bytes available.
  const percentageUsed = (quota.usage / quota.quota) * 100;
  console.log(`You've used ${percentageUsed}% of the available storage.`);
  const remaining = quota.quota - quota.usage;
  console.log(`You can write up to ${remaining} more bytes.`);
}

不過，就像所有瀏覽器儲存空間一樣，如果裝置的儲存空間不足，瀏覽器可以隨意丟棄您的資料。很抱歉，瀏覽器無法區分你想不惜一切保留的電影，和你不太在意的遊戲。

如要解決這個問題，請使用 StorageManager 介面：

// From a page:
navigator.storage.persist()
.then(function(persisted) {
  if (persisted) {
    // Hurrah, your data is here to stay!
  } else {
   // So sad, your data may get chucked. Sorry.
});

當然，使用者必須授予權限。請使用 Permissions API。

讓使用者成為這個流程的一部分非常重要，因為我們現在可以預期使用者會控管刪除作業。如果裝置的儲存空間不足，清除非必要資料無法解決問題，使用者可以自行決定要保留及移除哪些項目。

為使這項功能運作，作業系統必須在儲存空間用量細目中，將「持久」來源視為與特定平台的應用程式相同，而非將瀏覽器回報為單一項目。

提供建議：回應要求

無論您執行多少快取作業，除非您告知服務工作者何時及如何使用快取，否則服務工作者不會使用快取。以下是處理要求的幾種模式：

僅快取

適用對象：您認為對網站特定「版本」而言屬於靜態的任何內容。您應該已在安裝事件中快取這些項目，因此可以依賴這些項目。

self.addEventListener('fetch', function (event) {
  // If a match isn't found in the cache, the response
  // will look like a connection error
  event.respondWith(caches.match(event.request));
});

雖然您不常需要特別處理這種情況，但「Cache, falling back to network」會涵蓋這類情況。

僅限網路

適用於：沒有離線等價項目的項目，例如數據分析回報、非 GET 要求。

self.addEventListener('fetch', function (event) {
  event.respondWith(fetch(event.request));
  // or simply don't call event.respondWith, which
  // will result in default browser behavior
});

雖然您不常需要特別處理這種情況，但「Cache, falling back to network」會涵蓋這類情況。

快取，改用網路

適用情況：建構離線優先應用程式。在這種情況下，您應以這種方式處理大多數要求。其他模式則會根據傳入的要求做為例外狀況。

self.addEventListener('fetch', function (event) {
  event.respondWith(
    caches.match(event.request).then(function (response) {
      return response || fetch(event.request);
    }),
  );
});

這可讓您針對快取中的項目採用「僅快取」行為，並針對未快取的項目採用「僅網路」行為 (包括所有無法快取的 GET 以外請求)。

快取和網路競爭

適用於：在磁碟存取速度較慢的裝置上，追求小型素材資源的效能。

在某些舊款硬碟、防毒掃描工具和更快的網路連線組合中，從網路取得資源的速度可能比從磁碟取得還要快。不過，如果使用者已在裝置上取得內容，使用網路連線可能會浪費資料，請留意這一點。

// Promise.race is no good to us because it rejects if
// a promise rejects before fulfilling. Let's make a proper
// race function:
function promiseAny(promises) {
  return new Promise((resolve, reject) => {
    // make sure promises are all promises
    promises = promises.map((p) => Promise.resolve(p));
    // resolve this promise as soon as one resolves
    promises.forEach((p) => p.then(resolve));
    // reject if all promises reject
    promises.reduce((a, b) => a.catch(() => b)).catch(() => reject(Error('All failed')));
  });
}

self.addEventListener('fetch', function (event) {
  event.respondWith(promiseAny([caches.match(event.request), fetch(event.request)]));
});

網路改用快取

適用於：針對經常更新的資源，提供快速修正方式，但不包括網站的「版本」。例如文章、顯示圖片、社群媒體時間軸和遊戲排行榜。

也就是說，您會為線上使用者提供最新的內容，但離線使用者則會取得較舊的快取版本。如果網路要求成功，您很可能會想要更新快取項目。

不過，這種方法有缺陷。如果使用者的連線不穩定或速度緩慢，他們必須等待網路連線中斷，才能在裝置上取得完全可接受的內容。這可能需要非常長的時間，並且會造成令人不悅的使用者體驗。請參閱下一個模式「先快取再連線」，以取得更佳解決方案。

self.addEventListener('fetch', function (event) {
  event.respondWith(
    fetch(event.request).catch(function () {
      return caches.match(event.request);
    }),
  );
});

快取後再連線

適用於：經常更新的內容。例如文章、社群媒體時間軸和遊戲排行榜。

這需要網頁提出兩項要求，一個要求是對快取，另一個則是對網路。這項功能的概念是先顯示快取資料，然後在網路資料到達時更新網頁。

有時您可以直接在收到新資料時取代目前資料 (例如遊戲排行榜)，但這可能會對較大內容造成干擾。基本上，請勿「消失」使用者可能正在閱讀或互動的內容。

Twitter 會在舊內容上方加入新內容，並調整捲動位置，讓使用者不受干擾。這是因為 Twitter 大多保留內容的線性順序。我複製了這個模式，讓訓練成驚奇，盡可能快速地將內容顯示在畫面上，並在最新內容一到達時立即顯示。

頁面中的程式碼：

var networkDataReceived = false;

startSpinner();

// fetch fresh data
var networkUpdate = fetch('/data.json')
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    networkDataReceived = true;
    updatePage(data);
  });

// fetch cached data
caches
  .match('/data.json')
  .then(function (response) {
    if (!response) throw Error('No data');
    return response.json();
  })
  .then(function (data) {
    // don't overwrite newer network data
    if (!networkDataReceived) {
      updatePage(data);
    }
  })
  .catch(function () {
    // we didn't get cached data, the network is our last hope:
    return networkUpdate;
  })
  .catch(showErrorMessage)
  .then(stopSpinner);

Service Worker 中的程式碼：

您應該隨時前往網路並更新快取。

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

在 trained-to-thrill 中，我使用 XHR 而非 fetch 來解決這個問題，並濫用 Accept 標頭，告訴 Service Worker 從何處取得結果 (網頁程式碼、Service Worker 程式碼)。

一般備用

如果您無法從快取和/或網路提供內容，建議您提供一般備用內容。

適用於：次要圖像，例如顯示圖片、失敗的 POST 要求，以及「離線時無法使用」頁面。

self.addEventListener('fetch', function (event) {
  event.respondWith(
    // Try the cache
    caches
      .match(event.request)
      .then(function (response) {
        // Fall back to network
        return response || fetch(event.request);
      })
      .catch(function () {
        // If both fail, show a generic fallback:
        return caches.match('/offline.html');
        // However, in reality you'd have many different
        // fallbacks, depending on URL and headers.
        // Eg, a fallback silhouette image for avatars.
      }),
  );
});

您改用的項目可能是安裝依附元件。

如果網頁要發布電子郵件，服務工作者可能會改為將電子郵件儲存在 IndexedDB 的「outbox」中，並回應讓網頁知道傳送失敗，但資料已成功保留。

服務工作者端範本

適用情況：無法快取伺服器回應的網頁。

在伺服器上算繪網頁可加快速度，但這可能會導致快取中包含不必要的狀態資料，例如「已以…登入」。如果您的網頁由 Service Worker 控管，您可以選擇一併要求 JSON 資料和範本，然後轉為顯示。

importScripts('templating-engine.js');

self.addEventListener('fetch', function (event) {
  var requestURL = new URL(event.request.url);

  event.respondWith(
    Promise.all([
      caches.match('/article-template.html').then(function (response) {
        return response.text();
      }),
      caches.match(requestURL.path + '.json').then(function (response) {
        return response.json();
      }),
    ]).then(function (responses) {
      var template = responses[0];
      var data = responses[1];

      return new Response(renderTemplate(template, data), {
        headers: {
          'Content-Type': 'text/html',
        },
      });
    }),
  );
});

全部整合在一起

您可以使用其中一種方法，事實上，您可能會根據要求網址使用其中許多。舉例來說，trained-to-thrill 使用：

安裝時快取，適用於靜態 UI 和行為
快取 Flickr 圖片和資料的網路回應
對於大多數要求，從快取擷取，並改用網路
針對 Flickr 搜尋結果從快取，然後從網路擷取

只要查看要求並決定要採取哪些行動即可：

self.addEventListener('fetch', function (event) {
  // Parse the URL:
  var requestURL = new URL(event.request.url);

  // Handle requests to a particular host specifically
  if (requestURL.hostname == 'api.example.com') {
    event.respondWith(/* some combination of patterns */);
    return;
  }
  // Routing for local URLs
  if (requestURL.origin == location.origin) {
    // Handle article URLs
    if (/^\/article\//.test(requestURL.pathname)) {
      event.respondWith(/* some other combination of patterns */);
      return;
    }
    if (/\.webp$/.test(requestURL.pathname)) {
      event.respondWith(/* some other combination of patterns */);
      return;
    }
    if (request.method == 'POST') {
      event.respondWith(/* some other combination of patterns */);
      return;
    }
    if (/cheese/.test(requestURL.pathname)) {
      event.respondWith(
        new Response('Flagrant cheese error', {
          status: 512,
        }),
      );
      return;
    }
  }

  // A sensible default pattern
  event.respondWith(
    caches.match(event.request).then(function (response) {
      return response || fetch(event.request);
    }),
  );
});

…你就會瞭解。

抵免額

…適用於可愛的圖示：

由 buzzyrobot 提供的程式碼
Calendar，作者：Scott Lewis
Network 由 Ben Rizzo 製作
SD，作者：Thomas Le Bas
CPU，圖像來源：iconsmind.com
由 trasnik 製作的Trash
通知，由 @daosme 發布
由 Mister Pixel 設計的版面配置
Cloud，作者：P.J. Onori

感謝 Jeff Posnick 在我按下「發布」前，找出許多錯誤。