引言

在做 PWA 的過程中自己寫了一些相關的應用和工具，在這裡整合下，方便記錄及查詢使用。

應用列表

• PWA 支援檢測工具
• 番茄鍾
• 二維碼生成
• 新聞應用
• 身體資料統計應用
• 支付寶集福應用
• 田英章書法字典應用

---

PWA 支援檢測工具

地址：lecepin.gitee.io/detect-sw/ 二維碼：

描述： 這個應用主要用來檢測終端瀏覽器是否支援 ServiceWoker，及在支援的同時是否能夠執行緒持久化。

介面：

可用(下圖分別為第一次和第二次進入)

不可用

---

番茄鍾

地址：lp-pwa.gitee.io/pomodoro/ 二維碼：

描述： 此應用就是一個番茄鍾（關於番茄鐘的概念可以搜尋一下），當時正好想用，然後就做成 PWA 應用了。

介面：

斷網下的優化

---

二維碼生成

地址：lp-pwa.gitee.io/qrcode-web/ 二維碼：

描述： 二維碼生成軟體，可更改背景色和前景色，及下載二維碼。

介面：

---

新聞應用

地址：lp-pwa.gitee.io/news/ 二維碼：

描述： 做了一個新聞 APP，當時是為了驗證一次網路請求，兩次響應的效果。新聞介面來源於阿里雲。

介面：

---

身體資料統計應用

地址：lp-pwa.gitee.io/body_status… 二維碼：

描述： 做這個應用是因為買的體脂稱配套的 APP 在做資料統計時，不能全域性檢視，所以就寫了這個。資料可以手動填寫，也可以擷取原配套 APP 中的圖，然後我這邊在百度雲上開了個識別文字的介面，用來自動識別後進行填充。資料庫層基於 indexDB 進行儲存。

介面：

---

支付寶集福應用

地址：lp-pwa.gitee.io/fu/ 二維碼：

描述： 支付寶集福季，把一些流傳概率很高的“福”字整理了一下，然後又加了一個隨機生成“福”的功能，事實證明還可以。

介面：

---

工具

lp-pwa-cli

地址：www.npmjs.com/package/lp-… 描述： 為了開發提效，寫了一個 window 環境下的接入 PWA 的方案。sw 層，預設新增了 workbox v3.x 的支援。

---

workbox v3.x v4.x

地址：github.com/GoogleChrom… 描述： 這個庫是 Google 自產的，非常好用。 之前用的是 v3.x 版本，只提供了 serviceWorker 環境下的庫。 現在的 v4.x 版本，增加了 window 環境下的庫。

---

pwacompat

地址：github.com/GoogleChrom… 描述： PWA 其中的一個特性就是 manifest.json 的支援，但在 IOS 下並不支援此特性，而是有一套自己的特性標籤來實現。 pwacompat 庫就可以實現此相容功能。

---

---

部落格名稱：王樂平部落格

CSDN部落格地址：blog.csdn.net/lecepin

本作品採用知識共享署名-非商業性使用-禁止演繹 4.0 國際許可協議進行許可。