PWA初探
一、背景
從2018年到現(xiàn)在，作為號(hào)稱下一代web應(yīng)用模型的PWA，逐漸成為一個(gè)各大前端廠商爭先涉足，布局的一個(gè)新的技術(shù)。
PWA是小程序的“老祖宗”？? PWA例子：微博、餓了么
二、什么是PWA
PWA是Progressive Web App的英文縮寫，就是漸進(jìn)式增強(qiáng)web應(yīng)用。是Google在2016年提出的概念。目的就是在移動(dòng)端利用提供的標(biāo)準(zhǔn)化框架，在網(wǎng)頁應(yīng)用中實(shí)現(xiàn)和原生應(yīng)用相近的用戶體驗(yàn)的漸進(jìn)式網(wǎng)頁應(yīng)用。
引薦他人的理解：
（1）一般寫web應(yīng)用，在pc上是沒有緩存的，打開頁面時(shí)去請(qǐng)求數(shù)據(jù)。無法離線使用
（2）web應(yīng)用沒有像app一樣的小圖標(biāo)放在桌面，一點(diǎn)開就進(jìn)入了應(yīng)用；而是通過打開瀏覽器輸入網(wǎng)址，移動(dòng)端需要借助瀏覽器入口；
（3）不能像app一樣給用戶推送消息，像微博會(huì)跟你推送說誰評(píng)論了你的微博之類的功能。
?
而Google推出的PWA，就是具有這些特點(diǎn)，是我們的web應(yīng)用，能夠像一款app一樣使用。并且對(duì)比app，他不用復(fù)雜的安裝，也不用下載更新包，刷新頁面就可以了。
?
玩PWA，操作上可以理解成“將網(wǎng)頁書簽添加到手機(jī)屏幕”這樣一個(gè)過程。
先訪問微博的pwa網(wǎng)址：https://m.weibo.cn/beta?pwa=1。
? ? ? ?
?
三、核心功能
PWA并不是單指某一項(xiàng)技術(shù)，可以理解為一種思想和概念，目的就是對(duì)比原生app，將web網(wǎng)站通過一系列的web技術(shù)去優(yōu)化它，提升其安全性，性能，流暢性，用戶體驗(yàn)等各方面指標(biāo)，最后達(dá)到用戶就像在用app一樣的感覺。
核心功能：
（1）Web App Manifest
（2）Service Worker：用戶離線時(shí)，可以從緩存中啟動(dòng)web應(yīng)用
（3）Cache API緩存
（4）Push&Notification推送與通知
?
四、特點(diǎn)
（1）可靠性————即使在不確定的網(wǎng)絡(luò)條件下也不會(huì)受影響。
當(dāng)用戶從主屏幕啟動(dòng)時(shí)，service work可以立即加載漸進(jìn)式Web應(yīng)用程序，完全不受網(wǎng)絡(luò)環(huán)境的影響。service work就像一個(gè)客戶端代理，它控制緩存以及如何響應(yīng)資源請(qǐng)求邏輯，通過預(yù)緩存關(guān)鍵資源，可以消除對(duì)網(wǎng)絡(luò)的依賴，確保為用戶提供即時(shí)可靠的體驗(yàn)。
（2）快速
據(jù)統(tǒng)計(jì)，如果站點(diǎn)加載時(shí)間超過 3s，53% 的用戶會(huì)放棄等待。頁面展現(xiàn)之后，用戶期望有平滑的體驗(yàn)，過渡動(dòng)畫和快速響應(yīng)。
（3）沉浸式體驗(yàn)————感覺就像是設(shè)備上的原生應(yīng)用程序，具有沉浸式的用戶體驗(yàn)。
漸進(jìn)式Web應(yīng)用程序可以安裝并在用戶的主屏幕上，無需從應(yīng)用程序商店下載安裝。他們提供了一個(gè)沉浸式的全屏幕體驗(yàn)，甚至可以重新與用戶接觸的Web推送通知。
?
Web應(yīng)用程序中，可以通過manifest.json控制應(yīng)用程序的顯示方式和啟動(dòng)方式，指定主屏幕圖標(biāo)、啟動(dòng)應(yīng)用程序時(shí)要加載的頁面、屏幕方向，甚至可以指定是否顯示瀏覽器Chrome。
?
五、優(yōu)勢(shì)
（1）無需安裝、無需下載，只要你輸入網(wǎng)址訪問一次，然后將其添加到設(shè)備桌面就可以繼續(xù)使用了。
（2）發(fā)布不需要提交到app商店審核。
（3）更新迭代版本不需要審核，不需要重新發(fā)布審核。
（4）現(xiàn)有的web網(wǎng)頁都能夠通過改進(jìn)稱為PWA，能很快轉(zhuǎn)型，上線，實(shí)現(xiàn)業(yè)務(wù)、獲取流量。
（5）不需要開發(fā)Android和IOS兩套不同的版本。
六、劣勢(shì)
（1）瀏覽器對(duì)技術(shù)的支持還不夠全面，不是每款瀏覽器都能100%的支持所有PWA。
（2）PWA現(xiàn)在還沒有那么火。
?
?PWA對(duì)于開發(fā)者來說，最重要的意義就在于繞過APP商店的審核直接推給用戶。如果普及，這將威脅到平臺(tái)權(quán)威，APP商店肯定不干。
?
?
?
SPA單頁應(yīng)用
定義：單頁應(yīng)用（SPA）將所有的活動(dòng)局限于一個(gè)web頁面中，僅在該Web頁面初始化時(shí)加載相應(yīng)的HTML、Javascript、CSS。一旦頁面加載完成了，SPA不會(huì)因?yàn)橛脩舻牟僮鞫M(jìn)行頁面的重新加載或跳轉(zhuǎn)。取而代之的是利用js動(dòng)態(tài)的變換HTML的內(nèi)容，從而實(shí)現(xiàn)UI與用戶的交互。由于避免了頁面的重新加載，SPA可以提供較為流暢的用戶體驗(yàn)。
?
優(yōu)點(diǎn)：
（1）由于避免了頁面的重新加載，SPA可以提供較為流暢的用戶體驗(yàn)。得益于Ajax，可以實(shí)現(xiàn)無跳轉(zhuǎn)刷新。由于與瀏覽器的hsitory機(jī)制，可以使用hash的變化從而推動(dòng)界面的變化。
（2）前后端分離
（3）減輕服務(wù)器壓力
?
缺點(diǎn)：
（1）不容易管理，且不安全
（2）因?yàn)闆]了一頁頁地網(wǎng)頁給搜索引擎的爬蟲來抓取，所以在搜索引擎優(yōu)化上需要花費(fèi)額外的功夫。
?
轉(zhuǎn)載于:https://www.cnblogs.com/xiaoan0705/p/11298899.html
總結(jié)
- 上一篇： Vue.js 技术揭秘学习 （3） re
- 下一篇： 理解Promise (1)