【源码】基于React框架的渐进式Web应用

项目简介

本项目是基于React框架构建的渐进式Web应用（PWA）。自create-react-app 2.0版本起自动支持server worker配置，此项目在此基础上进行增强，添加了推送功能，修改了缓存策略，还增加了web app的兼容和配置，能为用户带来接近原生应用的体验。

项目的主要特性和功能

1. 推送功能：服务端可基于web - push生成公私钥，客户端能请求公钥、注册订阅推送，并将订阅对象传回服务端存入数据库，实现消息推送。
2. 缓存策略：通过Service Worker监听install、fetch等事件实现缓存管理，也可使用谷歌提供的workbox库及webpack插件workbox - webpack - plugin自动注入缓存策略。
3. 网页崩溃监控：有基于PWA做的网页崩溃demo，可手动在控制台写死循环触发网页崩溃以测试监控情况。
4. 自定义推送UI：可通过设置showNotification函数的参数来自定义推送的内容及UI，还能自定义按钮实现跳转页面等功能。

安装使用步骤

假设用户已经下载了本项目的源码文件。 1. 安装依赖：在项目根目录下运行npm i。 2. 启动项目： - 开发环境：运行npm run start。 - PWA服务端：运行npm run pwa（此命令会打包项目，删除pushSubscription文件并启动PWA服务端）。 3. 其他脚本命令： - npm run build：打生产包。 - npm run server：启动PWA的服务端。 - npm run rm：删除pushSubscription文件（模拟装订阅对象的数据库）。 - npm run proxy：在客户端无操作时模拟一次服务端推送。 - npm run mutiProxy：在客户端无操作时模拟多次服务端推送。

注意事项

• PWA要求HTTPS环境，本地调试支持host为localhost或者127.0.0.1。
• Service Worker的缓存机制依赖Cache API、HTML5 fetch API和Promise实现。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】