若有任何問題請來信：gss_crm@gss.com.tw
使用情境
客戶需要ㄧ個全省各處都可以離線使用的系統。
這時候需要考慮的點包括:
1.如何從無到有安裝。
2.系統新版本上線如何更新。
3.離線系統怎麼保存資料。
所以經由討論決定使用PWA的框架，並搭配 IndexDB 來做資料的暫存。
開發工具
- Visual Studio Code
程式語言
- HTML
- CSS、CSS3、Bootstrap
- Javascript、jQuery
PWA簡介
PWA 的全名為 Progressive Web Apps ，有以下特徵:
- 其應用程式可以由 JS、HTML 與 CSS 來組成。
- 可以被安裝到 mobile 系統上
- 可以離線使用
- 可以使用網頁推播通知
PWA 的核心為 service worker ， 使用其 API 會類似 promise 般的方式。而再深入主要以 Fetch event 與 Cache API 為重點。 可以這麼形容此二 :
藉由頁面發request事件來把其它頁面cache住。
下圖可以描述 service worker 如何進行:
當應用程式開始發網頁需求，會透過 service worker判斷是否有網路連線，如果有網路連線則重新由伺服器要網頁資源(然後可依照條件暫存此資源)；而如果網路是斷線的狀況，則會由之前所暫存的資源集中擷取，回應給應用程式。
每個框架都有它的生命週期，PWA也有，會以 event 的方式讓程式開發者於每塊撰寫對應的邏輯功能，如下圖:
一開始會註冊 service worker，然後執行 Installing 的事件。Installing 這個事件時間點，可以將初始設定必要的資源項目進行暫存。 之後是 Activated 事件，可以於此時間點檢查資源版本，過濾掉不需要暫存的資源。
而最為重要的事件為 Fetch ，這邊可以將符合條件的資源自動暫存起來，供之後離線使用。
所以三個時間點用途歸納如下:
- Installing: 初始化事先設定好的項目進行Cache。
- Activated: 判斷版本決定是否要調整初始化時Cache過的資源。
- Fetch: 依據每個頁面功能自動將資源依照符合的條件Cache起來。
開始進行專案實務開發，這邊示範的專案結構為:
頁面所呈現如下圖:
之後會繼續介紹 安裝頁面展示、 service worker 註冊、事件暫存資源、IndexDB使用等範例。