iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 14
1
Modern Web

30 天 Progressive Web App 學習筆記系列 第 14

Day 14 - 30 天 Progressive Web App 學習筆記 - 實作 Registering the Service Worker

之前的文章裡有介紹 Service Worker 的觀念,今天要進行 Service Worker 的第一步:透過簡單的範例來註冊 Service Worker。

建立 sw.js

首先我們在根目錄建立 Service Worker 的檔案,名稱可以自己訂,範例裡是取名為 sw.js,Service Worker 成功運作之後,會去執行 Service Worker Lifecycle,針對 Lifecycle、我們要監聽 3 個事件,分別是 install、activate、fetch。

圖片來源:The Service Worker Lifecycle

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!');
});

註冊 Service Worker

  • 註冊 sw.js 到 navigator.serviceWorker
  • 確認 console 有印出成功註冊的文字以及 service worker 的 log

透過 '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>

確認 console 有印出成功註冊的文字以及 service worker 的 log

接著執行 http-server ,開啟瀏覽器觀察 console 一開始會進入 install 接著印出 完成 SW 設定!,代表我們註冊成功了唷 :D


今日小結

本篇說明如何建立簡單的 Service Worker 檔案並使用 JavaScript 註冊 Service Worker。


參考文件


本人小小筆記,如有錯誤或需要改進的部分,歡迎給予回饋。
我將會用最快的速度修正,m(_ _)m。謝謝

上一篇
Day 13 - 30 天 Progressive Web App 學習筆記 - 環境建置 ( json-server、http-server 、concurrently )
下一篇
Day 15 - 30 天 Progressive Web App 學習筆記 - Service Worker - Setting up the Default Cache
系列文
30 天 Progressive Web App 學習筆記30

尚未有邦友留言

立即登入留言