PWA緩存刷新頁面

Question

我的網站的PWA有問題。 我需要與服務人員一起更新緩存，並且在互聯網上找到了很多代碼，但均無用。 我想念點什么。

我希望在重新加載頁面后完成更新，同樣，當我們單擊PWA的快捷方式時，所有內容都會自動更新。 這是我的清單和服務人員，以及使用的代碼。

你怎么看 ？

先感謝您

//Manifest -----

{
  "name": "Test",
  "short_name": "Test",
  "lang": "en",
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "white",
  "theme_color": "white",
  "icons": [{
      "src": "/img/icon-128.png",
        "sizes": "128x128",
        "type": "image/png"
      }, {
        "src": "/img/icon-144.png",
        "sizes": "144x144",
        "type": "image/png"
      }, {
        "src": "/img/icon-152.png",
        "sizes": "152x152",
        "type": "image/png"
      }, {
        "src": "/img/icon-192.png",
        "sizes": "192x192",
        "type": "image/png"
      }, {
        "src": "/img/icon-256.png",
        "sizes": "256x256",
        "type": "image/png"
      }, {
        "src": "/img/icon-512.png",
        "sizes": "512x512",
        "type": "image/png"
      }]
}

-

//Service-Worker -----

var cacheName = 'Test';
var filesToCache = [
  '/',
  '/index.html',
  '/css/style.css',
   ...
];

/* Start the service worker and cache all of the app's content */
self.addEventListener('install', function(e) {
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return cache.addAll(filesToCache);
    })
  );
});

/* Serve cached content when offline */
self.addEventListener('fetch', function(e) {
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});

self.addEventListener('activate', function(event) {
  var cacheKeeplist = ['cacheName'];

  event.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (cacheKeeplist.indexOf(key) === -1) {
          return caches.delete(key);
        }
      }));
    })
  );
});

Answer 1

問題非常簡單：您的Service Worker代碼未更新緩存。

如果查看fetch處理程序，它將從緩存或從網絡返回響應。 並且，如果它從網絡返回響應，則不會將新版本放入緩存中。

如果您查看install處理程序，它將緩存所有列出的文件。 這些文件（至少看起來是這樣）都被命名，因此名稱在版本之間保持相同。 含義：您的style.css 始終為 style.css並且當SW對其進行緩存時，它將對緩存的版本感到滿意，直到時間結束。 因為名稱相同，所以不知道有新版本。

如何解決這個問題？

您可以修改SW代碼，以便它始終檢查網絡中文件的新更新（此處的示例： https : //serviceworke.rs/strategy-cache-and-update.html ）。 您可能還希望為每次部署都會更改的文件使用唯一的名稱。

另一種方法可能是使用為您處理所有這些的庫。 Workbox有多種不同的緩存策略可供選擇（ https://developers.google.com/web/tools/workbox/modules/workbox-strategies ）。

編輯：如何更新添加到主屏幕的應用程序？

我不完全確定為什么當您再次打開它時，添加到主屏幕的應用程序沒有更新。 它可能正在運行某些較舊的版本，而該版本仍具有此版本的舊版本。 但是，您可以手動強制Service Worker檢查更新。 您可以使用registration.update()觸發對SW腳本新版本的檢查，如果找到，則強制刷新頁面（ location.reload() ）或向用戶顯示通知並要求刷新。 此處的文檔： https : //developer.mozilla.org/zh-CN/docs/Web/API/ServiceWorkerRegistration/update

如果您有一個用戶長時間保持打開狀態的應用程序（在移動設備或瀏覽器選項卡中），則最好自動輪詢軟件更新。 每天一次。 您甚至可以在每次激活/聚焦選項卡/應用程序時檢查更新。 頻率當然取決於您的應用程序，用例等。