之前的文章裡有介紹 Service Worker 的觀念，今天要進行 Service Worker 的第一步：透過簡單的範例來註冊 Service Worker。
首先我們在根目錄建立 Service Worker 的檔案，名稱可以自己訂，範例裡是取名為 sw.js，Service Worker 成功運作之後，會去執行 Service Worker Lifecycle，針對 Lifecycle、我們要監聽 3 個事件，分別是 install、activate、fetch。
Udacity 也有針對 The Service Worker Lifecycle 介紹：
https://www.youtube.com/watch?v=TF4AB75PyIc
接下來實作簡單的 Service Worker 程式碼，新增 3 個監聽事件為 install、activate、fetch 並分別印出文字，對應程式碼如下：
// install
self.addEventListener('install', event => {
console.log('installing…');
});
// activate
self.addEventListener('activate', event => {
console.log('now ready to handle fetches!');
});
// fetch
self.addEventListener('fetch', event => {
console.log('now fetch!');
});
navigator.serviceWorker
透過 'serviceWorker' in navigator 去判斷瀏覽器是否有支援 Service Worker，如果有支援、則使用 serviceWorker.register 方法傳入 Service Worker 檔案（sw.js）並進行註冊。
.then(reg => console.log('SW registered!', reg)) 代表註冊成功後則印出成功註冊的文字以及 service worker 的 log。
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('SW registered!', reg))
.catch(err => console.log('Error!', err));
}
</script>
完整 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PWA Demo</title>
</head>
<body>
<p> \{^_^}/ hi! This's PWA Demo. </p>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('完成 SW 設定!', reg))
.catch(err => console.log('Error!', err));
}
</script>
</body>
</html>
接著執行 http-server ，開啟瀏覽器觀察 console 一開始會進入 install 接著印出 完成 SW 設定!，代表我們註冊成功了唷 :D
本篇說明如何建立簡單的 Service Worker 檔案並使用 JavaScript 註冊 Service Worker。
本人小小筆記，如有錯誤或需要改進的部分，歡迎給予回饋。
我將會用最快的速度修正，m(_ _)m。謝謝
iThome鐵人賽
看影片追技術