为什么 service-worker 不缓存 js 文件答案

【问题标题】：Why service-worker does not cache js file为什么 service-worker 不缓存 js 文件
【发布时间】：2019-10-13 22:48:24
【问题描述】：

SW 缓存一个图片文件，但不缓存 JS（大小为 0 字节）

/*服务工作者*/ if ('serviceWorker' in navigator) { navigator.serviceWorker .register('service-worker.js', { scope: '/' }) .then（函数（注册）{ console.log("Service Worker 已注册"); }) .catch（函数（错误）{ console.log("Service Worker 注册失败", err); }) }; const CACHE = 'cache-only-v1'; 常量超时 = 400； self.addEventListener('install', (event) => { 事件.waitUntil( caches.open(CACHE).then((cache) => { 返回缓存.addAll([ '/sys/Raycaster/3d.js', '/sys/js/popmotion.global.min.js', '/sys/js/anime.min.js', 'sys/b/bgFeedback.jpg', '/sys/b/ic.svg', '/sys/b/ani/img_ani_1.webp', '/sys/b/ani/img_ani_2.webp', '/sys/b/ani/img_ani_3.webp', '/sys/printProd/p.webp', '/sys/printProd/p2.webp', '/sys/printProd/p3.webp', '/sys/printProd/p4.webp', '/sys/printProd/p5.webp', '/sys/printProd/p6.webp', '/sys/printProd/p7.webp', '/sys/printProd/p8.webp', '/sys/printProd/p9.webp', '/sys/printProd/p10.webp', '/sys/printProd/p11.webp', '/sys/printProd/p12.webp', '/sys/sliderInSlider/01_el.webp', '/sys/sliderInSlider/02_dv.webp', '/sys/sliderInSlider/05_snth.webp', '/sys/sliderInSlider/06_ton.webp', '/sys/sliderInSlider/07_pty.webp', '/sys/sliderInSlider/08_lyu.webp', '/sys/sliderInSlider/09_kar.webp' ]); }) ); });

图片在这里：https://f.usemind.org/img/2019-05-28_143451.jpg

【问题讨论】：

标签： service-worker

【解决方案1】：

chrome DevTools 中显示的信息基于Response Headers，有时，它并不能反映现实。您的 js 文件已被缓存，但它的 Headers 中没有 Content-Lenght。

您可以进行测试：

caches.open(CACHES)
.then( cache => cache.match('/sys/js/popmotion.global.min.js'))
.then( res =>res.text())
.then( js => console.log(js))

此代码将检查您的缓存中是否存在 popmotion.global.min.js，并显示其内容。

【讨论】：

非常感谢！