PWA介绍及快速上手搭建一个PWA应用
PWA初次體驗(yàn)
? 前言：本示例不用安裝任何東西
部分資源來自網(wǎng)絡(luò)資源及PWA官網(wǎng)，不要把PWA想象的太復(fù)雜，跟著示例走一下，你行的。
PWA介紹
一個(gè)新的前端技術(shù)，PWA（ 全稱：Progressive Web App ）也就是說這是個(gè)漸進(jìn)式的網(wǎng)頁應(yīng)用程序。
官網(wǎng)：https://developers.google.com/web/progressive-web-apps/
是 Google 在 2015 年提出，2016年6月才推廣的項(xiàng)目。是結(jié)合了一系列現(xiàn)代Web技術(shù)的組合，在網(wǎng)頁應(yīng)用中實(shí)現(xiàn)和原生應(yīng)用相近的用戶體驗(yàn)。
官網(wǎng)上給出 PWA 的宣傳是 ： Reliable （ 可靠的 ）、Fast（ 快速的 ）、Engaging（ 可參與的 ）
Reliable ：當(dāng)用戶從手機(jī)主屏幕啟動(dòng)時(shí)，不用考慮網(wǎng)絡(luò)的狀態(tài)是如何，都可以立刻加載出 PWA。
Fast：這一點(diǎn)應(yīng)該都很熟悉了吧，站在用戶的角度來考慮，如果一個(gè)網(wǎng)頁加載速度有點(diǎn)長的話，那么我們會(huì)放棄瀏覽該網(wǎng)站，所以 PWA 在這一點(diǎn)上做的很好，他的加載速度是很快的。
Engaging ： PWA 可以添加在用戶的主屏幕上，不用從應(yīng)用商店進(jìn)行下載，他們通過網(wǎng)絡(luò)應(yīng)用程序 Manifest file 提供類似于 APP 的使用體驗(yàn)（ 在 Android 上可以設(shè)置全屏顯示哦，由于 Safari 支持度的問題，所以在 IOS 上并不可以 ），并且還能進(jìn)行 ”推送通知” 。
PWA關(guān)鍵技術(shù)
- Service Worker （可以理解為服務(wù)工廠）
- Manifest （應(yīng)用清單）
- Push Notification（推送通知）
Service Worker
以下用SW來表示
SW 是什么呢？這個(gè)是離線緩存文件。我們 PWA 技術(shù)使用的就是它！SW 是瀏覽器在后臺(tái)獨(dú)立于網(wǎng)頁運(yùn)行的腳本，它打開了通向不需要網(wǎng)頁或用戶交互的功能的大門，因?yàn)槭褂昧怂?#xff0c;才會(huì)有的那個(gè) Reliable 特性吧，SW 作用于 瀏覽器于服務(wù)器之間，相當(dāng)于一個(gè)代理服務(wù)器。
瀏覽器支持
順便帶一句：目前只能在 HTTPS 環(huán)境下才能使用SW，因?yàn)镾W 的權(quán)利比較大，能夠直接截取和返回用戶的請(qǐng)求，所以要考慮一下安全性問題。
image
事件機(jī)制
image
功能(還是比較逆天的)
- 后臺(tái)數(shù)據(jù)的同步
- 從其他域獲取資源請(qǐng)求
- 接受計(jì)算密集型數(shù)據(jù)的更新，多頁面共享該數(shù)據(jù)
- 客戶端編譯與依賴管理
- 后端服務(wù)的hook機(jī)制
- 根據(jù)URL模式，自定義模板
- 性能優(yōu)化
- 消息推送
- 定時(shí)默認(rèn)更新
- 地理圍欄
生命周期
image
-
Parsed （ 解析成功 ）： 首次注冊(cè) SW 時(shí)，瀏覽器解決腳本并獲得入口點(diǎn)，如果解析成功，就可以訪問到 SW 注冊(cè)對(duì)象，在這一點(diǎn)中我們需要在 HTML 頁面中添加一個(gè)判斷，判斷該瀏覽器是否支持 SW 。
-
Installing （ 正在安裝 ）：SW 腳本解析完成之后，瀏覽器會(huì)嘗試進(jìn)行安裝，installing 中 install 事件被執(zhí)行，如果其中有 event.waitUntil ( ) 方法，則 installing 事件會(huì)一直等到該方法中的 Promise 完成之后才會(huì)成功，如果 Promise 被拒絕，則安裝失敗，SW會(huì)進(jìn)入 Redundant（ 廢棄 ）狀態(tài)。
-
Installed / Waiting （安裝成功/等待中）：如果安裝成功，SW 將會(huì)進(jìn)入這個(gè)狀態(tài)。
-
Activating （ 正在激活 ）：處于 waiting 狀態(tài)的 SW 發(fā)生以下情況，將會(huì)進(jìn)入 activating 狀態(tài)中：
當(dāng)前已無激活狀態(tài)的 worker 、 SW腳本中的 self.skipWaiting（）方法被調(diào)用 （ ps： self 是 SW 中作用于全局的對(duì)象，這個(gè)方法根據(jù)英文翻譯過來也能明白什么意思啦，跳過等待狀態(tài) ）、用戶已關(guān)閉 SW 作用域下的所有頁面，從而釋放了當(dāng)前處于激活狀態(tài)的 worker、超出指定時(shí)間，從而釋放當(dāng)前處于激活狀態(tài)的 worker
-
Activated （ 激活成功 ）：該狀態(tài)，其成功接收了 document 全面控制的激活態(tài) worker 。
-
Redundant （ 廢棄 ）：這個(gè)狀態(tài)的出現(xiàn)時(shí)有原因的，如果 installing 事件失敗或者 activating 事件失敗或者新的 SW 替換其成為激活態(tài) worker 。installing 事件失敗和 activating 事件失敗的信息我們可以在 Chrome 瀏覽器的 DevTools 中查看
一個(gè)很不錯(cuò)的全面介紹sw的教程：https://www.villainhr.com/page/2017/01/08/Service%20Worker%20%E5%85%A8%E9%9D%A2%E8%BF%9B%E9%98%B6
Manifest
Web App Manifest 是一個(gè) W3C 規(guī)范，它定義了一個(gè)基于 JSON 的 List 。Manifest 在 PWA 中的作用有：
? 能夠?qū)⒛銥g覽的網(wǎng)頁添加到你的手機(jī)屏幕上
? 在 Android 上能夠全屏啟動(dòng)，不顯示地址欄 （ 由于 Iphone 手機(jī)的瀏覽器是 Safari ，所以不支持哦）
? 控制屏幕 橫屏 / 豎屏 展示
? 定義啟動(dòng)畫面
? 可以設(shè)置你的應(yīng)用啟動(dòng)是從主屏幕啟動(dòng)還是從 URL 啟動(dòng)
? 可以設(shè)置你添加屏幕上的應(yīng)用程序圖標(biāo)、名字、圖標(biāo)大小
Push Notification
Push 和 Notification 是兩個(gè)不同的功能，涉及到兩個(gè) API 。
? Notification 是瀏覽器發(fā)出的通知消息。
? Push 和 Notification 的關(guān)系，Push：服務(wù)器端將更新的信息傳遞給 SW ，Notification： SW 將更新的信息推送給用戶。
PWA示例
準(zhǔn)備
我們先創(chuàng)建一個(gè)關(guān)于 PWA 的項(xiàng)目文件夾，
進(jìn)入文件夾下我們準(zhǔn)備一張 120x120的圖片一張，作為我們的應(yīng)用程序圖標(biāo)。
創(chuàng)建一個(gè) index.html 文件
創(chuàng)建一個(gè) main.css 文件
創(chuàng)建一個(gè) manifest.json 文件
創(chuàng)建一個(gè) sw.js 文件
image
index.html
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Hello PWA</title><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" href="main.css"><link rel="manifest" href="manifest.json"> </head> <body><h3>Hello PWA</h3> </body> <script>// 檢測(cè)瀏覽器是否支持SWif(navigator.serviceWorker != null){navigator.serviceWorker.register('sw.js').then(function(registartion){console.log('支持sw:',registartion.scope)})} </script> </html>main.css
?
h3{color: #f00; }manifest.json
short_name: “ " 用戶主屏幕上的應(yīng)用名字
display : “standalone" 設(shè)置啟動(dòng)樣式，讓您的網(wǎng)絡(luò)應(yīng)用隱藏瀏覽器的 URL 地址欄
start_url : “/“ 設(shè)置啟動(dòng)網(wǎng)址，如果不提供的話，默認(rèn)是使用當(dāng)前頁面
theme_color : “ “ 用來告知瀏覽器用什么顏色來為地址欄等 UI 元素著色
background_color: “ ” 設(shè)置啟動(dòng)頁面的背景顏色
icons：”” 就是添加到主屏幕之后的圖標(biāo)
?
{"name": "一個(gè)PWA示例","short_name": "PWA示例","start_url": "/index.html","display": "standalone","background_color": "#fff","theme_color": "#3eaf7c","icons": [{"src": "/youhun.jpg","sizes": "120x120","type": "image/png"}], }sw.js
看網(wǎng)上很多人都安裝的hs和ngrok去調(diào)試，在這里為了照顧新手我是直接引用的sw
處理靜態(tài)緩存，首先定義需要緩存的路徑，以及需要緩存的靜態(tài)文件的列表。
借助 SW 注冊(cè)完成安裝 SW 時(shí)，抓取資源寫入緩存中。使用了一個(gè)方法那就是 self.skipWaiting( ) ，為了在頁面更新的過程當(dāng)中，新的 SW 腳本能夠立刻激活和生效。
?
importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.1.0/workbox-sw.js"); var cacheStorageKey = 'minimal-pwa-1' var cacheList=['/','index.html','main.css','youhun.jpg' ] self.addEventListener('install',e =>{e.waitUntil(caches.open(cacheStorageKey).then(cache => cache.addAll(cacheList)).then(() => self.skipWaiting())) })處理動(dòng)態(tài)緩存，我們監(jiān)聽 fetch 事件，在 caches 中去 match 事件的 request ，如果 response 不為空的話就返回 response ，最后返回 fetch 請(qǐng)求，在 fetch 事件中我們可以手動(dòng)生成 response 返回給頁面。
更新靜態(tài)資源，緩存的資源會(huì)跟隨著版本的更新會(huì)過期的，所以會(huì)根據(jù)緩存的字符串名稱清除舊緩存。在新安裝的 SW 中通過調(diào)用 self.clients.claim( ) 取得頁面的控制權(quán)，這樣之后打開頁面都會(huì)使用版本更新的緩存。舊的 SW 腳本不在控制著頁面之后會(huì)被停止，也就是會(huì)進(jìn)入 Redundant 期。
?
self.addEventListener('fetch',function(e){e.respondWith(caches.match(e.request).then(function(response){if(response != null){return response}return fetch(e.request.url)})) }) self.addEventListener('activate',function(e){e.waitUntil(//獲取所有cache名稱caches.keys().then(cacheNames => {return Promise.all(// 獲取所有不同于當(dāng)前版本名稱cache下的內(nèi)容cacheNames.filter(cacheNames => {return cacheNames !== cacheStorageKey}).map(cacheNames => {return caches.delete(cacheNames)}))}).then(() => {return self.clients.claim()})) })部署
我們可以把當(dāng)前pwa目錄的所有內(nèi)容都扔進(jìn)服務(wù)器中，或者coding Pages和gitHub Pages也是可以的，當(dāng)然，記得開啟https。在上變介紹過SW的權(quán)利比較大，為了安全性，我們使用https協(xié)議來訪問。
試著訪問一下，我們這里用的coding Pages并且綁定了自己的域名
打開 chrom 的調(diào)試工具，打開 application ，點(diǎn)擊 service workers 之后我們會(huì)發(fā)現(xiàn) sw.js 腳本已經(jīng)存到了 SW 中 。
image
我們打開 Network 刷新頁面一下，看看，我們的頁面資源來自 SW 而不是其他的地方，在 Console 中也打印出了我們?cè)?index.html 中判斷的語句，瀏覽器支持就會(huì)打印出這一句話。
image
接下來我們斷網(wǎng)操作，在 Application 中給 Offline 打上對(duì)勾就行啦。然后刷新頁面，我們?nèi)匀荒芸吹街暗捻撁?#xff0c;原因就是我們?cè)谏蠄D看到，他的資源是從 SW 上獲得到的。當(dāng)我們第一次打開這個(gè)頁面的時(shí)候，Resopnse 對(duì)象被存到了 Cache Storage （ 定義在 SW 規(guī)范中 ，相關(guān)資料請(qǐng)同學(xué)們自行查詢啦 ）中，我們看下圖：
image
通過存放到 Cache Storage 中，我們下次訪問的時(shí)候如果是弱網(wǎng)或者斷網(wǎng)的情況下，就可以不走網(wǎng)絡(luò)請(qǐng)求，而直接就能將本地緩存的內(nèi)容展示給用戶，優(yōu)化用戶的弱網(wǎng)及斷網(wǎng)體驗(yàn)。
這個(gè)時(shí)候肯定會(huì)有同學(xué)在想，如果內(nèi)容更新了，那么頁面展示的內(nèi)容是新內(nèi)容呢還是舊內(nèi)容呢？下面我們操作一下，打開 index.html 文件，我們?cè)?body 中添加一個(gè) p 標(biāo)簽 ，然后回到頁面刷新。
image
image
我們看到，頁面上的內(nèi)容并沒有顯示出我剛剛添加的那個(gè) p 標(biāo)簽。這說明了，我們拿到的數(shù)據(jù)還是從 Cache Storage 中獲取到的，Cache Storage中的內(nèi)容并沒有更新，強(qiáng)制刷新也不行哦，那么我們?cè)趺床拍茏屛覄倓偺砑拥哪莻€(gè) p 標(biāo)簽顯示出來呢。
我們打開 sw.js 腳本文件，我們修改一下 cacheStorageKey。
image
修改后，我們?cè)俅未蜷_該網(wǎng)址，強(qiáng)制刷新下或者關(guān)掉瀏覽器重新打開。
頁面中出現(xiàn)了剛剛添加的P標(biāo)簽，我們?cè)倏匆幌?Cache Storage 中的緩存名字，已經(jīng)被修改。
image
總結(jié)
如果是使用coding或者gitHub提供的pages服務(wù)，則需要注意最好綁定下獨(dú)立域名。如果不綁定則注意下文件請(qǐng)求路徑即可。
研究PWA門檻不低，部署的服務(wù)器要求HTTPS，ServiceWorker涉及API眾多，需要單獨(dú)學(xué)習(xí)，另外npm中也已經(jīng)有這個(gè)包了https://www.npmjs.com/package/web-pwa ，玩玩可以，真正部署到項(xiàng)目生產(chǎn)環(huán)境可能坑很多，但有坑填坑，不折騰還叫前端么。
作者：小申同學(xué)
鏈接：https://www.jianshu.com/p/fad8aa9e277f
來源：簡(jiǎn)書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
總結(jié)
以上是生活随笔為你收集整理的PWA介绍及快速上手搭建一个PWA应用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 除了迅雷还有谁在“偷”走你的信息？
- 下一篇： ca 自建 颁发证书_自建ca证书