next.js 添加 PWA 渐进式WEB应用(service-worker) 支持

有点肥

去 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

 

 

文章首发于微信公众号【前端路引】，欢迎 微信扫一扫 查看更多文章。

本文来自博客园，作者：前端路引，转载请注明原文链接：https://www.cnblogs.com/linx/p/13139957.html

 

来源：https://www.cnblogs.com/linx/p/13139957.html