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>