这篇文章上次修改于 3 个月前,可能其部分内容已经发生变化,如有疑问可询问作者。
花了一上午的时间,总算是把 pwa 整上了。先来说说什么是 pwa。
渐进式 Web 应用会在桌面和移动设备上提供可安装的、仿应用的体验,可直接通过 Web 进行构建和交付。它们是快速、可靠的 Web 应用。最重要的是,它们是适用于任何浏览器的 Web 应用。如果你在构建一个 Web 应用,其实已经开始构建渐进式 Web 应用了。
简单来说,支持 pwa 的网站再移动端或者桌面端都可以模拟成设备中的一个 app,存在于主屏幕上。

开始之前

每个 pwa 应用都需要一个 manifest.json, 可能看成是一个配置文件。可以去 https://app-manifest.firebaseapp.com/ 生成。
结构类似是这样的
但是我这边测试的时候,这个网站的图标生成炸掉了,之后我又找了一个 cli 工具,可以用来生成 icon。可以去 GitHub 搜一下 pwa-asset-generator
准备工作完成后,你可以有如下文件。

集成到 NextJs 项目中

首先你需要把以上文件复制到项目根目录的 public 目录中,如果不存在可以新建一个空的目录。
来到 src 目录,新建一个 _document.tsx 改文件用来控制 NexJs 该如何渲染根节点。
这里我们需要添加亿些 meta 标签。
你也可以在这里添加一些其他的 meta 比如苹果设备上显示的图标等等。
那么完成了一步,接下来才是最重要的一步。
首先你需要知道 PWA 应用必须使用 workservice, 换句话说只有使用 workservice 才可以离线访问,这才算得上应用。

部署 WorkService

传统的方案较为繁琐,在这里我们采用 next-offline 来实现。
首先安装 next-offline
接着在 next.config.js 中配置如下
如果你有多个配置则可以采用嵌套写法,如
安装之后再次启动应用。workservice 已经搞定。就是这么简单。
打开 Chrome devtools,选择 audits 选项,生成报告,你会看到 processive Web app 图标亮了。

生产环境部署

这一步反而是最难的,因为一般我们会使用 nginx 或者其他高性能服务器反代。考虑到缓存和 Headers 不同,大概率会产生不同的问题。
我出现了如下问题:
  • 504 错误,查看 nginx 的缓存时间,建议关闭缓存,因为 workservice 自带缓存。
  • 500 错误,如果使用 pm2 托管 nodejs 应用,查看 pm2 时候超出了内存大小而重启
  • network error,查看 nginx 并发数,由于采用了 workservice 所以单 ip 的并发数比较多,建议设置成一般的两倍
  • js,css 加载 404,查看 nginx 是否开启了防盗链,workservice 请求的时候不带 referrer
附 nginx 反代配置参考

亲亲留个评论再走呗

正在加载评论区...