更新

您已發布 PWA：有些使用者會透過瀏覽器使用這個應用程式，其他使用者則會在裝置上安裝。更新應用程式時，請務必採用最佳做法，避免發生任何錯誤。

你可以更新：

  • 。
  • 裝置中已有快取資產。
  • Service Worker 檔案或其依附元件。
  • 資訊清單中繼資料。

讓我們一探究竟。

更新資料

如要更新資料 (例如儲存在 IndexedDB 中的資料)，您可以使用 Fetch、WebRTC 或 WebSocket API 等工具。如果您的應用程式支援任何離線功能，請記得一併更新支援這些功能的資料。

使用相容的瀏覽器時，除了使用者開啟 PWA 時，系統還能在背景同步處理資料。這些選項包括：

  • 背景同步處理：儲存失敗的要求，並透過 Service Worker 的同步處理來重試這些要求。
  • 網頁定期背景同步處理：定期於背景中同步處理資料，讓應用程式提供更新的資料，即使使用者尚未開啟應用程式也沒問題。
  • 背景擷取：下載大型檔案 (即使 PWA 關閉時亦然)。
  • 網路推送：從喚醒 Service Worker 的伺服器傳送訊息，並通知使用者。這通常稱為「推播通知」。這個 API 需要使用者授權。

這些 API 都是從 Service Worker 內容執行。這項功能目前僅適用於以 Chromium 為基礎的瀏覽器、Android 和電腦作業系統。使用其中一個 API 時，您可以在 Service Worker 執行緒中執行程式碼，例如從伺服器下載資料及更新 IndexedDB 資料。

正在更新資產

更新素材資源包含所有用於轉譯應用程式介面的檔案，例如 HTML、CSS、JavaScript 和圖片。例如應用程式邏輯變更、屬於介面的圖片或 CSS 樣式表。

更新模式

以下是處理應用程式更新的常見模式，但您隨時都可以按照自身需求自訂流程：

  • 完整更新：每次變更，即使只有微幅變更，都會觸發取代整個快取內容。這個模式會模擬裝置專用應用程式處理更新的方式，因此會耗用較多頻寬和耗時。
  • 已變更的資產更新：只有自上次更新後已變更的資產才會在快取中替換。通常使用 Workbox 等程式庫實作。包括建立快取檔案清單、檔案的雜湊表示法，以及時間戳記。透過這項資訊，服務工作處理程序會將這份清單與快取資產進行比對，並決定要更新哪些資產。
  • 個別素材資源更新：只要素材資源有變更，就會個別更新。「放送」章節中說明的重新驗證策略，則是個別更新素材資源的例子。

更新時間

另一個最佳做法是找出檢查更新內容的好時機，並套用更新內容。建議的方法如下：

  • 服務工作處理程序喚醒時。沒有可監聽這個時刻的事件，但瀏覽器會在喚醒時，執行 Service Worker 的全域範圍中的任何程式碼。
  • 在 PWA 的主要視窗中，當瀏覽器載入網頁後，可避免應用程式載入速度變慢。
  • 觸發背景事件時，例如 PWA 收到推播通知或背景同步事件。您可以更新快取，讓使用者在下次開啟應用程式時就能取得素材資源的新版本。

最新即時資訊

也可以選擇是否要在應用程式開啟 (上線) 或關閉時套用更新。使用應用程式關閉方法時，即使應用程式已下載新素材資源，該應用程式也不會進行任何變更，而會在下次載入時使用新版本。

即時更新意味著，一旦在快取中更新素材資源，PWA 就會取代目前載入中的素材資源。本課程未涵蓋一項複雜的工作。部分可協助導入這項更新的工具為 livereload-js，CSS 資產更新 CSSStyleSheet.replace() API。

更新 Service Worker

當服務工作處理程序或其依附元件變更時，瀏覽器會觸發更新演算法。瀏覽器會使用快取檔案與網路來源資源之間的位元組逐位元組比較來偵測更新。

接著，瀏覽器會嘗試安裝新版 Service Worker，新的 Service Worker 就會處於「等待中」狀態 (如「服務工作站」章節所述)。新的安裝作業會為新 Service Worker 執行 install 事件，如果您要快取該事件處理常式中的資產，系統也會一併重新快取資產。

偵測 Service Worker 變更

為了偵測新的 Service Worker 已就緒並安裝，我們使用 Service Worker 註冊中的 updatefound 事件。新的 Service Worker 開始安裝時，會觸發這個事件。我們需要等待其狀態透過 statechange 事件變更為 installed，詳情請參閱以下內容：

