PWA 应用列表及常用工具

article/2025/9/21 6:30:46

引言

在做 PWA 的过程中自己写了一些相关的应用和工具,在这里整合下,方便记录及查找使用。

应用列表

  • PWA 支持检测工具
  • 番茄钟
  • 二维码生成
  • 新闻应用
  • 身体数据统计应用
  • 支付宝集福应用
  • 田英章书法字典应用
  • 抖音无水印下载应用
  • 很好用的备忘录
  • 精神氮泵

PWA 支持检测工具

地址:https://lecepin.gitee.io/detect-sw/
二维码:

描述:
这个应用主要用来检测终端浏览器是否支持 ServiceWoker,及在支持的同时是否能够线程持久化。

界面:

可用(下图分别为第一次和第二次进入)

不可用


番茄钟

地址:https://lp-pwa.gitee.io/pomodoro/
二维码:

描述:
此应用就是一个番茄钟(关于番茄钟的概念可以搜索一下),当时正好想用,然后就做成 PWA 应用了。

界面:

断网下的优化


二维码生成

地址:https://lp-pwa.gitee.io/qrcode-web/
二维码:

描述:
二维码生成软件,可更改背景色和前景色,及下载二维码。

界面:


新闻应用

地址:https://lp-pwa.gitee.io/news/
二维码:

描述:
做了一个新闻 APP,当时是为了验证一次网络请求,两次响应的效果。新闻接口来源于阿里云。

界面:


身体数据统计应用

地址:https://lp-pwa.gitee.io/body_status/#/
二维码:

描述:
做这个应用是因为买的体脂称配套的 APP 在做数据统计时,不能全局查看,所以就写了这个。数据可以手动填写,也可以截取原配套 APP 中的图,然后我这边在百度云上开了个识别文字的接口,用来自动识别后进行填充。数据库层基于 indexDB 进行存储。

界面:


支付宝集福应用

地址:https://lp-pwa.gitee.io/fu/
二维码:

描述:
支付宝集福季,把一些流传概率很高的“福”字整理了一下,然后又加了一个随机生成“福”的功能,事实证明还可以。

界面:


田英章书法字典应用

地址:https://lp-pwa.gitee.io/word-dict/
二维码:

描述:
输入文字,会出现相应的田英章字体的毛笔字。

界面:


抖音无水印下载应用

地址:https://lp-pwa.gitee.io/douyin/
二维码:
在这里插入图片描述

描述:
复制抖音地址,直接粘贴即可。解析成功后会出现“下载”和“播放”按钮。

界面:


很好用的备忘录

地址:https://lp-pwa.gitee.io/notepad/
二维码:
在这里插入图片描述

描述:
IndexDB 版备忘录,markdown 编写,可离线、可安装。

界面:


精神氮泵

地址:https://lecepin.gitee.io/fitness/
二维码:
在这里插入图片描述

界面:


工具

lp-pwa-cli

地址:https://www.npmjs.com/package/lp-pwa-cli
描述:
为了开发提效,写了一个 window 环境下的接入 PWA 的方案。sw 层,默认添加了 workbox v3.x 的支持。


workbox v3.x v4.x

地址:https://github.com/GoogleChrome/workbox
描述:
这个库是 Google 自产的,非常好用。
之前用的是 v3.x 版本,只提供了 serviceWorker 环境下的库。
现在的 v4.x 版本,增加了 window 环境下的库。


pwacompat

地址:https://github.com/GoogleChromeLabs/pwacompat
描述:
PWA 其中的一个特性就是 manifest.json 的支持,但在 IOS 下并不支持此特性,而是有一套自己的特性标签来实现。
pwacompat 库就可以实现此兼容功能。

push-tool

地址:https://lecepin.gitee.io/push-tools/static/
描述:
PWA push 相关的调试工具。

PWA-builder

地址:https://www.pwabuilder.com/
描述:
包含检测、生成、模板等一系列的能力工具。


博客名称:王乐平博客

CSDN博客地址:http://blog.csdn.net/lecepin

知识共享许可协议
本作品采用 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。

http://chatgpt.dhexx.cn/article/ZZxmOUAW.shtml

相关文章

【技术】PWA实践 - 应用激活与安装

