Next.js + TS 从零开始写一个前端导航页面（七、添加 PWA(service-worker) 支持）

时间：

分类：

nextjs

字数：

248 字

时长：

大约需要 1 分钟

次数：

0 人阅读

既然使用 next 折腾到这种地步了，何不把 PWA 也给加上呢？

去 github 搜索了一把，估计是我关键词不对，没找到比较牛逼的插件。然后去 nextjs 官方仓库搜索，发现了这个东东 https://github.com/vercel/next.js/tree/canary/examples/with-next-offline，瞄了一眼 package.json 发现了这个插件 next-offline，瞅了一眼自述文件，貌似就是本文需要的插件，折腾一把，最终给 https://www.jijian.link/ 添加了 PWA 功能。

第一步：安装依赖

1
$ npm install --save-dev next-offline

第二步：修改配置

修改根目录配置文件 next.config.js

1
2
3
4
5
6
7
8
// next.config.js
const withOffline = require('next-offline')

const nextConfig = {
  // ...
}

module.exports = withOffline(nextConfig)

第三步：重新生成

重新运行 npm run export 即可生成带有 PWA 功能的页面，当然 next-offline 还有其他高级配置，参考官方文档：https://github.com/hanford/next-offline

本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2020-06-16/next-pwa/

如果您觉得文章不错，可以点击文章中的广告支持一下！