PWA初探
一、背景
從2018年到現在，作為號稱下一代web應用模型的PWA，逐漸成為一個各大前端廠商爭先涉足，布局的一個新的技術。
PWA是小程序的“老祖宗”？? PWA例子：微博、餓了么
二、什么是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。
? ? ? ?
?
三、核心功能
PWA并不是單指某一項技術，可以理解為一種思想和概念，目的就是對比原生app，將web網站通過一系列的web技術去優化它，提升其安全性，性能，流暢性，用戶體驗等各方面指標，最后達到用戶就像在用app一樣的感覺。
核心功能：
（1）Web App Manifest
（2）Service Worker：用戶離線時，可以從緩存中啟動web應用
（3）Cache API緩存
（4）Push&Notification推送與通知
?
四、特點
（1）可靠性————即使在不確定的網絡條件下也不會受影響。
當用戶從主屏幕啟動時，service work可以立即加載漸進式Web應用程序，完全不受網絡環境的影響。service work就像一個客戶端代理，它控制緩存以及如何響應資源請求邏輯，通過預緩存關鍵資源，可以消除對網絡的依賴，確保為用戶提供即時可靠的體驗。
（2）快速
據統計，如果站點加載時間超過 3s，53% 的用戶會放棄等待。頁面展現之后，用戶期望有平滑的體驗，過渡動畫和快速響應。
（3）沉浸式體驗————感覺就像是設備上的原生應用程序，具有沉浸式的用戶體驗。
漸進式Web應用程序可以安裝并在用戶的主屏幕上，無需從應用程序商店下載安裝。他們提供了一個沉浸式的全屏幕體驗，甚至可以重新與用戶接觸的Web推送通知。
?
Web應用程序中，可以通過manifest.json控制應用程序的顯示方式和啟動方式，指定主屏幕圖標、啟動應用程序時要加載的頁面、屏幕方向，甚至可以指定是否顯示瀏覽器Chrome。
?
五、優勢
（1）無需安裝、無需下載，只要你輸入網址訪問一次，然后將其添加到設備桌面就可以繼續使用了。
（2）發布不需要提交到app商店審核。
（3）更新迭代版本不需要審核，不需要重新發布審核。
（4）現有的web網頁都能夠通過改進稱為PWA，能很快轉型，上線，實現業務、獲取流量。
（5）不需要開發Android和IOS兩套不同的版本。
六、劣勢
（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）因為沒了一頁頁地網頁給搜索引擎的爬蟲來抓取，所以在搜索引擎優化上需要花費額外的功夫。
?
轉載于:https://www.cnblogs.com/xiaoan0705/p/11298899.html
總結
- 上一篇： Vue.js 技术揭秘学习 （3） re
- 下一篇： 理解Promise (1)