“可用新版本"与服务工作者和sw-precache [英] "New version available" with service worker and sw-precache

问题描述

我正在尝试使用sw-precache，但是我一定做错了！

I'm trying to use sw-precache, but I must be doing something wrong!

我主要使用的是 github存储库中提供的演示代码，以获得对应用程序的更新.第一次缓存后，便不再检查新版本.

I'm mostly using the demo code available from the github repo and can't seem to get updates to the app to come through. Once it's cached the first time, it never checks for new versions.

我期望当我发布新的服务程序时，浏览器会请求新的服务程序并在后台相应地更新缓存.然后使用注册代码在示例中，我将能够提示用户刷新并从其新刷新的缓存中获取最新版本.

I was expecting that when I publish a new service worker, the browser would request the new service worker and update the cache accordingly in the background. Then using the registration code in the example, I would be able to prompt the user to refresh and get the latest version from their newly refreshed cache.

如果有人能向我指出正确的方向，我将不胜感激.

Would really appreciate if someone could please point me in the right direction.

为演示该问题，我在这里创建了一个隔离的示例: https://github.com/stevenocchipinti/sw-precache-demo

To demonstrate the problem, I've created an isolated example here: https://github.com/stevenocchipinti/sw-precache-demo

该示例使用了create-react-app的基本框架，该框架具有内置的构建任务，该任务负责对文件名等进行指纹识别.

The example uses a basic skeleton from create-react-app which has a built in build task which take care of fingerprinting the filenames, etc.

我怀疑问题出在我通过使用以下sw-precache配置来缓存所有内容:

I suspect the problem is with me caching everything by using the following sw-precache config:

{
  "staticFileGlobs": [ "build/**/*.*" ],
  "stripPrefix": "build/"
}

回购自述文件中有更准确的步骤，但是我要重现该问题所采用的基本步骤如下(出于我的期望，可能是错误的).

There are more accurate steps in the repo's readme, but the basic steps I'm taking to reproduce the problem are as follows (with my probably incorrect expectations).

1. 浏览至第一个应用程序
   我应该在控制台中看到Content is now available offline!

1. Browse to the app for the first
   I should see Content is now available offline! in the console

重新加载页面
控制台中的消息不应再出现，因为已安装了service worker，但是该页面仍然可以工作.

Reload the page
The message in the console should not appear again because the service worker is installed, but the page should still work.

离线并重新加载页面
该页面仍然可以工作

Go offline and reload the page
The page should still work

对源代码进行可见的更改

Make a visible change to the source code

重建(运行构建任务和sw-precache)

Rebuild (run the build task and sw-precache)

这是我的理解必须错误的地方

1. 重新加载页面

1. Reload the page

• 服务人员应在后台更新缓存
• 完成后，您应该在控制台中看到New or updated content is available.
• 在下一次重新加载之前，实际的可见更改应该是不可见的

重新加载页面

• 浏览器这次将使用新的缓存
• 这些更改现在应该可见！
• 控制台中不应有任何消息

问题

应用最初被缓存后，除非您取消注册服务工作者或强制重新加载，否则它将永远不会更新.

The problem

Once the app has been cached initially, it will never update unless you unregister the service worker or force a reload.

我不确定如何进行这项工作-任何帮助将不胜感激！

I'm not sure how to make this work - any help would be greatly appreciated!

推荐答案

复制开发托管环境后，我可以看到您正在为service-worker.js文件提供的浏览器HTTP缓存寿命为一小时:

After replicating your development hosting environment, I can see that you're serving your service-worker.js file with a browser HTTP cache lifetime of one hour:

在

There's more information as to why this is leading to the behavior you're seeing, along with best practices, in this previous answer. As mentioned at the top of that answer, browsers plan on changing their behavior to stop honoring the HTTP cache for the service worker file by default, mainly due to the type of confusion that you're experiencing here. For the time being, though, the production versions of both Chrome and Firefox continue to honor those headers.

这篇关于“可用新版本"与服务工作者和sw-precache的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！