next.js 添加 PWA 漸進式WEB應用(service-worker) 支持

本文僅作為 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