使用 Next.js 和 PWA 构建渐进式 Web 应用-JavaScript中文网-JavaScript教程资源分享门户

随着 Web 技术的不断发展和进步，越来越多的用户开始使用移动设备访问网站。这就需要我们开发渐进式 Web 应用来提供更好的用户体验。本文将介绍如何使用 Next.js 和 PWA 技术构建渐进式 Web 应用。

什么是渐进式 Web 应用？

渐进式 Web 应用（Progressive Web App，简称 PWA）是指一种使用 Web 技术开发的应用程序，具有原生应用的体验。它可以在移动设备中离线访问、快速加载、具有推送通知等功能。PWA 的目标是将 Web 应用与原生应用的体验相融合，提供更好的用户体验。

Next.js 简介

Next.js 是一款基于 React 的服务端渲染框架，提供了一系列的开箱即用的功能，包括服务端渲染、静态生成、动态导入等。使用 Next.js 可以快速搭建一个 React 应用，并且具有很高的性能和可扩展性。同时，Next.js 也支持 PWA 技术，可以很方便地构建渐进式 Web 应用。

构建渐进式 Web 应用

下面我们将介绍如何使用 Next.js 和 PWA 技术构建渐进式 Web 应用。首先，我们需要创建一个 Next.js 项目：

npx create-next-app my-app
cd my-app

添加 PWA 支持

Next.js 提供了官方的 PWA 支持，我们可以通过安装 next-pwa 模块来添加 PWA 支持：

npm install next-pwa

然后在 next.config.js 中配置 next-pwa：

const withPWA = require('next-pwa')

module.exports = withPWA({
  pwa: {
    dest: 'public',
    disable: process.env.NODE_ENV === 'development'
  }
})

上面的配置中，我们指定了 PWA 的输出目录为 public，并且在开发环境中禁用了 PWA 功能。

添加离线支持

PWA 最重要的特性之一就是离线支持。为了让我们的应用可以离线访问，我们需要使用 service worker 技术。Next.js 提供了 workbox 库来简化 service worker 的使用。我们可以通过安装 workbox 模块来添加离线支持：

npm install workbox-webpack-plugin

然后在 next.config.js 中配置 workbox：

// javascriptcn.com 代码示例
const withPWA = require('next-pwa')
const withWorkbox = require('next-with-workbox')

module.exports = withPWA(
  withWorkbox({
    pwa: {
      dest: 'public',
      disable: process.env.NODE_ENV === 'development'
    },
    workbox: {
      runtimeCaching: [
        {
          urlPattern: /.png$/,
          handler: 'CacheFirst'
        },
        {
          urlPattern: /api/,
          handler: 'NetworkFirst',
          options: {
            cacheName: 'api-cache',
            expiration: {
              maxEntries: 10,
              maxAgeSeconds: 60 * 60 // 1 hour
            }
          }
        }
      ]
    }
  })
)

上面的配置中，我们指定了 workbox 的运行时缓存策略，其中：

urlPattern：用于匹配需要缓存的资源。
handler：用于指定缓存策略，包括 CacheFirst、CacheOnly、NetworkFirst、NetworkOnly、StaleWhileRevalidate。
options：用于指定缓存选项，包括 cacheName、expiration 等。

上面的配置中，我们指定了所有的 .png 图片采用 CacheFirst 缓存策略，而所有以 /api/ 开头的请求采用 NetworkFirst 缓存策略，缓存时间为 1 小时。

添加推送通知

PWA 还支持推送通知功能，可以通过 web-push 库来实现。首先，我们需要生成 VAPID 公钥和私钥：

npm install web-push -g
web-push generate-vapid-keys

然后在服务端代码中添加推送通知功能：

// javascriptcn.com 代码示例
const webpush = require('web-push')

const vapidKeys = {
  publicKey: 'publicKey',
  privateKey: 'privateKey'
}

webpush.setVapidDetails(
  'mailto:example@yourdomain.org',
  vapidKeys.publicKey,
  vapidKeys.privateKey
)

app.post('/subscribe', async (req, res) => {
  const subscription = req.body
  const payload = JSON.stringify({ title: 'Push Notification' })

  try {
    await webpush.sendNotification(subscription, payload)
    res.status(200).json({ message: 'Push notification sent.' })
  } catch (error) {
    console.error(error)
    res.status(500).json({ message: 'Error sending push notification.' })
  }
})

上面的代码中，我们首先生成了 VAPID 公钥和私钥，然后在服务端代码中使用 web-push 库来发送推送通知。在客户端代码中，我们需要获取用户的订阅信息，并将其发送到服务端：

// javascriptcn.com 代码示例
const pushButton = document.querySelector('.push-button')

async function subscribeUser() {
  const registration = await navigator.serviceWorker.register('/sw.js')
  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array(publicKey)
  })
  await fetch('/subscribe', {
    method: 'POST',
    body: JSON.stringify(subscription),
    headers: { 'Content-Type': 'application/json' }
  })
}

if ('serviceWorker' in navigator && 'PushManager' in window) {
  pushButton.addEventListener('click', subscribeUser)
} else {
  pushButton.disabled = true
}

上面的代码中，我们首先在客户端代码中注册了 service worker，然后调用 pushManager.subscribe() 方法获取用户的订阅信息，并将其发送到服务端。

总结

本文介绍了如何使用 Next.js 和 PWA 技术构建渐进式 Web 应用，包括添加 PWA 支持、添加离线支持和添加推送通知。希望本文可以给大家带来一些帮助，让大家可以更好地构建渐进式 Web 应用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656edba7d2f5e1655d726a66