HTML Service Worker

学习离线缓存 · 难度：高级 · +15XP

HTML Service Worker 离线缓存

Service Worker是浏览器后台脚本，实现离线访问和推送通知。

注册

if("serviceWorker"in navigator){
  navigator.serviceWorker.register("/sw.js").then(r=>console.log("OK"));
}

sw.js核心

self.addEventListener("install",e=>{/*预缓存*/});
self.addEventListener("fetch",e=>{e.respondWith(caches.match(e.request).then(r=>r||fetch(e.request)))});

生命周期

install → activate → idle → fetch/message → terminated

???? 练习

1. 注册Service Worker
2. 实现基础离线缓存

学习与实践建议

1. 先理解本节的核心概念和语法规则
2. 在右边编辑器中修改示例代码，观察运行结果变化
3. 尝试用学到的知识完成一个小练习——比如自己写一个工具函数或小程序
4. 遇到问题时，查阅官方文档是最快的学习途径

编程是门实践技能，动手写代码比看教程重要得多。坚持每天练习，你会很快看到进步！