Next.js 实现 PWA 子应用

我的个人站点 dors 已经分化出远丰富于一个 blog 的功能。一旦你向我一样，想打造一个应用来承载自己精神生活的方方面面，你就容易发现将其设计为 PWA，使其能够一定程度上安装到操作系统，通过应用图标的方式打开，是一个好的选择。

而由于你的应用功能实在丰富，它可能会需要有很多入口，此时你便会想到使用快捷方式，在 manifest.json 中配置 shortcuts 字段即可实现。

json
{
    // more...
    shortcuts: [
      {
        name: "导航",
        url: "/navigation",
        icons: [
          {
            src: "img/icons/navigation.svg",
            sizes: "any",
          },
        ],
      },
      {
        name: "小记",
        url: "/notes",
        icons: [
          {
            src: "img/icons/notebook-pen.svg",
            sizes: "any",
          },
        ],
      },
// more...
    ]
}

这样在移动端长按应用图标或者在桌面端右键点击图标便可快捷打开这个应用的子功能。

但遗憾的是，你会发现在某些移动端设备，例如在安卓设备安装 PWA 后的 shortcuts 最多只支持三个 item。

这对你来说可能是不够的，于是你开始思考能不能将一个 site 部署为多个子应用，直接注册多个应用图标，来打开不同的 pathname 了。

要将一个 PWA 部署为多个子应用，思路很简单，只需配置多个 web manifest 文件，每个子应用以 scope 属性区分便可。

而在 Next.js 中，已经在 app/ 路径下编写了 manifest.ts，这是 Next.js 提供的一个 API，用来生成 manifest.webmanifest 文件，但要注意它只在根目录生效，如果在子路由目录下编写这样的一个文件，并不会生效，于是需要手动编写 manifest.webmanifest 文件存到 public 目录下。

我的需求是：小记功能支持作为一个独立的 pwa 安装打开。路由挂在根目录下的 /notes 路径。于是需要创建 public/notes/manifest.webmanifest 文件：

json
{
    "name": "Dors 小记",
    "short_name": "小记",
    "description": "MDX 记事本应用",
    "start_url": "/notes",
    "scope": "/notes",
    "display": "standalone",
    "background_color": "#fff",
    "theme_color": "#312e81",
    "icons": [
        {
            "src": "/notes/icon.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "any"
        }
    ]
}

同时在小记路由页面文件中导出 metadata 常量定义元标签

ts
export const metadata: Metadata = {
  title: '小记',
  description: '本地化、支持 mdx 的简单笔记应用',
  manifest:'/notes/manifest.webmanifest'
};

这样便可在 Next.js 中实现 PWA 子应用的声明，用户可将 /notes 这个子路径内的功能安装为一个子应用。

当然可能还有一些其他逻辑需要处理，例如如果使用到了 serviceworker 缓存静态资源，还需要修改其缓存的作用域等。

最终还有一个问题让人感到不是很优雅：用户使用时需要注意安装顺序，如果先安装了主应用，似乎就不能再安装子应用了。目前不清楚是否能够解决这个问题。