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

_Candice發表於2019-04-01
WebAPP筆記

前言

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

1. 什麼是PWA

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

  • 響應性：可以適配更小的螢幕
  • 連線獨立性：因為service worker的快取，它使網頁可以離線工作
  • 類似原生應用的互動性：使用應用程式外殼架構（app shell）來構建
  • 安全性：基於HTTPS協議
  • 可發現性：搜尋引擎能夠發現它（SEO好）
  • 可安裝性：可以新增到桌面像原生應用一樣啟動（基於manifest技術）
  • 可連結性：可以很容易的通過URL進行分享

1.1 網站效能測試工具

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進行除錯。

service worker debug

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進行除錯。

manifest debug

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，期待各種新功能的完善，期待可以在專案中用起來！開心到飛起，越來越堅信轉行前端的決定是正確的:)

相關文章