抓了開源專案 MiniBlog.Core 回來玩,想在其中套用 Form target 模擬 AJAX 表單傳送技巧時踢到鐵板,開啟 F12 偵錯工具後驚呼:天吶,這世界又變了!

新時代的 Postback 不再是單純送出一個 Request 拿回 HTTP 200,而是像這樣子:

如上圖,表單送出行為被拆成三個動作,並出現關鍵字 ServiceWorker。

另外,我發現 js、css 也變成由 ServiceWorker 載入。

爬文得知原來是專案引用了 WebEssentials.AspNetCore.PWA 套件(參考:Introduction to PWA in ASP.NET Core Application – Beginner's Guide to Mobile Web Development ),MiniBlog.Core 恰巧就是 WebEssentials 作者的大作,吃自己的狗食是一定要滴。

事到如今,只好花點時間了解什麼是 PWA - Progress Web Application。

以下是我參考的資料:

歸納重點如下:

  1. PWA 是 Google 2015 提出的概念,希望讓 Web Application 可以在各種網路狀況、不同手機 OS 下均能順利運作,並可被安裝到桌面、離線使用、支援推播... 等。
  2. 設計要點:
    * Progress - 漸進式,運行環境支援度愈高提供的服務愈多,在簡陋環境亦可優雅降級提供基本功能。
    * Responsivve - RWD,自動適應各種螢幕尺寸
    * App-like - 模仿 Native App 風格及資料更新方式(Service Worker、快取)
    * Fresh – 使用 Service Worker API 自動更新(不依賴App Store/Google Play)
    * Safe – 全面 HTTPS
    * Discoverable - 透過 manifest 進行 SEO
    * Re-engageable - 透過推播與使用者互動
    * Installable – 可 Add To Home 將 Web App 裝到手機桌面,並可列於應用程式清單,不需(也不能)經由 App 商店下載。
    * Linkable - 可透過 URL 分享
  3. Service Worker 是 PWA 可以離線使用的關鍵,Service Worker 在瀏覽器背後運行,有自己的生命週期,與網頁獨立。
  4. SPA 存在首次載入過慢、JS 過大及不利 SEO 優化等問題,PWA 則可克服這些問題。
  5. PWA 將不常變動內容(App Shell)與動態內容(Content)分開,AppShell 下載後將 Content 透過 Service Worker 儲存在本地資料庫作為 Cache,即使網路中斷仍可繼續使用。而使用者進入網頁後馬上看到完整 Shell,之後再填入內容,相較於畫面空白一陣子再一次顯示,即使等待時間相近,也會有效降低使用者的煩躁感。
  6. PWA 講的是整個網站的設計哲學,網站當然不可能加一個 NuGet 套件就變 PWA。WebEssentials.AspNetCore.PWA 套件主要提供:強制轉 HTTPS、Web App Manifest(讓網站可被加成手機桌面 App)、Service Worker JS 等三項功能。
  7. Service Worker 在 localhost 以外的網站限定 HTTPS 才能啟用,啟用後會接管原本的 JS/CSS/Form 等 HTTP Request 傳送。 目前除了 IE 全系列、iOS 11.2-(含)、Opera Mini 外,主流瀏覽器都已支援(參考:Can I use Service Worker... Support tables for HTML5, CSS3, etc)。
  8. 使用 Chrome F12 可以查看 Serivce Worker 啟用狀態:


    實測 Unregister Service Worker 後重整網頁,JS/CSS 等即恢後使用傳統方式接收。(網頁載入後會再次 Register)
  9. 一般要使用 Service Worker,需攔截 install, activate, fetch 等事件加入處理邏輯,WebEssentials.AspNetCore.PWA 透過 ServiceWorkerTagHelperComponent 在 <body> 尾端注入 <script>'serviceWorker'in navigator&&navigator.serviceWorker.register('/serviceworker')</script> 加載 /serviceworker,其中已實作好 Service Worker 相關事件:

又見識了新東西,呼~ (到底還有多少新東西要學呢?)

Introduce to Progress Web Application.


Comments

Be the first to post a comment

Post a comment