本文仅作为 next 系列文章中的一部分,其他 next 文章参考: https://blog.jijian.link/categories/nextjs/
去 github 搜索了一把,估计是我关键词不对,没找到比较牛逼的插件。然后去 nextjs 官方仓库搜索,发现了这个东东 https://github.com/vercel/next.js/tree/canary/examples/with-next-offline,瞄了一眼 package.json 发现了这个插件 next-offline,瞅了一眼自述文件,貌似就是本文需要的插件,折腾一把,最终给 https://www.jijian.link/ 添加了 PWA 功能。
第一步:安装依赖
$ npm install --save-dev next-offline
第二步:修改配置
修改根目录配置文件 next.config.js
// 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