PWA 應用列表及經常使用工具

引言

在作 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 國際許可協議進行許可。