使用 firebase 更新 PWA答案

【问题标题】：Update PWA with firebase使用 firebase 更新 PWA
【发布时间】：2018-07-06 19:33:30
【问题描述】：

我使用 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"
  }
}

【问题讨论】：

如果您发布一些 firebase.json 文件和 service worker 的代码会更好，在此之前很难说这里发生了什么。
好的，我已经添加了firebase.json的代码。

标签： javascript firebase progressive-web-apps firebase-hosting

【解决方案1】：

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

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

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

在 chrome 的开发者工具中，您将能够看到 Cache 部分，该部分将列出您的缓存（下面屏幕截图中的那个称为 offline）

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

或者你也可以运行...

caches.delete("static");

在您的控制台中删除缓存（或在您的应用中添加一个按钮以“加载新版本”），这会清除缓存并刷新页面。

【讨论】：

我想安装在智能手机中，如果有新内容，我希望应用程序可以自动更新。我必须在哪里插入 caches.delete("static"); ?
看看这一章safaribooksonline.com/library/view/building-progressive-web/… 它涵盖了很多关于 PWA 生命周期和缓存管理的信息。如果您需要查看 Service Worker 的状态并在检测到新的 Service Worker 时（通常在一两次刷新后）自动清理旧缓存，则为简短版本。所以是的，这是可行的，但作为开发人员有点笨拙。

【解决方案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();
    }
  );

【讨论】：