PWA 應用列表及常用工具

快樂平方發表於2019-04-24

引言

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

應用列表

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

PWA 支援檢測工具

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

PWA 應用列表及常用工具
描述: 這個應用主要用來檢測終端瀏覽器是否支援 ServiceWoker,及在支援的同時是否能夠執行緒持久化。

介面:

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

PWA 應用列表及常用工具

不可用

PWA 應用列表及常用工具

番茄鍾

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

PWA 應用列表及常用工具
描述: 此應用就是一個番茄鍾(關於番茄鐘的概念可以搜尋一下),當時正好想用,然後就做成 PWA 應用了。

介面:

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

斷網下的優化

PWA 應用列表及常用工具

二維碼生成

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

PWA 應用列表及常用工具
描述: 二維碼生成軟體,可更改背景色和前景色,及下載二維碼。

介面:

PWA 應用列表及常用工具

新聞應用

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

PWA 應用列表及常用工具
描述: 做了一個新聞 APP,當時是為了驗證一次網路請求,兩次響應的效果。新聞介面來源於阿里雲。

介面:

PWA 應用列表及常用工具

身體資料統計應用

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

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

介面:

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

支付寶集福應用

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

PWA 應用列表及常用工具
描述: 支付寶集福季,把一些流傳概率很高的“福”字整理了一下,然後又加了一個隨機生成“福”的功能,事實證明還可以。

介面:

PWA 應用列表及常用工具

工具

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

相關文章