移动浏览器缓存的 PWA 安装应用程序问题

时间:2021-02-27 07:29:27

标签: progressive-web-apps service-worker service-worker-config

我使用 HTML、CSS 和 Javascript 开发了一个 PWA 应用程序。当我在浏览器中打开时,我收到 add to home screen 的提示。点击后,应用会添加到 home screen 和移动设备中的 Apps。我有以下服务工作者代码。

//VERSION: 3
const pb_cache = "cv1";
const assets = [
    "./manifest.json",
    "./index.html",
    "./offline.html",
]

self.addEventListener("install", installEvent => {
  installEvent.waitUntil(
    caches.open(pb_cache)
    .then((cache) => {
      return cache.addAll(assets)
      .then(() => {
        return self.skipWaiting(); //To forces the waiting service worker to become the active service worker
      })
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      if (response) {
        return response;
      }
      return fetch(event.request).then(function(response) {
        if (response.status === 404) {
          return caches.match('/offline.html');
        }
        return response
      });
    }).catch(function() {
      return caches.match('/offline.html');
    })
  );
});

我在服务工作线程 //VERSION: 3 顶部使用哈希来提供应用更新。一旦应用程序打开并且网络可用,Service Worker 就会更新所有缓存。如果没有网络,则从缓存中获取资源。一切正常。每当打开应用程序时,应用程序就会更新。但最近,该应用程序正在更新。我必须清除移动 Chrome 浏览器缓存才能使应用自行更新。

  1. 编写代码是为了绕过本地缓存。我做错了什么?

  2. 如果可能的话,我想通知客户有可用的更新。并且仅当用户单击更新通知时才更新应用程序。是否值得做,或者我应该在应用程序打开且网络可用时进行更新?

0 个答案:

没有答案
相关问题