1. 程式人生 > >tms web core pwa讓你的WEB APP離線可用

tms web core pwa讓你的WEB APP離線可用

work 英雄 本機 app lin 快速 運行 正常的 離線

tms web core pwa讓你的WEB APP離線可用

tms web core允許創建漸進式Web應用程序(PWA)。漸進式Web應用程序是為適應在線/離線情況,各種設備類型,最重要的是,讓自己安裝類似的到桌面上的本機應用程序,然後從桌面圖標啟動。

離線只是它的一種功能表現而已,具體說來,它可以:

  • 讓我們的Web App在無網(offline)情況下可以訪問,甚至使用部分功能,而不是展示“無網絡連接”的錯誤頁;
  • 讓我們在弱網的情況下,能使用緩存快速訪問我們的應用,提升體驗;
  • 在正常的網絡情況下,也可以通過各種自發控制的緩存方式來節省部分請求帶寬;
  • ……

而這一切,其實都要歸功於PWA背後的英雄 —— Service Worker

那麽,Service Worker是什麽呢?你可以把Service Worker簡單理解為一個獨立於前端頁面,在後臺運行的進程。因此,它不會阻塞瀏覽器腳本的運行,同時也無法直接訪問瀏覽器相關的API(例如:DOM、localStorage等)。此外,即使在離開你的Web App,甚至是關閉瀏覽器後,它仍然可以運行。它就像是一個在Web應用背後默默工作的勤勞小蜜蜂,處理著緩存、推送、通知與同步等工作。所以,要學習PWA,繞不開的就是Service Worker。

首先,我們想一下,當訪問一個web網站時,我們實際上做了什麽呢?總體上來說,我們通過與與服務器建立連接,獲取資源,然後獲取到的部分資源還會去請求新的資源(例如html中使用的css、js等)。所以,粗粒度來說,我們訪問一個網站,就是在獲取/訪問這些資源。

可想而知,當處於離線或弱網環境時,我們無法有效訪問這些資源,這就是制約我們的關鍵因素。因此,一個最直觀的思路就是:如果我們把這些資源緩存起來,在某些情況下,將網絡請求變為本地訪問,這樣是否能解決這一問題?是的。但這就需要我們有一個本地的cache,可以靈活地將各類資源進行本地存取。

tms web core pwa讓你的WEB APP離線可用