Next.js 的 PWA 实践：实现离线缓存、通知提醒等功能-JavaScript中文网-JavaScript教程资源分享门户

随着移动设备的普及和互联网的发展，越来越多的网站和应用程序开始向 PWA（Progressive Web App）转型。PWA 可以帮助应用程序离线缓存、添加通知提醒、加快页面加载速度，提高用户体验。作为一个流行的 React 框架，Next.js 也支持 PWA。

本文将介绍如何在 Next.js 中使用 PWA，具体包括离线缓存、添加通知提醒等功能的实现。我们会在文章中提供示例代码和详细的解释，希望能给前端开发者带来帮助和指导。

1. Next.js 中的 PWA

PWA（Progressive Web App）是一种渐进式的 Web 应用程序，具有类似于原生应用的功能和用户体验。PWA 可以在离线状态下继续工作，并且因为使用了缓存，所以可以更快地加载页面。

在 Next.js 中实现 PWA 有两种方法：

1.1. 通过 next-offline 插件

next-offline 是一个 Next.js 插件，可以帮助我们快速实现 PWA 的功能，包括离线缓存、添加通知提醒等。next-offline 使用了 Workbox，一个 Google 推出的 Web 应用程序开发库，可以自动生成 Service Worker 文件，并且支持离线缓存、预缓存等功能。

要使用 next-offline，我们需要在 next.config.js 中添加以下配置：

const withOffline = require('next-offline')

module.exports = withOffline({
  // 在这里添加其他的配置
})

上述代码将默认启用离线缓存和 Service Worker。我们还可以通过 withOffline 的参数设置一些功能和选项。

1.2. 通过自定义 Service Worker

我们也可以通过自己编写 Service Worker 文件来实现 PWA 的功能。这种方法较为灵活，可以灵活地控制 Service Worker 的行为和功能。

要使用自定义 Service Worker，我们需要在 Next.js 的 _app.js 文件中注册 Service Worker。我们可以在 componentDidMount 生命周期中注册 Service Worker，如下所示：

// javascriptcn.com code example
import React from 'react'
import App from 'next/app'
import * as serviceWorker from '../serviceWorker'

class MyApp extends App {
  componentDidMount() {
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker
        .register('/service-worker.js')
        .then((reg) => {
          // 注册成功
        })
        .catch((e) => console.error('Error during service worker registration:', e))
    }
  }

  render() {
    const { Component, pageProps } = this.props
    return <Component {...pageProps} />
  }
}

上述代码实现了在 componentDidMount 生命周期中注册 Service Worker。我们可以将 Service Worker 文件放在 public 目录下，并在 register 方法中指定其路径。

2. 离线缓存

让我们来看看如何在 Next.js 中实现离线缓存。通过离线缓存，我们可以使网站在离线状态下也能够正常访问。当用户访问网站时，我们会先判断是否处于离线状态，如果是，则从缓存中获取数据，否则就直接从服务器获取数据。

2.1. 使用 next-offline 实现离线缓存

我们可以使用 next-offline 插件来快速在 Next.js 中实现离线缓存。next-offline 默认会在编译时向我们的应用程序添加 Service Worker，同时会将页面中的静态资源进行预缓存。一旦用户离线，就可以使用缓存的资源来显示页面。

我们可以通过 next-offline 的 withOffline 方法来添加离线缓存的配置。以下是一个示例配置：

// javascriptcn.com code example
const withOffline = require('next-offline')

module.exports = withOffline({
  // 添加其他的配置
  workboxOpts: {
    runtimeCaching: [
      {
        urlPattern: /\.(png|jpg|jpeg|webp|svg|gif|ico|woff|woff2|ttf|eot)$/,
        handler: 'CacheFirst',
        options: {
          cacheName: 'static-assets',
          expiration: {
            maxAgeSeconds: 60 * 60 * 24 * 30, // 缓存一个月
            maxEntries: 50,
          },
        },
      },
      {
        urlPattern: /^https:\/\/api\.example\.com/,
        handler: 'NetworkFirst',
        options: {
          cacheName: 'api-cache',
          networkTimeoutSeconds: 2,
        },
      },
    ],
  },
})

上述代码添加了一个名为 workboxOpts 的配置，其中包含 runtimeCaching。runtimeCaching 是一个数组，包含了我们要预缓存的 URL 和对应的策略。上述代码演示了如何分别缓存静态资源和 API 请求的结果。

2.2. 使用自定义 Service Worker 实现离线缓存

我们也可以通过手动编写 Service Worker 文件来实现离线缓存。我们需要在 Service Worker 文件中定义响应请求的策略，例如可以使用 Cache Storage API 来处理请求。

