Nextjs Progressive Web Apps（PWA）的支持和创建

77 min read

Nextjs 可以被用来创建 Progressive Web Apps（PWA）。在 Nextjs 中，创建 PWA 的步骤如下：

  1. 安装 next-pwa 模块：npm install next-pwa

  2. 引入 next-pwa 和 swr 模块：

// in your next.config.js
const withPWA = require('next-pwa')

module.exports = withPWA({
  pwa: {
    dest: 'public',
    // swSrc is the source of service worker file
    swSrc: 'service-worker.js'
  },
  // ...
})
  1. 编写 service worker 文件：service-worker.js
// service-worker.js
const cacheName = 'my-cache'

self.addEventListener('install', event => {
  console.log('install')
  event.waitUntil(
    caches.open(cacheName).then(cache => {
      return cache.addAll([
        '/', // cache the root path
        // ...
      ])
    })
  )
})

self.addEventListener('fetch', event => {
  console.log('fetch')
  event.respondWith(
    caches.match(event.request).then(response => {
      if (response) {
        return response
      }
      return fetch(event.request)
    })
  )
})
  1. 注册 PWA：
// in your _app.js
import { useEffect } from 'react'
import { useRouter } from 'next/router'

const registerSW = () => {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js').catch(console.error)
  }
}

export default function MyApp({ Component, pageProps }) {
  const router = useRouter()

  useEffect(() => {
    registerSW()
    // unregister SW on component unmount
    return () => navigator.serviceWorker.unregister()
  }, [])

  return <Component {...pageProps} />
}
  1. 添加 manifest.json 文件：public/manifest.json
{
  "name": "My App",
  "short_name": "My App",
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

以上步骤完成后，你就可以运行 next build 和 next export 来生成你的 PWA，并将其部署到任何静态托管环境中，如 Netlify 或 GitHub Pages。