PWA 项目相关站点
本页介绍个人学习 PWA 项目时遇上的相关网站,作为主介绍文档的补充。
本栏为中文 PWA 项目相关文档相关。
4.2 Service Worker 注册 · PWA 应用实战
Service Worker - 怎么使用 Service Worker - 《PWA文档》 - 书栈网 · BookStack
小册年份较远,但仍是不错的 PWA 项目入门手册,对 PWA 项目涉及的相关知识点有较多介绍。
本栏为 Chrome Dev - PWA 学习相关。
Chrome Dev 官方 PWA 项目渐进式教程,有较高参考价值。
New Progressive Web App training now available
该站点:英文,Chrome Dev 官方项目实战教程,有较高的实战参考价值。
本栏为 Vite 项目 PWA 相关。
Vite 项目适用插件,可以方便的为 Vite 项目快速集成 PWA 特性,开箱即用。
插件使用
workbox-window (用于方便的注册 ServiceWorker 和简化与之通信的复杂程度)
+
workbox-build(Workbox 对其专职零散模块的集合,属于 Node Package,可用于命令行等)
进行实现。
故也能作为学习 workbox API 等 PWA 相关内容的一个不错文档。英文。
此处说明时版本 v0.14.6, Updated 5 hours ago. 项目组仍在积极更新中。
Tips: 据 Umi.js
项目工作人员了解, workbox-webpack-plugin
作者已离职,插件也不再更新,不推荐使用,但也并非不可用。详情可见 workbox-webpack-plugin
栏相关信息介绍。
本栏为workbox-webpack-plugin
相关。
workbox-webpack-plugin - Chrome Developers
workbox-webpack-plugin
插件官方介绍。
[Bug] umi4 chainWebpack配置GenerateSW插件报错。 · Issue #10289 · umijs/umi
Umi.js
社区相关人员提及 workbox-webpack-plugin
插件不再推荐使用,点击进入可查看更为具体的详细信息。
本栏为 Workbox 相关文档站点。
有相关部分简单介绍 workbox 各模块功能及其他介绍。
API Reference - Chrome Developers
workbox 各模块 API 的直接介绍文档。
workbox-window - Chrome Developers
workbox-build - Chrome Developers
其余项目学习过程中涉及的站点较为零散,或相关性不强,或信息点未验证,容易混淆造成混乱,故不在此贴出。以上内容进行深挖已会衍生出较多分支,信息量应足够支撑对 PWA 项目的一定理解。
不止是出于什么原因,最初学习这些文档颇感吃力…
本栏为 PWA 项目实用工具相关
Google Lab 出品实用工具库,采用 RPC 理念结合 Proxy ,简化 Worker 与主线程通信过程,使用户能无感地在不同上下文中交互。
David East - Simplify Web Worker code with Comlink
David East - I dropped 95% of my Firebase bundle size using this one weird trick
FYI
Web 多线程开发利器 Comlink 的剖析与思考 - 掘金
Comlink 的使用 & 源码解析 | 轻松编写 Web Workers - 掘金
本栏为 Mkcert 证书相关,用于本地 https 开发。
最简单webpack开启https的方式!没有之一! - 掘金
本栏为 Umi 项目相关
如何配置站点图标 favicon? · umijs/umi · Discussion #10846
生成产物的 index.html 中能够正常看到目标文件有 link 在文档中,但是使用 http-server 运行查看,站点图标和文档改变不生效的原因。
index.html 文档生成和不存在于 workbox 生成的 ServiceWorker 的缓存队列中原因,同理 Umi.js 文件未被缓存原因。可以在 workbox Plugin 的配置项中手动添加:addtionalEntries()
..
Umi3&4 项目端口号配置、sw.js 文件注册位置问题
workbox 基本模块基本介绍: