服务工作者问题

问题描述 投票:2回答:2

我在the page at this link中实现的服务工作者演示遇到了一些问题。我试图尽可能地减少这个代码的代码,但是要粘贴到这里太长了。

一个问题是,当页面完全加载时,我转到Chrome devtools的Application选项卡,我在Cache中看到了很多:

enter image description here

不明白为什么有那么多缓存...它可能是我正在加载的字体但仍然......看起来很大。

更令人担忧的是,当我点击该部分中的Clear Site Data按钮(勾选所有选项)时,饼图中的红色Cache Storage部分不会降至零。 (编辑...观察:虽然这在隐身窗口中完美无瑕...红色部分在点击按钮时会降至零。)

此外,当我在清除网站数据后点击F5重新加载页面时,服务工作者无法再次正确安装...似乎卡在installing上:

enter image description here

为了让它再次出现,我必须点击该部分中的unregister链接,然后点击F5。 (再次编辑......在Incognito窗口中完美运行......服务人员在击中installing后不会卡在F5上。)

我对此代码的另一个问题是缓存存储(服务工作缓存)部分中的值未正确填充:

enter image description here

所有Content-Length信息都是零,Time Cached信息也部分缺失。

事实上,this service worker example没有出现这些问题,所以它一定是我做错了。

javascript caching google-chrome-devtools service-worker
2个回答
0
投票

我在测试你的网站时遇到的一件事就是某些资源有525响应。这是一个糟糕的SSL握手,这意味着无法通过SSL获取服务工作者,或者无法获取缓存的某些内容以进行缓存。这似乎是一个间歇性的服务器端问题,因为它偶尔会发生。我的猜测是,当你有时安装它会给你一个525的响应,使服务工作者陷入安装模式,当你取消注册并更新它时,服务器再次工作,你可以正确安装它。

除了你的服务工作者似乎工作正常,它安装和一切从缓存加载应该。

尝试将您的站点上传到其他服务器并查看错误是否仍然存在,或者更好地运行一个小型本地主机服务器来测试您的服务工作者。如果您想要一个非常简单的安装node.js并运行'npm install -g http -server',然后打开站点根文件夹中的终端/命令提示符并运行'http-server -o',它将运行并在默认浏览器中打开测试服务器。

最后请注意,在注册服务工作者时,请不要检查https,如果您在localhost或127.0.0.1上运行,您的服务工作者仍然可以在不需要https的情况下运行和测试,并且如果您的站点是活动的,则不能没有https运行,无需检查它。检查https本身不是问题,但没有必要,这使您无法在本地测试您的服务工作者。

加成

你似乎把黄色服务工作栏的红色条混淆了。您的服务工作者只存储index.html,其大小为3.4 kb。红色的其余缓存内存不由服务工作者处理。

示例ServiceWorker.js

此服务工作程序将指定的资源缓存到缓存中,如果提取的资源未在CACHE对象中指定,则它将尝试将条目动态添加到缓存中(以防万一您忘记使用所有最新的服务工作者更新服务工作者内容)。它首先使用缓存,如果不是缓存,则从网络获取并存储在缓存中以供以后访问。

该脚本经过试用和测试,如果您愿意,可以将其用作您自己项目的基础。

'use strict';

// Our current cache version and its contents.
var CACHE = {
    version: 'site-version-number',
    resources: [
        '/index.html', // caches index.html
        '/css/' // caches all the contents inside the /css folder
    ]
};

// Install service worker, adding all our cache entries
this.addEventListener('install', function (event) {
    event.waitUntil(
            caches.open(CACHE.version).then(function (cache) {
        return cache.addAll(CACHE.resources);
    })
            );
});

// Handle a fetch request. If not fetched from cache, attempt to add to cache.
this.addEventListener('fetch', function (event) {
    event.respondWith(
            caches.match(event.request).then(function (resp) {
        return resp || fetch(event.request).then(function (response) {
            return caches.open(CACHE.version).then(function (cache) {
                cache.put(event.request, response.clone()).catch(function (error) {
                    console.log('Could not add to cache!' + error);
                });
                return response;
            }).catch(function (error) {
                console.log('Could not open cache!' + error);
            });
        }).catch(function (error) {
            console.log('Resource not found!' + error);
        });
    }).catch(function (error) {
        console.log('Resource not found in the cache!' + error);
    })
            );
});

// Activate service worker
this.addEventListener('activate', function (event) {
    // Remove all caches that aren't whitelisted
    var cacheWhitelist = [CACHE.version];
    event.waitUntil(
            caches.keys().then(function (keyList) {
        return Promise.all(keyList.map(function (key) {
            if (cacheWhitelist.indexOf(key) === -1) {
                return caches.delete(key);
            }
        }));
    })
            );
});

0
投票

这是因为您在缓存桶中缓存了不透明的响应,这需要过多的cacheStorage。

© www.soinside.com 2019 - 2024. All rights reserved.