PWA之Service work
原文
簡書原文：https://www.jianshu.com/p/84a4553d81a8
大綱
1、Service Workers: PWA 的關鍵
2、理解 Service Workers
3、Service Worker 生命周期
4、Service Worker 基礎示例
1、Service Workers: PWA 的關鍵
正如我之前所提到的，釋放 PWA 力量的關鍵在於 Service Workers 。就其核心來說，Service Workers 只是後臺運行的 worker 腳本。它們是用 JavaScript 編寫的，只需短短幾行代碼，它們便可使開發者能夠攔截網絡請求，處理推送消息並執行許多其他任務。
最棒的一點是，如果用戶的瀏覽器不支持 Service Workers 的話，它們只是簡單地回退，你的網站還作為普通的網站。正是由於這一點，它們被描述為“完美的漸進增強”。漸進增強術語是指你可以先創建能在任何地方運行的體驗，然後為支持更高級功能的設備增強體驗。
2、理解 Service Workers
“將你的網絡請求想象成飛機起飛。Service Worker 是路由請求的空中交通管制員。它可以通過網絡加載，或甚至通過緩存加載。
作為“空中交通管制員”，Service Workers 可以讓你全權控制網站發起的每一個請求，這為許多不同的使用場景開辟了可能性。空中交通管制員可能將飛機重定向到另一個機場，甚至延遲降落，Service Worker 的行為方式也是如此，它可以重定向你的請求，甚至徹底停止。
雖然 Service Workers 是用 JavaScript 編寫的，但需要明白它們與你的標準 JavaScript 文件略有不同，這一點很重要。Service Worker:
運行在它自己的全局腳本上下文中
不綁定到具體的網頁
無法修改網頁中的元素，因為它無法訪問 DOM
只能使用 HTTPS
Service Worker 運行在 worker 上下文中，這意味著它無法訪問 DOM，它與應用的主要 JavaScript 運行在不同的線程上，所以它不會被阻塞。它們被設計成是完全異步的，因此你無法使用諸如同步 XHR 和 localStorage 之類的功能。
在上面的圖中，你可以看到 Service Worker 處於不同的線程，並且可以攔截網絡請求。記住，Service Worker 就像是“空中交通管制員”，它可以讓你全權控制網站中所有進出的網絡請求。這種能力使它們極其強大，並允許你來決定如何響應請求。
3、Service Worker 生命周期
當用戶首次導航至 URL 時，服務器會返回響應的網頁。在下圖中，你可以看到在第1步中，當你調用 register() 函數時， Service Worker 開始下載。在註冊過程中，瀏覽器會下載、解析並執行 Service Worker (第2步)。如果在此步驟中出現任何錯誤，register() 返回的 promise 都會執行 reject 操作，並且 Service Worker 會被廢棄。
一旦 Service Worker 成功執行了，install 事件就會激活 (第3步)。Service Workers 很棒的一點就是它們是基於事件的，這意味著你可以進入這些事件中的任意一個。我們將在本書的第3章中使用這些不同的事件來實現超快速緩存技術。
一旦安裝這步完成，Service Worker 便會激活 (第4步) 並控制在其範圍內的一切。如果生命周期中的所有事件都成功了，Service Worker 便已準備就緒，隨時可以使用了！
對我個人而言，我覺得記住 Service Worker 生命周期最簡單的方法就是把它當成一組交通信號燈。在註冊過程中，Service Worker 處於紅燈狀態，因為它還需要下載和解析。接下來，它處於黃燈狀態，因為它正在執行，還沒有完全準備好。如果上述所有步驟都成功了，你的 Service Worker 在將處於綠燈狀態，隨時可以使用。
需要註意的是，當第一次加載頁面時，Service Worker 還沒有激活，所以它不會處理任何請求。只有當它安裝和激活後，才能控制在其範圍內的一切。這意味著，只有你刷新頁面或者導航到另一個頁面，Service Worker 內的邏輯才會啟動。
4、Service Worker 基礎示例
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>github-page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<!-- un-comment this code to enable service worker -->
<script>
if (‘serviceWorker‘ in navigator) {
navigator.serviceWorker.register(‘service-worker.js‘).then(function(registration) {
// 註冊成功
console.log(‘ServiceWorker registration successful with scope: ‘, registration.scope);
}).catch(function(err) {
// 註冊失敗 :(
console.log(‘ServiceWorker registration failed: ‘, err);
});
}
</script>
</head>
<body>
<h3>sdfsdfsdfdsf</h3>
</body>
</html>
PWA之Service work