Question

我一直在尝试仅使Android的PWA脱机，但是该站点的缓存会经常清除。有什么方法可以使缓存永久保留？

Answer 1

您可以为服务工作者定义静态资产和数据请求的缓存策略。

在下面有关service workers and caching strategies的文章中，我列出了不同的策略，并描述了何时更适合实施特定策略。

您可以缓存静态资产，并在安装软件时将其脱机提供。这些文件应仅是应用程序的“最低”版本（通常称为应用程序外壳）。因此，如果无法获得任何资源，则cache.addAll方法将拒绝promise。这意味着仅当所有目标资源都已缓存时，服务工作者才能成功安装。

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('staticAssetsCache').then(function(cache) {
      return cache.addAll(
        [
          '/css/bootstrap.css',
          '/css/styles.css',
          '/js/jquery.min.js',
          '/offline.html'
        ]
      );
    })
  );
});

您还可以缓存HTTP GET请求，例如在stale while revalidate策略之下，该策略从缓存中返回数据（如果有），并在后台尝试从网络中获取和缓存较新的版本：

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.open('www.my-web-app.com')
      .then(function(cache) {

       return cache.match(event.request)
       .then(function(response) {
         var fetchPromise = fetch(event.request).then(function(networkResponse) {

            cache.put(event.request, networkResponse.clone());
            return networkResponse;
          })

        // response contains cached data, if available
        return response || fetchPromise;
      })
    })
  );
});

如果您使用的是Angular或Workbox库，请https://dev.to/paco_ita/create-progressive-web-apps-with-angular-workbox-pwa-builder-step-4-27d了解更多详细信息。

Answer 2

我认为我读过某个地方的Safari和Chrome浏览器会经常使缓存失效以获取新更新。没有逻辑，只需重新获取文件即可。

我确实还有一个额外的问题：即使手动清除缓存并注销服务工作者并再次获取所有信息（更新），它们也会在应用程序重新启动时重置为“添加到主屏幕”版本... 有人知道如何解决这个问题吗？

如何制作持久性PWA缓存？

2 个答案: