《PWA實戰：面向下一代的Progressive Web APP》讀書筆記

前言

以前本身根據網上的教程學習寫了幾個PWA的小Demo，以爲PWA頗有意思，想要更多的瞭解一下PWA，因此讀了這本書。這本書是MANNIN出版社出的，因此書裏的代碼都有很是棒的註釋，所以這篇筆記不會展開講代碼，而是着重於描述PWA的功能以及常見的問題和解決方法。

• 圖書資源
• 圖書中代碼的Github倉庫

1. 什麼是PWA

簡單來講，PWA是一系列新興技術的統稱，這些技術旨在加強web app的功能，使其可以在用戶體驗上媲美原生應用。PWA的功能包括：

• 響應性：能夠適配更小的屏幕
• 鏈接獨立性：由於service worker的緩存，它使網頁能夠離線工做
• 相似原生應用的交互性：使用應用程序外殼架構（app shell）來構建
• 安全性：基於HTTPS協議
• 可發現性：搜索引擎可以發現它（SEO好）
• 可安裝性：能夠添加到桌面像原生應用同樣啓動（基於manifest技術）
• 可連接性：能夠很容易的經過URL進行分享

1.1 網站性能測試工具

• Lighthouse
• webpagetest

Lighthouse會生成性能測試報告，可是測試結果會受網絡質量的影響。webpagetest是真機測試，可是測試可選地點和瀏覽器是有限的，有時候還要排隊等待。但無論怎樣，這些測試工具能夠輔助咱們測試本身的站點，讓咱們瞭解到本身站點如今存在的性能問題，而後着手改善，相信PWA技術會讓你的改善變得更加簡單快捷，並且效果顯著。最最重要的是，PWA是漸進加強的，不須要重寫已經存在的代碼！！

2. PWA的主要技術

2.1 Service Worker

2.1.1 service worker的功能

簡單來講，service worker能夠攔截請求（fetch request），能夠給出響應(response)。你能夠對攔截下來的請求作處理，好比說你發現緩存中已經有了請求的資源，並且資源還在有效期內，你就能夠直接從緩存中讀取資源終止請求。若是在service worker的安裝階段就緩存好了一些資源，這樣再次訪問時能夠直接從緩存中加載部分資源，頁面加載速度會大幅度提高。即便是離線訪問頁面也能夠給出以前緩存好的信息，極大的提高了用戶的體驗感。可使用Google的工具庫Workbox寫service worker文件，裏面提供了不少易用的API以及各類緩存策略。

2.1.2 service worker的特色

• 基於HTTPS協議
• 運行在本身的全局腳本上下文中
• 不是綁定到一個特定的web頁面
• 沒法修改web頁面中的元素，沒法訪問DOM
• 每次對service worker文件進行任何更改時，它都會自動觸發service worker更新流。

2.1.3 service worker的調試

能夠經過Google的開發者工具Application裏面的Service Workers進行調試。

2.1.4 service worker常見問題

1) 緩存更新問題

【方法1】：由於修改service worker文件會觸發service worker的更新流，因此想要更新緩存時，能夠修改緩存名（cacheName），例如將helloWorld改爲helloWorld-2。

【方法2】：Cache busting技術(做者更推薦)，給文件打上版本號，例如：

<script type="text/javascript" src=「/js/main-xtvbas65.js"></script>
複製代碼

這種技術被稱爲緩存總線技術，已經出現了不少年。當一個靜態文件被緩存時，它能夠被存儲很長一段時間，直至到期。若是你更新了一個網站，但因爲文件的緩存版本存儲在訪問者的瀏覽器中，他們可能看不到所作的更改。緩存總線經過使用惟一的文件版本標識符告訴瀏覽器文件的新版本是可用的。

2) 攔截請求時怎麼忽略查詢字符串參數

caches.match(event.request, { ignoreSearch: true })
複製代碼

2.2 Manifest

2.2.1 manifest的功能

讓web app能夠像原生應用同樣添加圖標到桌面，而後經過桌面圖標啓動。可配置圖標，啓動動畫等，詳細配置見文檔。

