首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >不变的服务工作人员正在重新安装和重新缓存。

不变的服务工作人员正在重新安装和重新缓存。
EN

Stack Overflow用户
提问于 2016-12-10 23:55:23
回答 2查看 1.3K关注 0票数 2

我正在注册我的服务工作者,在注册的回调中,加载一些缓存的文件

代码语言:javascript
复制
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('swRoot.js').then(() => {
        console.log('registered');

        System.import('react');
        System.import('react-dom');
        System.import('a').then(({ a }) => console.log('value from a', a));
    }, err => console.log(err));
}

它可以工作,但它似乎关闭浏览器选项卡,并重新打开它导致安装事件重新启动,这在某种程度上导致越来越多的取回/缓存命中(见下文)日志。一旦页面打开,随后的软刷新就会像预期的那样运行;我只看到我正在加载的几个文件的缓存命中。

因此,当服务工作人员第一次安装时,我看到3个缓存命中,我正在加载的3个文件。如果我关闭和重新打开,我得到6,然后9,在任何情况下,只要刷新页面显示原来的3缓存命中如预期。

为什么关闭然后重新打开浏览器选项卡会导致越来越多的获取事件触发相同的几个文件,而不是随后的刷新?

swRoot.js的全部内容如下

代码语言:javascript
复制
self.addEventListener('install', function(event) {
    console.log('INSTALLED');

    console.log('ADDING CACHE FILES');
    event.waitUntil(
        caches.open('v1').then(function(cache) {
            return cache.addAll([
                '/react-redux/node_modules/react/dist/react-with-addons.js',
                '/react-redux/node_modules/react-dom/dist/react-dom.js',
                '/react-redux/a.js'
            ]).then(function(){ console.log('cache filling success'); }).catch(function(){ console.log('cache filling failure') });
        })
    );
});

console.log('ADDING FETCH at root level');
self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request)
            .then(function(response) {
                // Cache hit - return response
                if (response) {
                    console.log('cache hit', event.request);
                    return response;
                }
                return fetch(event.request);
            })
    );
});


self.addEventListener('activate', function(event) {
    console.log('ACTIVATE');
});
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-12-14 22:04:31

因此,当服务工作人员第一次安装时,我看到3个缓存命中,我正在加载的3个文件。如果我关闭和重新打开,我得到6,然后9,在任何情况下,只要刷新页面显示原来的3缓存命中如预期。

最有可能的是,您正在查看以前的日志。要验证,可以显示每个日志的时间线。

  1. 转到控制台内的dev tools设置F1或单击图标(img1)
  2. 检查选项显示时间戳(img2)。
  3. 或者简单地在获取事件处理程序中添加一个console.log(new Date());

Img1

Img2

现在,您将能够从以前的请求中识别日志。您的sw没有提出额外的请求,只是控制台保持旧日志

要修复它,请在控制台内右键单击,然后单击清除控制台历史记录

希望能帮上忙。

票数 3
EN

Stack Overflow用户

发布于 2016-12-12 10:09:19

它不应该存在,因为安装事件只被调用一次。我认为问题在您的chrome浏览器中,更新服务工作者是checked.Open,->上的开发人员控制台,转到应用程序选项卡,->服务工作者,以及取消在重新加载上的更新。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/41081577

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档