id="如何测试和调试-service-worker-的功能">如何测试和调试

Service

https://...

或

http://localhost:xxxx

http://127.0.0.1:5000），而不是直接加载本地文件路径。

class="language-html"><script>if

('serviceWorker'

{window.addEventListener('load',

function

{navigator.serviceWorker.register('./sw.js').then(function

(registration)

registration.scope);}).catch(function

(error)

id="2-在浏览器里调试-service-worker推荐用-chromeedge">2.

在浏览器里调试

打开你的站点，例如：http://localhost:5000/。

打开开发者工具：

id="22-强制更新重新加载-service-worker">2.2

强制更新/重新加载

Unregister：注销当前

SW；

id="3-测试缓存是否生效静态资源-cache-first">3.

cache-first）

class="language-javascript">self.addEventListener('install',

(event)

Install');event.waitUntil(caches.open(CACHE_NAME).then((cache)

=>

cache.addAll(PRECACHE_URLS);}));self.skipWaiting();

});

index.html、index.js、index.css

class="language-javascript">self.addEventListener('fetch',

(event)

URL(request.url);console.log('[SW]

Fetch:',

./index.html；

其他类型：返回

网络不可用，且本资源未被缓存。

PRECACHE_URLS），然后离线访问它，看是否走兜底逻辑。

densenapp-static-v1；

URL：

./index.html

./index.js

等等（来自你

和浏览器自带缓存搞混

进行许可。

欢迎转载、使用、重新发布，但务必保留文章署名AlexChow（包含链接：

），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。

如有任何疑问，请与我联系

AlexChow，转载请注明原文链接：https://www.cnblogs.com/densen2014/p/19623465

src="https://img2023.cnblogs.com/blog/1980213/202302/1980213-20230201233143321-1727894703.png"

alt="image"

class="post-meta-container">