使用firebase

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）< / p>

在此处，您可以右键单击并选择Delete进行清除。

或者你可以跑...

caches.delete("static");

在您的控制台中删除缓存（或在您的应用中添加一个按钮，以及＃34;加载新版本＆＃34;），清除缓存并刷新页面。

Answer 2

在处理类似问题时，我发现本教程很有帮助：link。我的应用程序仅适用于移动应用程序，因此我采用了方法2。它对我有用-刷新几次页面最终更新了已安装的PWA。

这涉及在我的服务工作者脚本（即skipWaiting()）的开头添加sw.js。

然后将这段代码放在html主页中（可能是index.html）

  // handles page refresh service worker update
  var refreshing;
  navigator.serviceWorker.addEventListener('controllerchange',
    function () {
      if (refreshing) return;
      refreshing = true;
      window.location.reload();
    }
  );