PWA 的核心是 Service Work,頁面必須先透過javascript註冊。而註冊需要瀏覽器資訊相關的navigator 物件中找出 serviceWorker屬性來達成。所以需要判斷瀏覽器是否支援Service Work,才可繼續進行註冊的動作。
展示的專案結構如下:
首先於 sw.js 中,準備好 service work 會於 Life Cycle 中所觸發的事件:
接著 navigator.serviceWorker.register 來進行註冊:
navigator.serviceWorker.register 會回傳一個 promise,於回傳後顯示是否註冊完成。
於開發者工具,點選Application頁籤,於左方點選 Service Workers,會顯示註冊內容與service work 目前狀態;下方也可看到程式於 promise 回傳成功訊息 "service worker registered" 。
在這輸入文本 我們可以改寫 promise 回傳內容,去讀取 scope :
其執行結果為: