使用firebase更新PWA

Question

我用firebase托管做了一个渐进的Web应用程序.当我进行一些更改并部署时,我从浏览器访问应用程序时看不到更改.

这是我在sw.js中的代码:

self.addEventListener('install', function (event) {
  console.log('SW Installed');
  event.waitUntil(
    caches.open('static')
      .then(function (cache) {
        cache.addAll([
          '/',
          '/index.html',
          '/app.js',
          '/images/icons/icon-144x144.png'
        ]);
      })
  );
});

self.addEventListener('activate', function () {
  console.log('SW Activated');
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(res) {
        if (res) {
          return res;
        } else {
          return fetch(event.request);
        }
      })
  );
});

这是我在firebase.json中的代码:

{
  "hosting": {
    "public": "public"
  }
}

Answer 1

您的sw.js文件正在将应用的资源缓存到名为的缓存中static.

caches.open('static')
  .then(function (cache) {
    cache.addAll([
      '/',
      '/index.html',
      '/app.js',
      '/images/icons/icon-144x144.png'
    ]);
  })

重新部署Firebase托管应用时,此缓存不会被清除,因此您不会看到任何更改.

在chrome中的开发人员工具中,您将能够看到将列出缓存的缓存部分(下面的屏幕截图中的那个被调用offline)

从这里,您可以右键单击并选择Delete清除它.

或者你可以跑......

caches.delete("static");

在控制台中删除缓存(或在应用程序中添加"加载新版本"按钮),清除缓存并刷新页面.