PWA介绍及快速上手搭建一个PWA应用
PWA初次體驗
? 前言：本示例不用安裝任何東西
部分資源來自網絡資源及PWA官網，不要把PWA想象的太復雜，跟著示例走一下，你行的。
PWA介紹
一個新的前端技術，PWA（ 全稱：Progressive Web App ）也就是說這是個漸進式的網頁應用程序。
官網：https://developers.google.com/web/progressive-web-apps/
是 Google 在 2015 年提出，2016年6月才推廣的項目。是結合了一系列現代Web技術的組合，在網頁應用中實現和原生應用相近的用戶體驗。
官網上給出 PWA 的宣傳是 ： Reliable （ 可靠的 ）、Fast（ 快速的 ）、Engaging（ 可參與的 ）
Reliable ：當用戶從手機主屏幕啟動時，不用考慮網絡的狀態是如何，都可以立刻加載出 PWA。
Fast：這一點應該都很熟悉了吧，站在用戶的角度來考慮，如果一個網頁加載速度有點長的話，那么我們會放棄瀏覽該網站，所以 PWA 在這一點上做的很好，他的加載速度是很快的。
Engaging ： PWA 可以添加在用戶的主屏幕上，不用從應用商店進行下載，他們通過網絡應用程序 Manifest file 提供類似于 APP 的使用體驗（ 在 Android 上可以設置全屏顯示哦，由于 Safari 支持度的問題，所以在 IOS 上并不可以 ），并且還能進行 ”推送通知” 。
PWA關鍵技術
- Service Worker （可以理解為服務工廠）
- Manifest （應用清單）
- Push Notification（推送通知）
Service Worker
以下用SW來表示
SW 是什么呢？這個是離線緩存文件。我們 PWA 技術使用的就是它！SW 是瀏覽器在后臺獨立于網頁運行的腳本，它打開了通向不需要網頁或用戶交互的功能的大門，因為使用了它，才會有的那個 Reliable 特性吧，SW 作用于 瀏覽器于服務器之間，相當于一個代理服務器。
瀏覽器支持
順便帶一句：目前只能在 HTTPS 環境下才能使用SW，因為SW 的權利比較大，能夠直接截取和返回用戶的請求，所以要考慮一下安全性問題。
image
事件機制
image
功能(還是比較逆天的)
- 后臺數據的同步
- 從其他域獲取資源請求
- 接受計算密集型數據的更新，多頁面共享該數據
- 客戶端編譯與依賴管理
- 后端服務的hook機制
- 根據URL模式，自定義模板
- 性能優化
- 消息推送
- 定時默認更新
- 地理圍欄
生命周期
image
-
Parsed （ 解析成功 ）： 首次注冊 SW 時，瀏覽器解決腳本并獲得入口點，如果解析成功，就可以訪問到 SW 注冊對象，在這一點中我們需要在 HTML 頁面中添加一個判斷，判斷該瀏覽器是否支持 SW 。
-
Installing （ 正在安裝 ）：SW 腳本解析完成之后，瀏覽器會嘗試進行安裝，installing 中 install 事件被執行，如果其中有 event.waitUntil ( ) 方法，則 installing 事件會一直等到該方法中的 Promise 完成之后才會成功，如果 Promise 被拒絕，則安裝失敗，SW會進入 Redundant（ 廢棄 ）狀態。
-
Installed / Waiting （安裝成功/等待中）：如果安裝成功，SW 將會進入這個狀態。
-
Activating （ 正在激活 ）：處于 waiting 狀態的 SW 發生以下情況，將會進入 activating 狀態中：
當前已無激活狀態的 worker 、 SW腳本中的 self.skipWaiting（）方法被調用 （ ps： self 是 SW 中作用于全局的對象，這個方法根據英文翻譯過來也能明白什么意思啦，跳過等待狀態 ）、用戶已關閉 SW 作用域下的所有頁面，從而釋放了當前處于激活狀態的 worker、超出指定時間，從而釋放當前處于激活狀態的 worker
-
Activated （ 激活成功 ）：該狀態，其成功接收了 document 全面控制的激活態 worker 。
-
Redundant （ 廢棄 ）：這個狀態的出現時有原因的，如果 installing 事件失敗或者 activating 事件失敗或者新的 SW 替換其成為激活態 worker 。installing 事件失敗和 activating 事件失敗的信息我們可以在 Chrome 瀏覽器的 DevTools 中查看
一個很不錯的全面介紹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 是一個 W3C 規范，它定義了一個基于 JSON 的 List 。Manifest 在 PWA 中的作用有：
? 能夠將你瀏覽的網頁添加到你的手機屏幕上
? 在 Android 上能夠全屏啟動，不顯示地址欄 （ 由于 Iphone 手機的瀏覽器是 Safari ，所以不支持哦）
? 控制屏幕 橫屏 / 豎屏 展示
? 定義啟動畫面
? 可以設置你的應用啟動是從主屏幕啟動還是從 URL 啟動
? 可以設置你添加屏幕上的應用程序圖標、名字、圖標大小
Push Notification
Push 和 Notification 是兩個不同的功能，涉及到兩個 API 。
? Notification 是瀏覽器發出的通知消息。
? Push 和 Notification 的關系，Push：服務器端將更新的信息傳遞給 SW ，Notification： SW 將更新的信息推送給用戶。
PWA示例
準備
我們先創建一個關于 PWA 的項目文件夾，
進入文件夾下我們準備一張 120x120的圖片一張，作為我們的應用程序圖標。
創建一個 index.html 文件
創建一個 main.css 文件
創建一個 manifest.json 文件
創建一個 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>// 檢測瀏覽器是否支持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: “ " 用戶主屏幕上的應用名字
display : “standalone" 設置啟動樣式，讓您的網絡應用隱藏瀏覽器的 URL 地址欄
start_url : “/“ 設置啟動網址，如果不提供的話，默認是使用當前頁面
theme_color : “ “ 用來告知瀏覽器用什么顏色來為地址欄等 UI 元素著色
background_color: “ ” 設置啟動頁面的背景顏色
icons：”” 就是添加到主屏幕之后的圖標
?
{"name": "一個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
看網上很多人都安裝的hs和ngrok去調試，在這里為了照顧新手我是直接引用的sw
處理靜態緩存，首先定義需要緩存的路徑，以及需要緩存的靜態文件的列表。
借助 SW 注冊完成安裝 SW 時，抓取資源寫入緩存中。使用了一個方法那就是 self.skipWaiting( ) ，為了在頁面更新的過程當中，新的 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())) })處理動態緩存，我們監聽 fetch 事件，在 caches 中去 match 事件的 request ，如果 response 不為空的話就返回 response ，最后返回 fetch 請求，在 fetch 事件中我們可以手動生成 response 返回給頁面。
更新靜態資源，緩存的資源會跟隨著版本的更新會過期的，所以會根據緩存的字符串名稱清除舊緩存。在新安裝的 SW 中通過調用 self.clients.claim( ) 取得頁面的控制權，這樣之后打開頁面都會使用版本更新的緩存。舊的 SW 腳本不在控制著頁面之后會被停止，也就是會進入 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(// 獲取所有不同于當前版本名稱cache下的內容cacheNames.filter(cacheNames => {return cacheNames !== cacheStorageKey}).map(cacheNames => {return caches.delete(cacheNames)}))}).then(() => {return self.clients.claim()})) })部署
我們可以把當前pwa目錄的所有內容都扔進服務器中，或者coding Pages和gitHub Pages也是可以的，當然，記得開啟https。在上變介紹過SW的權利比較大，為了安全性，我們使用https協議來訪問。
試著訪問一下，我們這里用的coding Pages并且綁定了自己的域名
打開 chrom 的調試工具，打開 application ，點擊 service workers 之后我們會發現 sw.js 腳本已經存到了 SW 中 。
image
我們打開 Network 刷新頁面一下，看看，我們的頁面資源來自 SW 而不是其他的地方，在 Console 中也打印出了我們在 index.html 中判斷的語句，瀏覽器支持就會打印出這一句話。
image
接下來我們斷網操作，在 Application 中給 Offline 打上對勾就行啦。然后刷新頁面，我們仍然能看到之前的頁面，原因就是我們在上圖看到，他的資源是從 SW 上獲得到的。當我們第一次打開這個頁面的時候，Resopnse 對象被存到了 Cache Storage （ 定義在 SW 規范中 ，相關資料請同學們自行查詢啦 ）中，我們看下圖：
image
通過存放到 Cache Storage 中，我們下次訪問的時候如果是弱網或者斷網的情況下，就可以不走網絡請求，而直接就能將本地緩存的內容展示給用戶，優化用戶的弱網及斷網體驗。
這個時候肯定會有同學在想，如果內容更新了，那么頁面展示的內容是新內容呢還是舊內容呢？下面我們操作一下，打開 index.html 文件，我們在 body 中添加一個 p 標簽 ，然后回到頁面刷新。
image
image
我們看到，頁面上的內容并沒有顯示出我剛剛添加的那個 p 標簽。這說明了，我們拿到的數據還是從 Cache Storage 中獲取到的，Cache Storage中的內容并沒有更新，強制刷新也不行哦，那么我們怎么才能讓我剛剛添加的那個 p 標簽顯示出來呢。
我們打開 sw.js 腳本文件，我們修改一下 cacheStorageKey。
image
修改后，我們再次打開該網址，強制刷新下或者關掉瀏覽器重新打開。
頁面中出現了剛剛添加的P標簽，我們再看一下 Cache Storage 中的緩存名字，已經被修改。
image
總結
如果是使用coding或者gitHub提供的pages服務，則需要注意最好綁定下獨立域名。如果不綁定則注意下文件請求路徑即可。
研究PWA門檻不低，部署的服務器要求HTTPS，ServiceWorker涉及API眾多，需要單獨學習，另外npm中也已經有這個包了https://www.npmjs.com/package/web-pwa ，玩玩可以，真正部署到項目生產環境可能坑很多，但有坑填坑，不折騰還叫前端么。
作者：小申同學
鏈接：https://www.jianshu.com/p/fad8aa9e277f
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
總結
以上是生活随笔為你收集整理的PWA介绍及快速上手搭建一个PWA应用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 除了迅雷还有谁在“偷”走你的信息？
- 下一篇： ca 自建 颁发证书_自建ca证书