PWA 可以使用下列 API，實現所有這三個使用案例：

儘管這些 API 具有相似的名稱，但它們的性質不同。

使用背景同步 API 將資料與伺服器同步處理

使用背景同步 API 允許使用者即使在離線狀態下也能繼續使用應用程式並執行操作。

例如，電子郵件應用程式可以讓其使用者隨時撰寫和發送訊息。 應用程式前端可以嘗試立即傳送訊息，如果裝置離線，Service Worker 可以攔截失敗的請求，並使用背景同步 API 將任務延遲到連線為止。

使用背景同步 API 的另一個範例是在背景為使用者載入內容。

背景同步 API 應該用於少量資料。 背景同步 API 要求服務工作角色在整個資料傳輸期間處於活動狀態。 背景同步處理 API 不應該用來擷取大型檔案，因為裝置可以決定終止 Service Worker，以保留電池使用時間。 請改用背景 擷取 API 。

背景同步處理 API 可在 Microsoft Edge 中使用，但您應該確定應用程式執行的其他瀏覽器和裝置支援背景同步處理 API。 若要確定支援背景同步處理 API，請測試物件是否 ServiceWorkerRegistration 具有 sync 屬性：

navigator.serviceWorker.ready.then(registration => {
    if (registration.sync) {
        // Background Sync is supported.
    } else {
        // Background Sync isn't supported.
若要深入瞭解介面 ServiceWorkerRegistration ，請參閱 MDN 的 ServiceWorkerRegistration 。
要求同步處理
首先要做的是請求同步。這可以由您的應用程式前端或服務工作者完成。
當您想讓使用者負責稍後的同步時，從前端請求同步是很好的。
當您希望對使用者透明時，向 Service Worker 請求同步是很好的。 在此情況下，Service Worker 可以偵測失敗的擷取要求，並立即要求同步處理。
若要要求同步處理，您需要一個 ServiceWorkerRegistration 和 一個標籤名稱。 從應用程式前端程式碼中，執行下列動作：
async function requestBackgroundSync() {
    const registration = await navigator.serviceWorker.ready;
    await registration.sync.register('my-tag-name');
或者，從服務工作者改為執行此操作：
async function requestBackgroundSync() {
    await self.registration.sync.register('my-tag-name');
上面的 my-tag-name 字串應該是識別此同步請求的唯一標籤，以便可以執行多個請求。
React 同步事件
一旦可以使用連線且服務工作者正在執行，就會向服務工作者發送一個 sync 事件，服務工作者可以使用它來同步必要的資料。 可以使用以下代碼監聽該 sync 事件：
self.addEventListener('sync', event => {
    if (event.tag === 'my-tag-name') {
        event.waitUntil(doTheWork());
在上述範例程式碼中，在服務工作者中新增了 sync 事件接聽器。 當偵聽器被呼叫時，程式碼會檢查標籤是否是前端註冊的標籤，然後呼叫 doTheWork。 此函式預期會傳回 Promise。
一般而言，函 doTheWork 式會將使用者離線時無法傳送的資訊傳送至伺服器。 將此資訊從前端儲存在 IndexedDB 儲存中可能會很有用，以便稍後在執行時 doTheWork 可以從服務工作者中擷取。
如需事件、 ServiceWorkerRegistration和SyncManager介面的相關Sync資訊，請參閱 背景同步化草稿規格 和 背景同步化 API 文件。
示範應用程式
              我的電影列表 PWA 是一個演示應用程序，如果用戶離線，它使用背景同步 API 稍後獲取電影信息。

若要查看範例程式碼，請查看 movies-db-pwa 存放庫。
偵錯與 DevTools 的背景同步處理
若要測試背景同步處理程式碼，您不需要離線，然後上線，然後等待 Microsoft Edge 觸發 sync 事件。  相反地，DevTools 可讓您模擬背景同步處理事件。
若要模擬 sync 事件：
開啟 DevTools (F12) 。
選取 [應用程式>服務工作者]。
在 同步 輸入欄位中輸入您在註冊同步時使用的標籤名稱。
選取 [同步處理] 按鈕。
使用定期背景同步 API 定期取得新鮮內容
定期背景同步 API 可讓 PWA 在背景定期擷取新內容，以便使用者稍後再次開啟應用程式時可以立即存取它。
使用定期背景同步 API，PWA 不需要在使用者使用應用程式時下載新內容 (例如新文章) 。  下載內容可能會降低體驗速度，因此請在更方便的時間檢索內容。
只有當裝置位於已知網路 (也就是裝置在) 之前已連線的網路上時，才會發生定期同步處理。  Microsoft Edge 會限制同步處理的頻率，以符合使用者使用應用程式的頻率。
如要檢查應用程式執行的瀏覽器和裝置是否支援此 API，請測試物件 ServiceWorkerRegistration 是否具有 periodicSync 屬性：
navigator.serviceWorker.ready.then(registration => {
    if (registration.periodicSync) {
        // Periodic Background Sync is supported.
    } else {
        // Periodic Background Sync isn't supported.
向使用者請求權限
定期背景同步需要使用者的許可。  針對指定的應用程式，要求此權限只會發生一次。
若要要求使用者取得定期背景同步處理的權限，請使用權限 API，如下所示：
const status = await navigator.permissions.query({name: 'periodic-background-sync'});
if (status.state === 'granted') {
  // Periodic background sync can be used.
} else {
  // Periodic background sync cannot be used.
若要深入瞭解權限 API，請參閱 MDN 的 權限 API 。
註冊定期同步處理
若要註冊定期同步，您需要定義最小間隔和唯一標籤名稱。  唯一的標籤名稱可讓您註冊多個定期背景同步。
async function registerPeriodicSync() {
    await registration.periodicSync.register('get-daily-news', {
        minInterval: 24 * 60 * 60 * 1000
上面程式碼中使用的對 minInterval 應於 1 天，以毫秒為單位。 這只是最小間隔，而 Microsoft Edge 會在以定期同步處理事件警示服務背景工作角色之前，先考慮其他因素，例如網路連線，以及使用者是否定期與應用程式互動。
React 定期同步事件
當 Microsoft Edge 決定這是執行定期同步處理的好時機時，Microsoft Edge 會 periodicsync 將事件傳送給您的服務背景工作角色。 您可以使用註冊同步處理時指定的相同標籤名稱來處理此 periodicsync 事件。
self.addEventListener('periodicsync', event => {
    if (event.tag === 'get-daily-news') {
        event.waitUntil(getDailyNewsInCache());
該 getDailyNewsInCache 函數是您的服務工作者可以從伺服器獲取新內容並將其存儲在緩存中的地方。 此函式預期會傳回 Promise，以指示同步處理是否成功或失敗。
如需事件、 ServiceWorkerRegistration和PeriodicSyncManager介面的詳細資訊PeriodicSync，請參閱：
              Web 定期背景同步 - 規格草案。
              Web 定期背景同步處理 API。
示範應用程式
              DevTools 提示是 使用定期背景同步處理 API 的 PWA。  [DevTools 提示] PWA 每天獲取新的開發人員工具提示並將其存儲在緩存中，以便用戶下次打開應用程序時可以訪問它們，無論他們是否在線。

前往 GitHub 上的原始程式碼。 特別是，應用程式會在 registerPeriodicSync 函式中註冊定期同步處理。  
              Service Worker 程式碼是應用程式接聽periodicsync事件的位置。
偵錯使用 DevTools 的定期背景同步處理
您可以使用 DevTools 來模擬 periodicsync 事件，而不是等候最小間隔。
若要模擬事件：
開啟 DevTools (F12) 。
選取 [應用程式>服務工作者]。
在 Periodic Sync 輸入欄位中輸入您在註冊定期同步時使用的標籤名稱。
選取 [定期同步] 按鈕。
使用背景擷取 API 在應用程式或服務背景工作角色未執行時擷取大型檔案
背景擷取 API 允許 PWA 將大量資料的下載完全委託給瀏覽器引擎。 如此一來，應用程式和服務工作者在下載過程中根本不需要執行。
此 API 適用於允許用戶下載音樂、電影或播客等大型檔案 () 離線使用案例的應用程式。 由於下載被委託給瀏覽器引擎，瀏覽器引擎知道如何處理不穩定的連接甚至完全失去連接，因此它可以在必要時暫停和恢復下載。
若要檢查是否支援此 API，請測試全域物件上是否存在建 BackgroundFetchManager 構函式：
if (self.BackgroundFetchManager) {
    // Background Fetch is supported.
} else {
    // Background Fetch isn't supported.
開始背景擷取
若要開始背景擷取：
navigator.serviceWorker.ready.then(async registration => {
    const fetch = await registration.backgroundFetch.fetch('my-download-id', 
                                                           fileUrls, options);
上面， my-download-id 應該是此背景擷取的唯一字串識別碼。 
              fileUrls 是要下載的檔案清單，這將是字串 URL 的陣列。 並且 options 是一個對象，可用於自訂瀏覽器中下載活動的外觀。
如需函 fetch 式的詳細資訊，請參閱 BackgroundFetchManager.fetch () 。
使用應用程式徽章 API 和通知 API 重新吸引使用者
使用應用程式徽章 API 和通知 API 讓使用者知道背景工作、下載或新內容已完成，而不會中斷其工作流程。  使用徽章和通知可以提高用戶對應用程式的重新參與度。
使用 Microsoft Edge，徽章會出現在工作列的應用程式圖示上，通知會與系統通知中心整合。
若要瞭解如何使用這些 API，請參閱使用 徽章、通知和推播訊息重新吸引使用者。