以下是一个简单的 Service Worker 文件，它可以缓存所有的静态资源：

// javascriptcn.com code example
const CACHE_NAME = 'static-assets'
const STATIC_FILES = [
  '/',
  '/index.html',
  '/main.css',
  '/main.js',
  '/images/logo.png',
]

// 将静态文件添加到缓存中
self.addEventListener('install', (event) => {
  console.log('Service worker installing...')
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      console.log('[Service Worker] Pre-caching offline page')
      return cache.addAll(STATIC_FILES)
    })
  )
})

// 从缓存中获取文件，并返回响应
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      // 缓存中有响应，则返回缓存中的数据，否则从网络中获取数据
      return response || fetch(event.request)
    })
  )
})

上述代码实现了在 Service Worker 中缓存所有的静态资源。我们可以在 install 事件的处理函数中将所有的静态资源添加到缓存中。在 fetch 事件的处理函数中，我们会先从缓存中获取响应，如果缓存中没有，则从网络中获取响应。

3. 通知提醒

除了离线缓存，PWA 还可以实现通知提醒的功能。通知提醒可以让我们向用户发送推送通知，例如通知用户新内容已经发布，或是提醒用户处理某些事情。

3.1. 使用 next-offline 实现通知提醒

我们可以使用 next-offline 插件的 withOffline 方法，在 Service Worker 中添加触发通知的代码。例如，我们可以在 Service Worker 中监听 push 事件，并将推送通知显示在用户的设备上。

以下是一个例子：

// javascriptcn.com code example
self.addEventListener('push', (event) => {
  console.log('[Service Worker] Push Received.')
  console.log(`[Service Worker] Push had this data: "${event.data.text()}"`)

  let data = event.data.json()

  const title = data.title
  const options = {
    body: data.body,
    icon: '/images/icons/icon-152x152.png',
    vibrate: [100, 50, 100],
    data: { url: 'https://your-url.com' },
    actions: [
      {
        action: 'explore',
        title: 'Learn More',
        icon: '/images/icons/icon-512x512.png',
      },
      { action: 'close', title: 'Close', icon: '/images/icons/icon-512x512.png' },
    ],
  }

  event.waitUntil(self.registration.showNotification(title, options))
})

上述代码在 Service Worker 中监听了 push 事件。当 Service Worker 接收到推送通知时，它会将通知显示在设备上，并显示出通知的内容、图标和按钮等。

我们可以通过发送 push 通知以触发此代码。例如，以下是一个向 Service Worker 发送推送通知的请求：

// javascriptcn.com code example
fetch(`/api/push-notification`, {
  method: 'POST',
  headers: {
    'content-type': 'application/json',
  },
  body: JSON.stringify({
    title: 'New content available',
    body: 'Click here to see it',
    icon: '/images/icons/icon-512x512.png',
  }),
})

上述代码向 /api/push-notification 发送一个 POST 请求。后端 API 可以使用推送 API 将推送通知发送给客户端，触发服务工作者中的推送事件，从而显示推送通知。

3.2. 使用自定义 Service Worker 实现通知提醒

我们也可以通过手动编写 Service Worker 文件来实现通知提醒。以下是一个简单的 Service Worker 文件，它可以处理 push 事件并触发通知：

// javascriptcn.com code example
self.addEventListener('push', function (event) {
  console.log('[Service Worker] Push Received.')
  console.log(`[Service Worker] Push had this data: "${event.data.text()}"`)

  let data = event.data.json()

  const title = data.title
  const options = {
    body: data.body,
    icon: '/images/icons/icon-152x152.png',
    vibrate: [100, 50, 100],
    data: { url: 'https://your-url.com' },
    actions: [
      {
        action: 'explore',
        title: 'Learn More',
        icon: '/images/icons/icon-512x512.png',
      },
      { action: 'close', title: 'Close', icon: '/images/icons/icon-512x512.png' },
    ],
  }

  event.waitUntil(self.registration.showNotification(title, options))
})

上述代码实现了在 Service Worker 中处理 push 事件，并显示出推送通知。我们可以通过后端 API 发送推送通知，从而触发 Service Worker 中的 push 事件。

4. 结论

在本文中，我们介绍了如何在 Next.js 中实现 PWA 的离线缓存和推送通知等功能。我们提供了使用 next-offline 插件和自定义 Service Worker 两种方法，并给出了示例代码和详细的说明。

PWA 可以显著提高应用程序的用户体验。我们希望这篇文章能够帮助读者了解如何在 Next.js 中实现 PWA，并希望读者可以根据本文提供的方法和示例代码实现自己的 PWA 应用程序。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/672b1ebdddd3a70eb6d1c0c7