2.2.2 manifest的調試

能夠經過Google的開發者工具Application裏面的Manifest進行調試。

2.2.3 manifest常見問題

1) 怎麼讓添加到主屏幕的橫幅顯示出來

要讓添加到主屏幕的橫幅顯示出來，必修知足如下條件：

• 須要 manifest.json文件。
• 須要一個啓動的URL
• 須要 144 x 144 的PNG圖標
• 網站必須基於HTTPS協議，而且使用Service Worker
• 用戶必須訪問了網站至少兩次, 每次至少有五分鐘

2.3 Push notifications

2.3.1 Push notifications的功能

即便用戶不打開瀏覽器也能夠接收到消息，原生的API寫起來有一些麻煩，能夠藉助第三方的工具庫來寫，例如OneSignal, Aimtell等。

2.4 Synchronous data

Background sync是Google新推出的Web API，可延遲用戶行爲，直到用戶網絡鏈接穩定。這樣有助於保證用戶想要發送的數據就是實際發送的數據。

PeriodicSync還在開發中，它能夠實現按期同步。

3. 用PWA提高用戶體驗的例子

3.1 假wifi和單點故障問題

以下面的代碼所示能夠設置超時時間，用Promise的race函數讓超時函數和正常的請求競跑，若是到超時時間請求還未獲得相應則拋出超時錯誤，這樣能夠及時讓用戶瞭解到出現了網絡故障。

function timeout(delay) {
  return new Promise(function(resolve, reject) = >{
    setTimeout(function() {
      resolve(new Response('', {
        status: 408,
        statusText: 'Request timed out.'
      }));
    },
    delay);
  });
};

self.addEventListener('fetch', function(event) {
  if (/googleapis/.test(event.request.url)) {
    event.respondWith(Promise.race([timeout(3000), fetch(event.request.url)]));
  } else {
    event.respondWith(fetch(event.request));
  }
});
複製代碼

上面的代碼看上去有一點繁瑣，咱們能夠藉助Google的工具庫Workbox來簡化以上代碼

importScripts('workbox-sw.prod.v1.1.0.js');
const workboxSW = new self.WorkboxSW();
workboxSW.router.registerRoute('https://fonts.googleapis.com/(.*)', workboxSW.strategies.cacheFirst({
  cacheName: 'googleapis',
  networkTimeoutSeconds: 3
}));
複製代碼

4. PWA的將來

4.1 Streaming data

Streaming data能夠實現流數據的傳輸。舉個例子，若是後臺傳遞了一個很大的數據到前臺，正常狀況下前臺須要接受完這個數據才能進行展現，而流數據能夠一邊接受一邊展現，不須要等到整個數據都接受完再展現。

4.2 Web Bluetooth

Web Bluetooth能夠在瀏覽器中鏈接藍牙設備並經過PWA與設備交互。例如，開發人員已經開發出能夠與心率監視器交互的網絡健身應用程序和能夠駕駛微型無人機的網絡應用程序。

4.3 The Web Share API

The Web Share API容許您輕鬆觸發原生Android共享對話框，經過URL或文本進行共享。這是一個重要的API，由於它爲終端用戶提供了對數據共享方式和位置的控制。

4.4 Payment Request API

Web Payments是W3C正在開發的一種新興網絡標準，旨在簡化在線支付，並使更多的參與者可以輕鬆參與網絡上的支付生態系統。標準靈活; 它們適用於各類類型的支付系統，適用於任何設備，支付方式或支付服務提供商的任何瀏覽器。這種靈活性使開發簡單性，部署一致性以及與新興支付技術的將來兼容性。

4.5 Hardware: the Shape Detection API

Shape Detection API容許開發人員訪問人臉檢測等功能，條形碼檢測，甚至是文本檢測。

---

結語

看完這本書，特別是PWA將來發展這一塊的內容，深深的感受到web突飛猛進的發展以及逐漸強大的功能API，期待各類新功能的完善，期待能夠在項目中用起來！開心到飛起，愈來愈堅信轉行前端的決定是正確的:)