在背景同步處理網頁應用程式的資料,提供更類似應用程式的體驗
你是否遇過下列任一情況?
- 搭火車或地鐵,在網路不穩或無法連線的情況下搭乘
- 因觀看過多影片而受到電信業者限制
- 居住在頻寬不足的國家/地區,無法滿足需求
如果是的話 我想知道為何特定平台專用應用程式能帶來更好的成效 滿足這些需求特定平台的應用程式可以擷取最新內容,例如新聞報導或天氣 資訊即使捷運沒有網路,您還是能讀取 新聞。
定期背景同步功能可讓網頁應用程式定期同步處理 資料,使得網頁應用程式更接近特定平台的行為 應用程式。
立即試用
透過即時示範模式,您可以嘗試定期在背景同步處理 app。 使用前,請先確認下列事項:
- 你使用的是 Chrome 80 以上版本。
- 個人中心 安裝 再啟用定期背景同步功能。
概念和用法
定期在背景同步處理功能,可讓漸進式網頁應用程式顯示最新內容 或由 Service Worker 支援的頁面啟動。方法是從 螢幕或頁面處於閒置狀態。這樣可以防止應用程式的 內容。更棒的是, 防止應用程式在重新整理前顯示內容旋轉圖示。
如果沒有定期在背景同步處理,網頁應用程式必須採用 下載資料。常見的例子是使用推播通知喚醒服務 工作站使用者遭到「有新的資料」等訊息中斷。 資料更新基本上是副作用。您還是可以選擇 透過推播通知取得真正重要的更新 即時新聞
定期在背景同步處理容易與背景同步處理功能混為一談。雖然他們 名稱相似,用途不同。除了其他功能 背景同步處理通常用於在系統執行工作階段時,用於將資料重新傳送到伺服器, 先前的要求失敗
正確吸引使用者互動
如未正確完成,定期背景同步處理可能會浪費使用者 再複習一下,機構節點 是所有 Google Cloud Platform 資源的根節點在發布之前,Chrome 會先試想一下 輸入的內容正確無誤本節說明 Chrome 的設計決策: 盡可能提高這項功能的實用性
Chrome 的第一項設計決策是網頁應用程式只能在 而且在背景同步處理的情況下 以另一個應用程式的形式啟動這個容器無法定期在背景同步處理 使用 Chrome 的一般分頁
此外,Chrome 不要在無意間或故意使用網頁應用程式
耗電量或數據用量,Chrome 設計定期在背景同步處理,以便
就必須為使用者提供價值來賺取收益。具體來說
Chrome 目前採用網站參與度分數
(about://site-engagement/
) 用於判斷是否會定期進行背景同步作業,以及多久進行一次背景同步作業
特定網頁應用程式的值區也就是說,除非有互動,否則系統完全不會觸發 periodicsync
事件
分數大於零,
periodicsync
事件。這可確保只有應用程式會在
就是你經常使用的背景
定期在背景同步處理與現有 API 的部分相似之處, 幾個最佳做法例如一次性背景同步處理 推播通知可讓網頁應用程式的邏輯更長的時間 (透過 Service Worker)。在大多數平台上 一般使用者會安裝的應用程式,在需要時 為重要更新提供更優質的使用者體驗 預先擷取內容、同步處理資料等同樣地,定期在背景同步處理 延長網頁應用程式邏輯的生命週期, 但可能會有幾分鐘
如果瀏覽器經常允許這麼做,且不受限制, 可能會導致某些隱私權疑慮Chrome 採取的策略 定期背景同步處理的風險:
- 背景同步處理活動只會在裝置搭載的網路上執行 與先前連線過的網路通訊Chrome 建議只連線至 值得信賴的一方
- 如同所有網際網路通訊,在背景執行定期同步作業 通訊端的用戶端位址、通訊所在的伺服器,以及 伺服器為盡可能降低曝光量,可大致減少只有應用程式的情況 若是在前景執行同步處理,瀏覽器會限制使用者 系統就會根據使用者使用該應用程式的頻率,在背景同步處理應用程式。如果 使用者停止經常與應用程式互動,定期背景同步處理 就會停止觸發與各平台現狀相比,這是淨化的淨利 應用程式。
何時可以使用?
使用規則因瀏覽器而異。總結來說,Chrome 在 定期背景同步處理的要求如下:
- 特定使用者參與度分數。
- 存在先前使用的網路。
同步處理時間不受開發人員控制。 同步處理頻率應與應用程式的使用頻率一致。(請注意, 目前並不會針對個別平台的應用程式提供這項機制)。它會佔用裝置的電源 存取狀態
使用時機
當 Service Worker 喚醒以處理 periodicsync
事件時,
要求資料的機會,但不是這樣做的「義務」。處理時
應將網路狀況和可用儲存空間納入考量
及下載不同資料量別擔心!您可以使用
以下資源可協助您:
權限
安裝 Service Worker 後,使用權限
使用 API 即可查詢
(periodic-background-sync
)檢查方式可以是視窗或
Service Worker 結構定義
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.
}
註冊定期同步處理
如先前所述,定期背景同步處理作業需要 Service Worker。擷取
使用 ServiceWorkerRegistration.periodicSync
並呼叫 PeriodicSyncManager
上的 register()
。註冊時需要標記和最低要求
同步處理時間間隔 (minInterval
)。代碼可識別已註冊的同步作業
以便註冊多個同步作業。在以下範例中,代碼名稱是
'content-sync'
,minInterval
為一天。
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
try {
await registration.periodicSync.register('content-sync', {
// An interval of one day.
minInterval: 24 * 60 * 60 * 1000,
});
} catch (error) {
// Periodic background sync cannot be used.
}
}
驗證註冊
呼叫 periodicSync.getTags()
即可擷取註冊標記的陣列。
以下範例使用標記名稱來確認快取更新作業已啟用,以避免發生
正在更新。
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
const tags = await registration.periodicSync.getTags();
// Only update content if sync isn't set up.
if (!tags.includes('content-sync')) {
updateContentOnPageLoad();
}
} else {
// If periodic background sync isn't supported, always update.
updateContentOnPageLoad();
}
你也可以使用 getTags()
,在網站上顯示有效的註冊清單
應用程式的設定頁面,讓使用者可以啟用或停用特定類型的
更新。
回應定期背景同步處理事件
如要回應定期背景同步處理事件,請新增 periodicsync
事件
Service Worker 的處理常式。傳遞給該物件的 event
物件會包含
tag
參數與註冊時使用的值相符。舉例來說
定期背景同步處理的名稱為 'content-sync'
,之後
「event.tag
」將為 'content-sync'
。
self.addEventListener('periodicsync', (event) => {
if (event.tag === 'content-sync') {
// See the "Think before you sync" section for
// checks you could perform before syncing.
event.waitUntil(syncContent());
}
// Other logic for different tags as needed.
});
取消註冊同步處理作業
如要結束已註冊的同步處理作業,請呼叫 periodicSync.unregister()
,並將
。
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
await registration.periodicSync.unregister('content-sync');
}
介面
以下是 Periodic Background 所提供介面的快速導覽 Sync API。
PeriodicSyncEvent
。傳遞至ServiceWorkerGlobalScope.onperiodicsync
事件處理常式,位於 自動顯示瀏覽器偏好設定PeriodicSyncManager
。註冊和取消註冊定期同步處理,並提供已註冊的標記 同步處理。從 ServiceWorkerRegistration.periodicSync 擷取這個類別的例項 資源。ServiceWorkerGlobalScope.onperiodicsync
。註冊處理常式以接收PeriodicSyncEvent
。ServiceWorkerRegistration.periodicSync
。傳回PeriodicSyncManager
的參照。
範例
更新內容
以下範例使用定期背景同步功能,下載及快取新聞網站或網誌的最新文章。請注意代碼名稱,表示同步處理的類型 ('update-articles'
)。對 updateArticles()
的呼叫會包裝在 event.waitUntil()
中,以免 Service Worker 在下載並儲存文章前終止。
async function updateArticles() {
const articlesCache = await caches.open('articles');
await articlesCache.add('/api/articles');
}
self.addEventListener('periodicsync', (event) => {
if (event.tag === 'update-articles') {
event.waitUntil(updateArticles());
}
});
為現有的網頁應用程式新增定期背景同步處理
必須新增這組變更 定期將背景同步處理至現有 PWA。這個範例包含幾個實用的記錄陳述式,描述 網頁應用程式定期背景同步處理的狀態。
偵錯
取得定期背景同步,且全程端對端檢視可能並不容易 並同時進行本機測試有效註冊次數、近似同步機制的資訊 以及過去同步處理事件的記錄,提供寶貴的背景資訊並進行偵錯 網頁應用程式的行為幸好,您可以找到這些資訊 您將透過 Chrome 開發人員工具的實驗功能
記錄本機活動
開發人員工具的「定期背景同步處理」部分是以重要事件為主軸 定期背景同步生命週期:註冊同步、執行 背景同步處理以及取消註冊。如要取得這些事件的資訊, 按一下「開始錄影」。
![開發人員工具中的記錄按鈕](https://developer.chrome.com/static/docs/capabilities/periodic-background-sync/image/the-record-button-devtoo-8f1042a4f517f.png?authuser=19&hl=zh-tw)
記錄時,開發人員工具中會顯示與事件相對應的項目,且 個別記錄的背景資訊和中繼資料
![定期背景同步處理的資料示例](https://developer.chrome.com/static/docs/capabilities/periodic-background-sync/image/an-example-recorded-peri-79a5f6a03b613.png?authuser=19&hl=zh-tw)
啟用錄製功能後,這項功能會保持啟用狀態長達三天。 可讓開發人員工具擷取背景同步處理的本機偵錯資訊 可能會發生的事
模擬事件
儘管記錄背景活動很有幫助,但有時你還是應該
想立即測試 periodicsync
處理常式而不用等待
事件。
您可以在「應用程式」面板的「服務工作人員」區段執行此操作: Chrome 開發人員工具。您可在「Periodic Sync」欄位提供代碼 並視需求觸發事件,次數不限。
![Service Workers「應用程式」面板的「定期同步」部分文字欄位和按鈕](https://developer.chrome.com/static/docs/capabilities/periodic-background-sync/image/the-service-workers-sec-9e8608bc5506e.png?authuser=19&hl=zh-tw)
使用開發人員工具介面
從 Chrome 第 81 版開始,您可以在「背景同步處理」部分的「 開發人員工具「Application」面板。
![顯示「定期背景同步處理」專區的應用程式面板](https://developer.chrome.com/static/docs/capabilities/periodic-background-sync/image/the-application-panel-sho-cac24bf6404e1.png?authuser=19&hl=zh-tw)