ServiceWorker:浏览器未检测到新版本(ServiceWorker: Browser not detecting new version)

我正在尝试基于本文的HTML5 ServiceWorker API。 在文章中提到了这一点

当用户导航到您的站点时,浏览器会尝试重新下载在后台定义服务工作者的脚本文件。 如果服务工作者文件中的字节差异与其当前的差异,则认为它是“新的”。

从中我得出结论,如果我要更改worker的脚本文件中的任何内容 ,它将提示浏览器定义一个新版本,该版本将在引用旧版本的worker的所有页面终止时启动。


编辑:显然浏览器正在缓存 serviceworker.js文件本身,这就是为什么不提取新版本的原因。 谁能告诉我如何避免缓存工作文件? 我已经浏览了可用的在线演示(包括 MDN和 W3C Webmob的GitHub )

这是我的文件结构:

|- index.html |- serviceworker.js // the actual worker |- serviceworker-cache-polyfill.js |- serviceworker-registration.js // contains the registration logic for the worker |- style.css

我将缓存配置为包含以下URL:

“/style.css”

I'm experimenting with the HTML5 ServiceWorker API based on this article. In the article it is mentioned that

When the user navigates to your site, the browser tries to redownload the script file that defined the service worker in the background. If there is even a byte's difference in the service worker file compared to what it currently has, it considers it 'new'.

From which I conclude that if I would change anything in the worker's script file, it would prompt the browser to define a new version that would kick in when all pages referencing the old version of the worker are terminated.


Edit: Apparently the browser is caching the serviceworker.js file itself, which is why new versions aren't picked up. Could anyone tell me how to avoid caching the worker file? I've looked through the available demo's online (including those on MDN and W3C Webmob's GitHub)

This is my file structure:

|- index.html |- serviceworker.js // the actual worker |- serviceworker-cache-polyfill.js |- serviceworker-registration.js // contains the registration logic for the worker |- style.css

I configured my cache to include following URLs:

"/style.css"

最满意答案

问题不是ServiceWorker的配置,而是我的服务器缓存文件的事实。 不能说我不觉得愚蠢我没有早点检查过这个。

为了将来参考,我使用的是http-server ,它默认将所有文件缓存1小时。 您可以通过传入c参数来覆盖它。 要完全禁用缓存,请传入-1 :

http-server -c-1

编辑以下文章包含有关如何使用ServiceWorker进行开发的一个很好的摘要:

为了保证使用最新版本的Service Worker脚本,请按照以下说明操作:

配置本地服务器以将Service Worker脚本作为不可缓存的服务(缓存控制:无缓存) 对服务工作者脚本进行更改后: 关闭指向您的Web应用程序的所有选项卡之外的所有选项卡 点击shift-reload以绕过服务工作者,以确保剩余的选项卡不受服务工作者的控制 点击重新加载以让较新版本的Service Worker控制页面。

The issue was not the configuration of the ServiceWorker, but the fact my server cached the file. Can't say I don't feel stupid I didn't checked this earlier.

For future reference, I am using http-server, it caches by default all files for 1 hour. You can override this by passing in the c parameter. To disable caching altogether, pass in -1:

http-server -c-1

Edit The following article contains a good summary on how to develop with the ServiceWorker:

In order to guarantee that the latest version of your Service Worker script is being used, follow these instructions:

Configure your local server to serve your Service Worker script as non-cacheable (cache-control: no-cache) After you made changes to your service worker script: close all but one of the tabs pointing to your web application hit shift-reload to bypass the service worker as to ensure that the remaining tab isn't under the control of a service worker hit reload to let the newer version of the Service Worker control the page.

更多推荐