PWA學習心得

本文轉載自查看原文 2017-10-14 16:55 10194

PWA學習心得

一、什么是PWA

Progressive Web App , (漸進式增強 WEB 應用) 簡稱 PWA ，是提升WebApp的體驗的一種新方法，能給用戶原生應用的體驗。

PWA 本質上是 Web App ，借助一些新技術也具備了Native App的一些特性，兼具 Web App和Native App的優點。

1.1 PWA 的主要特點

 可靠 ( Reliable ) - 即使在不穩定的網絡環境下，也能瞬間加載並展現

 快 ( Fast ) - 快速響應，並且動畫平滑流暢

 有粘性 ( Engaging ) - 用戶可以添加到桌面和接收通知

【沉浸式的用戶體驗】

 沉浸式特點是只顯示內容區域，沒有狀態欄，導航欄，工具欄等

 沉浸式是針對實用型和效率型而言

 優點是可以讓用戶停留時間較長，用戶體驗比較輕松，更好的促進轉化

1.2 PWA 的主要技術點

 離線可用 ( Service Worker )

 主屏圖標 ( App Manifest )

 通知 ( Push API & Notification API )

1.3 PWA 的 DEMO

天氣PWA https://weatherpwa.baidu.com/

可以在移動設備上的 Chrome 瀏覽器 (version > 52) 訪問

1.3.1 有網絡的情況下，在谷歌瀏覽器打開頁面效果

1.3. 2 有網絡的情況下，點擊屏幕上新生成的天氣 APP圖標打開頁面顯示效果

這里可以看到打開的頁面中只顯示內容區域，沒有狀態欄，導航欄，工具欄等

1.3.3 無網絡的情況下，在QQ瀏覽器打開 https://weatherpwa.baidu.com/

1.3.4 無網絡的情況下，在谷歌瀏覽器打開 https://weatherpwa.baidu.com/

下拉刷新，會提示【設備離線，加載歷史數據】

1.3.5 無網絡的情況下，點擊屏幕上生成的天氣 APP圖標

下拉刷新，會提示【設備離線，加載歷史數據】

 參考資料

二、什么是 Service Worker 官網介紹

 它是一種 Web Worker

 它是一個外鏈的js文件，如 /sw.js

 它是一種特殊的Web Worker,能夠攔截網絡請求

 它只能運行在HTTPS協議上

 它還能接受推送消息和處理后台同步

 它一但被注冊就永遠存在，除非顯示unregister

 它是 PWA 的核心

什么是Web Worker？

當在HTML頁面中執行腳本時，頁面的狀態是不可響應的，直到腳本已完成。
web worker 是運行在后台的JavaScript，獨立於其他腳本，不會影響頁面的性能。您可以繼續做任何願意做的事情：點擊、選取內容等等，而此時 web worker在后台運行 .

瀏覽器一般有三類 web Worker

Dedicated Worker ：專用的worker，只能被創建它的 JS 訪問，創建它的頁面關閉，它的生命周期就結束了。

Shared Worker ：共享的 worker，可以被同一域名下的JS訪問，關聯的頁面都關閉時，它的生命周期就結束了。

Service Worker ：是事件驅動的 worker，生命周期與頁面無關，關聯頁面未關閉時，它也可以退出，沒有關聯頁面時，它也可以啟動，

2.1 Service Worker 如何工作

2.2 Service Worker 兼容性

單擊可以查看詳情

2.3 Service Worker 生命周期

生命周期分為這么幾個狀態

 安裝中 ( installing )

 安裝后 ( installed )

 激活中 ( activating )

 激活后 ( activated )

 廢棄 ( redundant )

 安裝 ( installing ) ：

這個狀態發生在 Service Worker 注冊之后，表示開始安裝，觸發 install 事件回調指定一些靜態資源進行離線緩存。

install 事件回調中有兩個方法：

event.waitUntil() ：傳入一個 Promise 為參數，等到該 Promise 為 resolve 狀態為止。

self.skipWaiting() ：self 是當前 context 的 global 變量，執行該方法表示強制當前處在 waiting 狀態的 Service Worker 進入 activate 狀態。

 安裝后( installed ) ：

Service Worker 已經完成了安裝，並且等待其他的 Service Worker 線程被關閉。

 激活( activating ):

在這個狀態下沒有被其他的 Service Worker 控制的客戶端，允許當前的 worker 完成安裝，並且清除了其他的 worker 以及關聯緩存的舊緩存資源，等待新的 Service Worker 線程被激活。

activate 回調中有兩個方法：

