引言
在做 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