标签: cachestorage
当我尝试缓存xxx.worker.js时,服务工作者将无法安装
我的Vue应用程序中有以下服务工作者代码:
main.js
if (navigator.serviceWorker) {
navigator.serviceWorker.register('/service-worker.js').catch(function() {
console.log('Service worker registration failed.');
});
}
服务worker.js
let currCacheName = 'premium-poker-tools-5';
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(currCacheName).then(function(cache) {
let promise = cache.addAll([
'/',
'app.js',
'c7d016677eb7e912bc40.worker.js',
'f328c7e2b379df12fa4c.worker.js',
'static/logo.png',
'static/favicon.png',
'static/loading.svg',
'static/cards/ace-of-clubs.png',
'static/cards/king-of-clubs.png',
'static/cards/queen-of-clubs.png',
'static/cards/jack-of-clubs.png',
'static/cards/ten-of-clubs.png',
'static/cards/nine-of-clubs.png',
'static/cards/eight-of-clubs.png',
'static/cards/seven-of-clubs.png',
'static/cards/six-of-clubs.png',
'static/cards/five-of-clubs.png',
'static/cards/four-of-clubs.png',
'static/cards/three-of-clubs.png',
'static/cards/two-of-clubs.png',
'static/cards/ace-of-spades.png',
'static/cards/king-of-spades.png',
'static/cards/queen-of-spades.png',
'static/cards/jack-of-spades.png',
'static/cards/ten-of-spades.png',
'static/cards/nine-of-spades.png',
'static/cards/eight-of-spades.png',
'static/cards/seven-of-spades.png',
'static/cards/six-of-spades.png',
'static/cards/five-of-spades.png',
'static/cards/four-of-spades.png',
'static/cards/three-of-spades.png',
'static/cards/two-of-spades.png',
'static/cards/ace-of-hearts.png',
'static/cards/king-of-hearts.png',
'static/cards/queen-of-hearts.png',
'static/cards/jack-of-hearts.png',
'static/cards/ten-of-hearts.png',
'static/cards/nine-of-hearts.png',
'static/cards/eight-of-hearts.png',
'static/cards/seven-of-hearts.png',
'static/cards/six-of-hearts.png',
'static/cards/five-of-hearts.png',
'static/cards/four-of-hearts.png',
'static/cards/three-of-hearts.png',
'static/cards/two-of-hearts.png',
'static/cards/ace-of-diamonds.png',
'static/cards/king-of-diamonds.png',
'static/cards/queen-of-diamonds.png',
'static/cards/jack-of-diamonds.png',
'static/cards/ten-of-diamonds.png',
'static/cards/nine-of-diamonds.png', …javascript web-worker service-worker cachestorage worker-loader
推荐指数
解决办法
查看次数
Chrome显示高缓存存储空间
我一直在分析复杂应用程序的缓存存储使用情况,当我意识到存储的图像或具有特定内容长度的脚本N实际上占用5N-10N了缓存存储空间.
考虑这个示例:我通过服务工作者从OpenStreetMap请求图像并将其存储在缓存中.缓存中只存储一个图像.Chrome版本是最新版本(版本65.0.3325.146(官方版本)(64位)).
这是刷新后缓存存储的视图:
这是清除缓存选项卡的视图:
因此,问题在于具有6.4KB实际占用13.8MB高速缓存存储大小的图像.我错过了什么吗？
实例可以在https://googlechrome.github.io/samples/service-worker/basic/上看到- 少于10KB几乎占用50KB缓存存储的脚本.
因此,问题是:当文件通过服务工作者缓存时,它们占用的空间会显着增加？我同意实际请求的权重大于实际响应,但不是10倍.
可能有用的链接:
推荐指数
解决办法
查看次数
window.caches 在 Android Chrome 中未定义，但在桌面 Chrome 中可用
我对 Caches API 在移动设备上的可用性感到有些困惑。
https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage
文档说明此 API 在服务工作线程范围和窗口范围内均可用。
我可以在桌面的 Chrome 上清楚地访问它，没有问题。
现在，每当我在 Android 的 Chrome 上进行功能检测时，我都会变得未定义，就好像功能不可用一样。
我试图通过这种方式检测：
if ('caches' in window)...
if ('caches' in self)...
通过连接的设备等从控制台日志调用
我想念什么？
PS：我知道 Safari 有非常基本的实现，所以我预计 Safari 会出错，但在这里我正在 Android 上使用 Chrome 对其进行测试；/
推荐指数
解决办法
查看次数
Service Worker 创建的缓存存储在下线刷新页面后消失
我正在尝试为我的网络应用程序实现离线功能，但离线时我遇到了一些奇怪的行为，这可能是我所缺少的，因为它在 Chrome 和 Firefox 中都可以重现。
我将在下面描述我创建的示例应用程序的功能：
重现步骤
- 打开一个新的 Chrome 选项卡并打开控制台视图。
- 导航到示例应用程序（托管在 Netlify 上）。
- 观察日志消息，确认 Service Worker 的安装和激活，以及应用程序缓存存储的创建和填充。
- 转到开发人员工具中的应用程序选项卡并确认已创建并填充缓存
- 在“Service Worker”下启用“离线”以使网络不可用。
- 或者，只需关闭您的 wifi/网络。
- 刷新页面。
观察到的行为
MyCache之前由 Service Worker 创建的缓存存储消失了。
预期行为
- 页面无法按预期加载，但刷新后缓存存储应保持可用，以便应用程序可以在离线时使用它来提供内容。
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vanishing cache storage test</title>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then((registration) => {
console.log('Service worker registered sucessfully:', registration);
})
.catch((error) => {
console.error('Failed to register service worker:', error.stack); …推荐指数
解决办法
查看次数