文章目录 你能用这项技术做什么?适合人群你可以学到什么 应用激活与安装激活与安装Manifest注意 Service WorkerStorage 管理应用 Demo本章参考资料 你能用这项技术做什么? 使用PWA能让你的web网页在支持使用最新版本Chome浏览器的桌面端(wi…

正确使用PWA

作为一个前端程序员,在没有任何Android/IOS的开发情况下,想想我们有多少种方法来开发一个原生移动应用程序!我们可以有非原生、混合开发,PWA等等手段。类似uniapp,Reactive native为我们提供了更简便的手段&#xff01…

PWA应用入个门

文章目录 什么是PWA应用核心技术清单如何添加PWA应用到手机苹果手机:安卓手机: PWA应用VS微信小程序参考资料 什么是PWA应用 PWA(Progressive Web App)是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好&…

什么是 PWA?有什么用?送三本《PWA入门与实践》!

很高兴受到《PWA入门与实践》作者王乐平老师的邀请,为这本书写推荐语。 下面我们就听听作者王老师带你快速玩转 PWA 吧! 文末有给各位粉丝的福利!抽奖送出三本《PWA入门与实践》。 导读:如今,互联网大流量早已进入了移…

关于PWA的各种问题

目录 前言 PWA的简单了解和需求 项目manifest.json和sw的无脑生成神器 安装 注册 动态配置manifest.json IOS无法获取webpack-pwa-manifest中配置的icon 来自因为需求而产生的静态manifest.json的坑 前言 — 以下结论和方法均为个人摸索,涵盖从度娘那儿找到…

PWA 概念及核心功能的基本介绍

目录 一. PWA 概念介绍 1.1 什么是 PWA? 1.2 为什么会出现 PWA? 1.3 如何判断一个 web 应用是 PWA? 二. PWA 核心功能 2.1 何谓 Service Worker 2.2 注册 Service Worker 2.3 Service Worker 常用事件 2.3.1 install 2.3.2 fetch 2.4 Manife…

PWA系列:第一章 PWA使用场景分析

前言 2018年4月份起微软的应用商店上线第一批PWA应用以来,近一年随着safari开始支持ServiceWorkers,国内浏览器厂商也逐步开始大力加持,到本课程发稿起95%以上的浏览器都支持了PWA的横幅安装。PWA轻应用也逐渐被广大站点使用和推广。 PWA轻应…

PWA(Progressive Web App)入门系列:(一)PWA简介

前言 PWA做为一门Google推出的WEB端的新技术,好处不言而喻,但目前对于相关方面的知识不是很丰富,这里我推出一下这方面的入门教程系列,提供PWA方面学习。 什么是PWA PWA全称Progressive Web App,直译是渐进式WEB应用…

一文读懂什么是 PWA?

什么是 PWA? 1. 概念2. 特性3. 功能4. 优势与劣势5. 发展 1. 概念 PWA 是 Google 于 2016 年提出的概念,于 2017 年正式落地,于 2018 年迎来重大突破,全球顶级的浏览器厂商,Google、Microsoft、Apple 已经全数宣布支持…

PWA(Progressive Web App)入门系列:(三)PWA关键技术Manifest

前言 前面说过,让Web App能够达到Native App外观体验的主要实现技术就是PWA中的manifest技术,本章会详细说明manifest的实现,及各个参数的具体含义,还将了解如何定义Web App的启动图标、启动样式等。 简介 manifest是一种简单的…

一文了解PWA——Progressive Web App

近年来,出现了一种新的应用开发模式——PWA(Progressive Web App,即渐进式Web应用)。今天就来为大家分享什么是PWA,以及它与小程序的区别、技术原理。 PWA的基本概念和技术原理 PWA是一种基于Web技术的应用开发模式&a…

PWA相关知识

http://www.leiphone.com/news/201606/UEiart497WUzS62u.html 我们真的需要网页版App吗?Google PWA的困局 其实回来的两周里,我对Progressive Web App(以下简称 PWA)的理解也在不断更新,现在是思考更为全面的时候。 一…

PWA介绍及快速上手搭建一个PWA应用

PWA初次体验 ​ 前言:本示例不用安装任何东西 部分资源来自网络资源及PWA官网,不要把PWA想象的太复杂,跟着示例走一下,你行的。 PWA介绍 一个新的前端技术,PWA( 全称:Progressive Web App &…

PWA详解

PWA(Progressive Web App,渐进式网页应用,逐渐接近原生app的web app)是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送。在…

PWA应用

一、什么是PWA应用 一个新的前端技术,PWA( 全称:Progressive Web App )也就是说这是个渐进式的网页应用程序。 官网:https://developers.google.com/web/progressive-web-apps/ 是 Google 在 2015 年提出,…

汽车金融风控企业如何开展风控体系建设

汽车融资租赁主要有直租和回租两种模式,相对回租业务而言,直租因更具盈利优势和用户体验优势而备受瞩目。2017年大搜车、易鑫、优信和瓜子等巨头纷纷涉足直租领域,厂家金融和经销商集团金融机构随后跟上,直租模式在国内开始呈现井…

重磅分享:一份关于车贷的政策性文件分享

关注公众号“番茄风控大数据”,获取更多数据分析与风控大数据的实用干货。 不同领域不同产品的策略跟政策要点肯定是不同的,对车贷而言因为有车这个标的物,车会移动会跑,为了应对这个相关的风险点,我们就会对标的物做跟…

线下产品风控门道真不少

关注 “番茄风控大数据”,获取更多数据分析与风控大数据的实用干货。 “你好,请问这里是肯蝶科技有限公司吗?请问这里,有没有一个叫小明的人在这里上班?” “您好!对,这里是肯蝶科技有限公司。…

贷后风控中逾期案件差异化的分配逻辑

在风控精细化运营的当下,贷后工作的开展,越来越需要精细化管理。 今天我们总结梳理了番茄风控之前的内容并结合近期开展的内容,为大家带来一个催收模型优化和逾期案件催收差异化策略的内容,详细请看本文介绍。 一.催收模型 在催收…

GPS北斗定位模块应用实现汽车风控管理

车辆安装GPS北斗定位模块越发常见,无论是车主导航,还是车贷企业的追踪、交警交通的管理等,都是硬性需求和必备工具,在金融风控行业的作用也越来越明显了。 车辆作为资产的一种类型,对资产安全性、实时管控等的需求&am…