如何制作持久的 PWA 缓存？

Question

我一直在尝试为 Android 制作仅离线 PWA，但该网站的缓存经常会被清除。 有没有办法让缓存永久保留？

Answer 1

您可以为 Service Worker 定义静态资产和数据请求的缓存策略。

在下面关于Service Worker 和缓存策略的文章中，我列出了不同的策略，并描述了何时实施特定策略更有意义。

您可以缓存静态资产并在安装软件时离线提供它们。 这些文件应该只是您的应用程序的“最低”版本（通常称为应用程序外壳）。 因此，如果无法获得任何资源， cache.addAll方法将拒绝承诺。 这意味着只有当所有目标资源都被缓存时，Service Worker 才会成功安装。

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

我相信我在某处读过 iOS Safari 和 Chrome 会经常使缓存无效以获得新的更新。 它背后没有逻辑，只是重新获取文件。

---

解决方案：

（在最近的 Chrome 开发日志中，它提到频率从 3 天减少到 1 天）

为了防止清除缓存/IndexDB，我发现了这一点。

if (navigator.storage && navigator.storage.persist)
  // '.persist()' will silently pass or trigger a dialog
  navigator.storage.persist().then(function(persistent) {
    alert(persistent ? 'persistent' : 'denied');
  })
else
  alert('not available - iOS / ancient Android?');