Service Worker API · PHP/Python/前端/Linux 等等学习笔记

[TOC] > [参考](https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API/Using_Service_Workers) ## 概述 **作用** * 基于web worker（一个独立于JavaScript主线程的独立线程，在里面执行需要消耗大量资源的操作不会堵塞主线程） * 在web worker的基础上增加了离线缓存的能力 * 本质上充当Web应用程序（服务器）与浏览器之间的代理服务器（可以**拦截全站的请求**，并作出相应的动作->由开发者指定的动作） * 创建有效的离线体验（将一些不常更新的内容缓存在浏览器，提高访问体验） * 由事件驱动的,具有生命周期 * 可以访问cache和indexDB * 支持推送 * 并且可以让开发者自己控制管理缓存的内容以及版本 **注意** - Service Workers 要求必须在 HTTPS 下才能运行。 - 为了便于本地开发，localhost 也被浏览器认为是安全源 **其他使用场景** * 后台数据同步 * 响应来自其它源的资源请求 * 集中接收计算成本高的数据更新，比如地理位置和陀螺仪信息，这样多个页面就可以利用同一组数据 * 在客户端进行CoffeeScript，LESS，CJS/AMD等模块编译和依赖管理（用于开发目的） * 后台服务钩子 * 自定义模板用于特定URL模式 * 性能增强，比如预取用户可能需要的资源，比如相册中的后面数张图片 ## 实例 ### Hello-world <details> <summary>index.html</summary> ``` <body> <p>hello world</p> <script> if ("serviceWorker" in navigator){ window.addEventListener("load",function () { navigator.serviceWorker.register("sw.js",{scope:"./"}) .then((registration)=>{ console.log('ServiceWorker registration successful with scope: ', registration.scope); }).catch(err=>{ console.log('ServiceWorker registration failed: ', err); }) }) } </script> </body> ``` </details> <details> <summary>sw.js</summary> ``` this.addEventListener("install",event=>{ /* 通过这个方法可以防止缓存未完成，就关闭serviceWorker */ event.waitUntil( /* 创建一个名叫V1的缓存版本 */ caches.open("v1").then(cache=>{ /* 指定要缓存的内容，地址为相对于跟域名的访问路径 */ return cache.addAll([ 'index.html' ]) }) ) }) /* 注册fetch事件，拦截全站的请求 */ this.addEventListener("fetch",event=>{ event.respondWith( /* 在缓存中匹配对应请求资源直接返回 */ caches.match(event.request) ) }) this.addEventListener("sync",event=>{ console.log(event); }) ``` </details>