選單
GSS 技術部落格
在這個園地裡我們將從技術、專案管理、客戶對談面和大家分享我們多年的經驗,希望大家不管是喜歡或是有意見,都可以回饋給我們,讓我們有機會和大家對話並一起成長!
若有任何問題請來信:gss_crm@gss.com.tw
1 分鐘閱讀時間 (149 個字)

PWA - Active event and Fetch event

dem_20210510-072655_1

PWA的生命週期,以下圖顯示:  

頁面讀取時,一開始會先註冊 service worker,然後執行Installing事件。Installing事件時間點,可以將初始設定必要的資源項目進行暫存。先設定要暫存版本的名稱 "Cache-V1",與要初始暫存的項目,如下所示:  

可以透過開發工具,點選Application頁籤,於左方點選 Cache Storage,可以看見將CacheContent內的項目暫存起來。如下:  

 evt.waitUntil 此方法告訴瀏覽器,事件一直進行,直至 promise 解決前瀏覽器不應該在事件的非同步操作完成前終止服務工作的進行。

接下來是Activated事件。此事件執行時間點可以用來決定什麼版本的Cache Key才是需要暫存,或者那些版本的內容才需要暫存的控制。這邊會再以新版本的代號Cache-v2 來做判斷,如果Cache Key不是這個新版本就將此暫存刪掉,也就是只保留Cache-v2的暫存。當然這邊純粹是為了做簡單清楚的展示,一般是不會將剛剛Installing事件所暫存的內容刪除。

判斷不是新版本的Cache Key就要刪掉的程式如下:

果然將Cache Key不是Cache-v2的Cache-v1刪掉了:  

接下來是最重要的事件,Fetch事件。這個事件時間點可以做的事情是,依照條件來決定要不要額外將所發的request內容暫存起來。先看程式:  

一開始會以caches.match(evt.request) 來判斷是否所發的request已經被暫存起來了,如果有的話promise可以直接回傳此內容到頁面,如果沒有promise會先回傳 undefined,然後交給 fetch 此 API 來做判斷是否要進一步暫存起來。

Fetch此API會判斷除了install有關的內容不能被暫存,其它內容都可以暫存起來。因為install安裝相關如果被暫存起來,之後如果版本更換使用者都無法有動作,除非手動去刪除install相關的暫存。所以這邊會排除install相關的內容: 

 這邊會將request的內容再存到site-dynamic-v1這個cache key內。

以上是Service Worker在生命週期中的事件與用法展示。

Ansible #13 - Ad-Hoc 指令[Windows篇]
使用pychord處理你的和弦資料

相關文章

 

評論

尚無評論
已經注冊了? 這裡登入
Guest
2024/05/02, 週四

Captcha 圖像