async function detectSWUpdate() {
  const registration = await navigator.serviceWorker.ready;

  registration.addEventListener("updatefound", event => {
    const newSW = registration.installing;
    newSW.addEventListener("statechange", event => {
      if (newSW.state == "installed") {
         // New service worker is installed, but waiting activation
      }
    });
  })
}

強制覆寫

系統會安裝新的 Service Worker，但預設正在等待啟用。這項等候作業可避免新服務工作處理程序接管可能與新版本不相容的舊用戶端。

但我們不建議這麼做，但新的服務工作處理程序可以略過等待期，並立即開始啟用。

self.addEventListener("install", event => {
   // forces a service worker to activate immediately
   self.skipWaiting();
  });

self.addEventListener("activate", event => {
  // when this SW becomes activated, we claim all the opened clients
  // they can be standalone PWA windows or browser tabs
  event.waitUntil(clients.claim());
});

當控制目前頁面的 Service Worker 變更時，會觸發 controllerchange 事件。舉例來說，新工作站略過等待程序，成為新的進行中工作站。

navigator.serviceWorker.addEventListener("controllerchange", event => {
   // The service worker controller has changed
 });

更新中繼資料

您也可以更新應用程式的中繼資料，通常在網頁應用程式資訊清單中設定。舉例來說，您可以更新應用程式圖示、名稱或起始網址，也可以新增應用程式捷徑等新功能。不過，如果使用者在裝置上以舊圖示安裝了應用程式，會發生什麼事？他們取得更新版本的方式和時間為何？

答案會因平台而異。接著介紹可用的選項

iOS、iPadOS 和 Android 瀏覽器的 Safari

在這些平台上，如要取得新的資訊清單中繼資料，唯一的方法是從瀏覽器重新安裝應用程式。

透過 WebAPK 在 Android 裝置上使用 Google Chrome

如果使用者在 Android 裝置上使用 Google Chrome 安裝 PWA，且已啟用 WebAPK (大部分的 Chrome PWA 安裝功能)，系統會根據演算法偵測並套用更新。詳情請參閱這篇資訊清單更新文章。

關於程序的其他注意事項：

如果使用者未開啟 PWA，系統就不會更新 WebAPK。 如果伺服器沒有回應資訊清單檔案 (404 錯誤)，即使使用者開啟 PWA，Chrome 也不會檢查更新至少 30 天。

請在 Android 版 Chrome 中前往 about:webapks，查看「需要更新」旗標的狀態，然後要求更新。如要進一步瞭解這個偵錯工具，請參閱「工具與偵錯章節」。

透過 WebAPK 在 Android 裝置上使用 Samsung 網際網路

處理程序與 Chrome 版本類似。在此情況下，如果 PWA 資訊清單需要更新，則 WebAPK 將於 24 小時內刪除更新的 WebAPK 後，改為連上 Wi-Fi 網路。

在電腦上使用 Google Chrome 和 Microsoft Edge

在電腦裝置上，PWA 啟動時，瀏覽器會判斷上次檢查本機資訊清單是否有變更的時間。如果資訊清單自瀏覽器上次啟動以來不曾經過審查，或在過去 24 小時內未檢查過，瀏覽器就會針對該資訊清單發出網路要求，然後與本機副本進行比對。

「所選資源」更新之後，會在所有視窗關閉後觸發更新。

通知使用者

部分更新策略需要重新載入或從用戶端新增導覽。建議您在有人等待更新時通知對方，但讓他們有機會在最合適的時間更新頁面。

你可以透過以下做法通知使用者：

  • 使用 DOM 或 canvas API 在螢幕上顯示通知。
  • 使用 Web Notifications API。這個 API 屬於推送權限，可在作業系統中產生通知。即使不是來自伺服器的推送訊息通訊協定，您仍然必須取得網路推送權限才能使用。只有在 PWA 未開啟的情況下，我們才可使用這個選項。
  • 使用 Badging API，讓 PWA 的安裝圖示提供更新

DOM 中顯示的更新通知。.

進一步瞭解 Badging API

Badging API 可讓您在相容的瀏覽器中，為 PWA 的圖示加上徽章號碼或徽章圓點。已安裝圖示中的標記是小型標記，表示應用程式正在等候內容。

含有八則通知的 Twitter 範例，以及另一個顯示旗幟類型徽章的應用程式。

您必須對 navigator 物件呼叫 setAppBadge(count)，才能設定徽章號碼。當您知道有更新可以提醒使用者時，可以透過視窗或 Service Worker 的情境來執行這項操作。

let unreadCount = 125;
navigator.setAppBadge(unreadCount);

如要清除標記，您可以對同一物件呼叫 clearAppBadge()：

navigator.clearAppBadge();

資源