event.waitUntil() ：傳入一個 Promise 為參數，等到該 Promise 為 resolve 狀態為止。

self.clients.claim() ：在 activate 事件回調中執行該方法表示取得頁面的控制權, 這樣之后打開頁面都會使用版本更新的緩存。舊的 Service Worker 腳本不再控制着頁面，之后會被停止。

 激活后( activated ) ：

在這個狀態會處理 activate 事件回調 (提供了更新緩存策略的機會)。並可以處理功能性的事件 fetch (請求)、 sync (后台同步)、 push (推送)。

 廢棄狀態 ( redundant ) ：

這個狀態表示一個 Service Worker 的生命周期結束。

這里特別說明一下，進入廢棄 (redundant) 狀態的原因可能為這幾種：

安裝 (install) 失敗

激活 (activating) 失敗

新版本的 Service Worker 替換了它並成為激活狀態

2.4 Service Worker 注冊

//index.html

if ( 'serviceWorker' in navigator ) {
navigator .serviceWorker.register( '/service-worker.js' )
. then ( function (reg) {
console . log ( 'Service Worker registered' , reg) ;
})
.catch( function (error) {
console . error ( 'Error registering Service Worker' , error) ;
}) ;
}

查看是否注冊成功

可以在 PC 上chrome 瀏覽器, 輸入 chrome://inspect/#service-workers

2.5 Service Worker 安裝

// service-worker.js

self . addEventListener ( 'install' , function (event) {
return self .skipWaiting() ;
}) ;

2.6 Service Worker 調試

 借助 Chrome 瀏覽器 debug

使用 Chrome 瀏覽器，可以通過進入控制台 Application -> Service Workers 面板查看和調試。如下圖所示：

 查看 Service Worker 緩存內容

Service Worker 使用 Cache API 緩存只讀資源，可以在 Chrome DevTools 上查看緩存的資源列表。

 網絡跟蹤

經過 Service Worker 的 fetch 請求 Chrome 都會在 Chrome DevTools Network 標簽頁里標注出來，其中：

 來自 Service Worker 的內容會在 Size 字段中標注為 from ServiceWorker

 Service Worker 發出的請求會在 Name 字段中添加 ‘齒輪’ 圖標。

 安卓真機 debug

2.7 其它詳細API

其它詳細API可以參考【參考資料】中的 1 和 6

 參考資料

1. Service Wor k e r s Nigh t l y

2. 頁面守護者：Service Worker

3. PWA，准備好了嗎？

4. PWA兼容性

5. 如何進行 Service Worker 調試

6. 網站漸進式增強體驗(PWA)改造：Service Worker 應用詳解

三、 APP Manifest 與添加到主屏幕

允許將站點添加至主屏幕，是 PWA 提供的一項重要功能

3.1定義 manifest.json 配置添加到主屏幕功能

 創建 manifest.json 文件，並將它放到你的站點目錄中

 在所有頁面引入該文件

 可以在 Service Worker 中監聽 beforeinstallprompt 事件做一些應用內的行為處理

在頁面 head 區域添加如下內容：

< link rel= "manifest" href= "manifest.json" />

manifest.json

{
"name" : "Minimal PWA" ,
"short_name" : "PWA Demo" ,
"display" : "standalone" ,
"start_url" : "/" ,
"theme_color" : "#313131" ,
"background_color" : "#313131" ,
"icons" : [
{
"src" : "e.png" ,
"sizes" : "256x256" ,
"type" : "image/png"
}
]
}

在這個manifest.json文件中，我們可以輕松得到這個PWA的信息：

 name ：定義此PWA的名稱。

 icons ：定義一系列的圖標以適應不同型號的設備。

 theme_color ：主題顏色（影響手機狀態欄顏色）。

 background_color ：背景顏色。

 start_url ：啟動地址。由於PWA實際上是一個web頁面，所以需要定義PWA 在啟動時應該訪問哪個地址。

 display ：“standalone”表示其以類似原生APP的全屏方式啟動。

添加主屏幕效果圖

3.2設置 IOS Safari 上的添加至主屏幕元素

應用圖標：
< link rel= "apple-touch-icon" href= “apple-touch-icon.png" >
啟動畫面：
< link rel= "apple-touch-startup-image" href= "launch.png" >
應用名稱：
< meta name= "apple-mobile-web-app-title" content= "Todo-PWA" >
全屏效果：
< meta name= "apple-mobile-web-app-capable" content= "yes" >
設置狀態欄顏色：
< meta name= "apple-mobile-web-app-status-bar-style" content= "#fff" >