漸進式網路應用程式：離線

1. 歡迎

在這個研究室中，您將使用現有的網路應用程式來離線運作。這是針對漸進式網路應用程式應用程式研討會的一系列輔助程式碼研究室首先。本系列還有七個程式碼研究室。

課程內容

  • 以人工方式編寫服務工作人員
  • 將 Service Worker 新增到現有的網路應用程式
  • 使用 Service Worker 和 Cache Storage API 將資源設為可離線使用

注意事項

  • 基本 HTML 和 JavaScript

您需要準備的項目

2. 進行設定

首先複製或下載完成此程式碼研究室所需的範例程式碼：

複製存放區時，請務必選取 starter 分支版本。壓縮檔中包含該分支版本的程式碼。

這個程式碼集需要 Node.js 14 以上版本。取得程式碼後，請在程式碼資料夾的指令列中執行 npm ci，以便安裝您需要的所有依附元件。然後執行 npm start，啟動程式碼研究室的開發伺服器。

原始碼檔案內含 README.md 檔案，說明所有分散式檔案。此外，以下是您會在這個程式碼研究室中使用的現有現有檔案：

金鑰檔案

  • js/main.js - 主要應用程式 JavaScript 檔案
  • service-worker.js - 應用程式服務檔案

3. 離線測試

進行任何變更之前，請先進行測試，確認網頁應用程式目前無法離線運作。如要這麼做，請讓電腦離線並重新載入網頁應用程式；如果您使用的是 Chrome，請執行以下操作：

  1. 開啟 Chrome 開發人員工具
  2. 切換至 [應用程式] 分頁
  3. 切換至 Service Workers 專區
  4. 勾選 [離線設定] 核取方塊
  5. 在不關閉 Chrome 開發人員工具的情況下重新整理頁面

Chrome 開發人員工具工具應用程式分頁，已勾選 [離線] 核取方塊，並且已勾選給 Service Workers

網站經過測試並成功載入後，現在該添加一些線上功能了！取消勾選離線核取方塊，然後繼續進行下一個步驟。

4. 離線觀看

現在正是新增基本服務工作人員的好時機！註冊程序會執行兩個步驟：註冊 Service Worker 和快取資源。

註冊 Service Worker

這裡已經有空白的 Service Worker 檔案，為了確保變更能顯示，請讓我們在我們的應用程式中註冊該檔案。如要這麼做，請將下列程式碼加進 js/main.js 頂端：

import swURL from 'sw:../service-worker.js';

// Register the service worker
if ('serviceWorker' in navigator) {
  // Wait for the 'load' event to not block other work
  window.addEventListener('load', async () => {
    // Try to register the service worker.
    try {
      const reg = await navigator.serviceWorker.register(swURL);
      console.log('Service worker registered! 😎', reg);
    } catch (err) {
      console.log('😥 Service worker registration failed: ', err);
    }
  });
}

說明

網頁載入後，此程式碼會註冊空的 service-worker.js 服務工作站檔案，且前提是網站必須支援 Service Worker。

預先快取資源

為了讓網頁應用程式能離線運作，瀏覽器必須能回應網路要求，並選擇轉送要求的位置。如要這麼做，請將以下內容新增至「service-worker.js」

// Choose a cache name
const cacheName = 'cache-v1';
// List the files to precache
const precacheResources = ['/', '/index.html', '/css/style.css', '/js/main.js', '/js/app/editor.js', '/js/lib/actions.js'];

// When the service worker is installing, open the cache and add the precache resources to it
self.addEventListener('install', (event) => {
  console.log('Service worker install event!');
  event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(precacheResources)));
});

self.addEventListener('activate', (event) => {
  console.log('Service worker activate event!');
});

// When there's an incoming fetch request, try and respond with a precached resource, otherwise fall back to the network
self.addEventListener('fetch', (event) => {
  console.log('Fetch intercepted for:', event.request.url);
  event.respondWith(
    caches.match(event.request).then((cachedResponse) => {
      if (cachedResponse) {
        return cachedResponse;
      }
      return fetch(event.request);
    }),
  );
});

現在，請返回瀏覽器並關閉預覽分頁，然後重新開啟。您應該會看到 console.log 對應到服務工作站的不同事件！

接著，請重新離線並重新整理網站。即使系統已連上網路，您還是應該會看到載入完成！

說明

在 Service Worker 的安裝事件期間，系統會使用 Cache Storage API 開啟已命名快取。然後在 precacheResources 中指定檔案和路徑，然後使用 cache.addAll 方法載入快取。這就是所謂的「前置作業」，因為系統會在安裝期間預先快取一組檔案，而不是在需要或要求時快取檔案。

Service Worker 負責控管網站後，要求的資源會透過 Proxy 等 Service Worker 傳遞。在這個要求中，每個要求都會觸發擷取事件，在這種服務工作站中，則會在快取中搜尋相符的資料 (如果符合項目)，就會傳回快取資源。如果找不到相符項目，系統會照常要求資源。

快取資源可防止應用程式因網路要求而離線運作。現在，應用程式在離線時也能傳回 200 狀態碼！

5. 恭喜！

你已瞭解如何使用服務工作站和快取儲存空間 API，將網頁應用程式離線。

本系列中的下一個程式碼研究室是使用 Workbox