花了一上午的时间,总算是把 pwa 整上了。先来说说什么是 pwa。

渐进式 Web 应用会在桌面和移动设备上提供可安装的、仿应用的体验,可直接通过 Web 进行构建和交付。它们是快速、可靠的 Web 应用。最重要的是,它们是适用于任何浏览器的 Web 应用。如果你在构建一个 Web 应用,其实已经开始构建渐进式 Web 应用了。

简单来说,支持 pwa 的网站再移动端或者桌面端都可以模拟成设备中的一个 app,存在于主屏幕上。

开始之前

每个 pwa 应用都需要一个 manifest.json, 可能看成是一个配置文件。可以去 https://app-manifest.firebaseapp.com/ 生成。

结构类似是这样的

{
  "name": "静かな森",
  "short_name": "静かな森",
  "theme_color": "#27ae60",
  "description": "致虚极,守静笃。",
  "background_color": "#2ecc71",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "lang": "zh-cmn-Hans",
  "prefer_related_applications": true,
  "icons": [
    {
      "src": "manifest-icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "manifest-icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable any"
    }
  ]
}

但是我这边测试的时候,这个网站的图标生成炸掉了,之后我又找了一个 cli 工具,可以用来生成 icon。可以去 GitHub 搜一下 pwa-asset-generator

准备工作完成后,你可以有如下文件。

├── apple-icon-120.png
├── apple-icon-152.png
├── apple-icon-167.png
├── apple-icon-180.png
├── manifest-icon-192.png
├── manifest-icon-512.png
└── manifest.json

集成到 NextJs 项目中

首先你需要把以上文件复制到项目根目录的 public 目录中,如果不存在可以新建一个空的目录。

来到 src 目录,新建一个 _document.tsx 改文件用来控制 NexJs 该如何渲染根节点。

这里我们需要添加亿些 meta 标签。

<link rel="manifest" href="manifest.json" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="application-name" content="静かな森" />
<meta name="apple-mobile-web-app-title" content="静かな森" />
<meta name="msapplication-tooltip" content="静かな森" />
<meta name="theme-color" content="#27ae60" />
<meta name="msapplication-navbutton-color" content="#27ae60" />
 <meta name="msapplication-starturl" content="/" />
<meta
  name="viewport"
  content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>

你也可以在这里添加一些其他的 meta 比如苹果设备上显示的图标等等。

那么完成了一步,接下来才是最重要的一步。

首先你需要知道 PWA 应用必须使用 workservice, 换句话说只有使用 workservice 才可以离线访问,这才算得上应用。

部署 WorkService

传统的方案较为繁琐,在这里我们采用 next-pwa 来实现。

首先安装 next-pwa

yarn add next-pwa

接着在 next.config.js中配置如下。

const withPWA = require('next-pwa')
module.exports = withPWA({
  pwa: {
    dest: 'public',
  },
})

如果你有多个配置则可以采用嵌套写法,如

const isProd = process.env.NODE_ENV === 'production'
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})
const env = require('dotenv').config().parsed || {}
const withImages = require('next-images')
const withPWA = require('next-pwa')
module.exports = withPWA({
  pwa: {
    dest: 'public',
  },
  ...withImages(
    withBundleAnalyzer({
      env: {
        PORT: 2323,
        ...env,
      },
      assetPrefix: isProd ? env.ASSETPREFIX || '' : '',
      experimental: {
        async rewrites() {
          return [{ source: '/sitemap.xml', destination: '/api/sitemap' }]
        },
      },
    }),
  ),
})

安装之后再次启动应用。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 反代配置参考

#PROXY-START/
location ~ (sw.js)$ {
    proxy_pass http://127.0.0.1:2323;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    add_header Last-Modified $date_gmt;
    add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
    if_modified_since off;
    expires off;
    etag off;
}
location /
{
    proxy_pass http://127.0.0.1:2323;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;

    add_header X-Cache $upstream_cache_status;
    proxy_ignore_headers Set-Cookie Cache-Control expires;
    add_header Cache-Control no-cache;
    expires off;
}


#PROXY-END/