PWA 项目相关参考站点 - 主文档补充

346 阅读3分钟

PWA 项目相关站点

本页介绍个人学习 PWA 项目时遇上的相关网站,作为主介绍文档的补充。


本栏为中文 PWA 项目相关文档相关。

4.2 Service Worker 注册 · PWA 应用实战

Service Worker - 怎么使用 Service Worker - 《PWA文档》 - 书栈网 · BookStack

深入浅出 PWA - 泪已无痕 - 掘金小册

小册年份较远,但仍是不错的 PWA 项目入门手册,对 PWA 项目涉及的相关知识点有较多介绍。


本栏为 Chrome Dev - PWA 学习相关。

Learn PWA

Chrome Dev 官方 PWA 项目渐进式教程,有较高参考价值。

New Progressive Web App training now available

该站点:英文,Chrome Dev 官方项目实战教程,有较高的实战参考价值。


本栏为 Vite 项目 PWA 相关。

github.com/vite-pwa/vi…

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 相关。

github.com/GoogleChrom…

workbox-webpack-plugin - Chrome Developers

workbox-webpack-plugin插件官方介绍。

[Bug] umi4 chainWebpack配置GenerateSW插件报错。 · Issue #10289 · umijs/umi

Umi.js 社区相关人员提及 workbox-webpack-plugin 插件不再推荐使用,点击进入可查看更为具体的详细信息。


本栏为 Workbox 相关文档站点。

有相关部分简单介绍 workbox 各模块功能及其他介绍。

Workbox - Chrome Developers

API Reference - Chrome Developers

workbox 各模块 API 的直接介绍文档。

workbox-window - Chrome Developers

workbox-build - Chrome Developers


其余项目学习过程中涉及的站点较为零散,或相关性不强,或信息点未验证,容易混淆造成混乱,故不在此贴出。以上内容进行深挖已会衍生出较多分支,信息量应足够支撑对 PWA 项目的一定理解。

不止是出于什么原因,最初学习这些文档颇感吃力…


本栏为 PWA 项目实用工具相关

npm: comlink

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 开发。

vite配置https - 掘金

最简单webpack开启https的方式!没有之一! - 掘金


本栏为 Umi 项目相关

如何配置站点图标 favicon? · umijs/umi · Discussion #10846

生成产物的 index.html 中能够正常看到目标文件有 link 在文档中,但是使用 http-server 运行查看,站点图标和文档改变不生效的原因。

有大佬知道在 umi4 中怎么配置 workbox-webpack-plugin 的 pwa 吗? CRA 中直接成功, 在 umi 一直都没有成功. 缺少 index.html 的配置. · umijs/umi · Discussion #10403

index.html 文档生成和不存在于 workbox 生成的 ServiceWorker 的缓存队列中原因,同理 Umi.js 文件未被缓存原因。可以在 workbox Plugin 的配置项中手动添加:addtionalEntries()..

github.com/umijs/umi/i…

Umi3&4 项目端口号配置、sw.js 文件注册位置问题


workbox 基本模块基本介绍: canvas_workbox-structure-230331_0357.png

image.png

image.png

image.png