PWA初探

1、背景

從2018年到如今，做爲號稱下一代web應用模型的PWA，逐漸成爲一個各大前端廠商爭先涉足，佈局的一個新的技術。

PWA是小程序的「老祖宗」？  PWA例子：微博、餓了麼

2、什麼是PWA

　　PWA是Progressive Web App的英文縮寫，就是漸進式加強web應用。是Google在2016年提出的概念。目的就是在移動端利用提供的標準化框架，在網頁應用中實現和原生應用相近的用戶體驗的漸進式網頁應用。

　　引薦他人的理解：

　　（1）通常寫web應用，在pc上是沒有緩存的，打開頁面時去請求數據。沒法離線使用

　　（2）web應用沒有像app同樣的小圖標放在桌面，一點開就進入了應用；而是經過打開瀏覽器輸入網址，移動端須要藉助瀏覽器入口；

　　（3）不能像app同樣給用戶推送消息，像微博會跟你推送說誰評論了你的微博之類的功能。

 

而Google推出的PWA，就是具備這些特色，是咱們的web應用，可以像一款app同樣使用。而且對比app，他不用複雜的安裝，也不用下載更新包，刷新頁面就能夠了。

 

　　玩PWA，操做上能夠理解成「將網頁書籤添加到手機屏幕」這樣一個過程。

　　先訪問微博的pwa網址：https://m.weibo.cn/beta?pwa=1。

       

 

3、核心功能

　　PWA並非單指某一項技術，能夠理解爲一種思想和概念，目的就是對比原生app，將web網站經過一系列的web技術去優化它，提高其安全性，性能，流暢性，用戶體驗等各方面指標，最後達到用戶就像在用app同樣的感受。

　　核心功能：

　　（1）Web App Manifest

　　（2）Service Worker：用戶離線時，能夠從緩存中啓動web應用

　　（3）Cache API緩存

　　（4）Push&Notification推送與通知

 

4、特色

（1）可靠性————即便在不肯定的網絡條件下也不會受影響。

　　當用戶從主屏幕啓動時，service work能夠當即加載漸進式Web應用程序，徹底不受網絡環境的影響。service work就像一個客戶端代理，它控制緩存以及如何響應資源請求邏輯，經過預緩存關鍵資源，能夠消除對網絡的依賴，確保爲用戶提供即時可靠的體驗。

（2）快速

　　據統計，若是站點加載時間超過 3s，53% 的用戶會放棄等待。頁面展示以後，用戶指望有平滑的體驗，過渡動畫和快速響應。

（3）沉浸式體驗————感受就像是設備上的原生應用程序，具備沉浸式的用戶體驗。

　　漸進式Web應用程序能夠安裝並在用戶的主屏幕上，無需從應用程序商店下載安裝。他們提供了一個沉浸式的全屏幕體驗，甚至能夠從新與用戶接觸的Web推送通知。

 

　　Web應用程序中，能夠經過manifest.json控制應用程序的顯示方式和啓動方式，指定主屏幕圖標、啓動應用程序時要加載的頁面、屏幕方向，甚至能夠指定是否顯示瀏覽器Chrome。

 

5、優點

（1）無需安裝、無需下載，只要你輸入網址訪問一次，而後將其添加到設備桌面就能夠繼續使用了。

（2）發佈不須要提交到app商店審覈。

（3）更新迭代版本不須要審覈，不須要從新發布審覈。

（4）現有的web網頁都可以經過改進稱爲PWA，能很快轉型，上線，實現業務、獲取流量。

（5）不須要開發Android和IOS兩套不一樣的版本。

6、劣勢

（1）瀏覽器對技術的支持還不夠全面，不是每款瀏覽器都能100%的支持全部PWA。

（2）PWA如今尚未那麼火。

 

 PWA對於開發者來講，最重要的意義就在於繞過APP商店的審覈直接推給用戶。若是普及，這將威脅到平臺權威，APP商店確定不幹。

 

 

 

SPA單頁應用

　　定義：單頁應用（SPA）將全部的活動侷限於一個web頁面中，僅在該Web頁面初始化時加載相應的HTML、Javascript、CSS。一旦頁面加載完成了，SPA不會由於用戶的操做而進行頁面的從新加載或跳轉。取而代之的是利用js動態的變換HTML的內容，從而實現UI與用戶的交互。因爲避免了頁面的從新加載，SPA能夠提供較爲流暢的用戶體驗。

 

優勢：

（1）因爲避免了頁面的從新加載，SPA能夠提供較爲流暢的用戶體驗。得益於Ajax，能夠實現無跳轉刷新。因爲與瀏覽器的hsitory機制，可使用hash的變化從而推進界面的變化。

（2）先後端分離

（3）減輕服務器壓力

 

缺點：

（1）不容易管理，且不安全

（2）由於沒了一頁頁地網頁給搜索引擎的爬蟲來抓取，因此在搜索引擎優化上須要花費額外的功夫。