如何在 Next.js 中使用 PWA-JavaScript中文网-JavaScript教程资源分享门户

随着移动设备的普及，越来越多的网站开始采用 PWA（Progressive Web Apps）技术来提供更好的用户体验。PWA 可以让网站像原生应用一样运行，包括离线缓存、推送通知等功能。在本文中，我们将介绍如何在 Next.js 中使用 PWA。

什么是 PWA

PWA 是一种新的 Web 应用程序模型，它结合了 Web 应用程序和原生应用程序的优点。PWA 可以让网站具备离线访问、推送通知、添加到主屏幕等功能，让用户获得更好的使用体验。

PWA 的核心特征包括：

可靠性：即使在不稳定的网络环境下也能够快速加载和响应。
快速：快速响应用户交互，提供流畅的动画和过渡效果。
可安装：可以将应用添加到主屏幕上，像原生应用一样启动。
离线访问：即使在没有网络连接的情况下也能够访问应用程序。
推送通知：可以向用户发送推送通知，提醒用户进行交互。

在 Next.js 中使用 PWA

Next.js 是一个基于 React 的 Web 应用程序框架，它可以让开发者更快速地构建 Web 应用程序。在 Next.js 中使用 PWA，我们需要使用 next-pwa 插件。

安装 `next-pwa` 插件

首先，我们需要安装 next-pwa 插件。

npm install next-pwa

配置 `next-pwa` 插件

在 next.config.js 中配置 next-pwa 插件。

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

module.exports = withPWA({
  pwa: {
    dest: 'public',
    register: true,
    sw: 'service-worker.js',
  },
})

在上面的配置中，我们指定了 PWA 的配置项，包括：

dest：指定 PWA 文件的输出目录。
register：指定是否注册 Service Worker。
sw：指定 Service Worker 的文件名。

创建 Service Worker

在项目根目录下创建 service-worker.js 文件。

// javascriptcn.com 代码示例
const CACHE_NAME = 'my-site-cache-v1'
const urlsToCache = [
  '/',
  '/index.html',
  '/styles/main.css',
  '/scripts/main.js',
]

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache')
        return cache.addAll(urlsToCache)
      })
  )
})

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        if (response) {
          return response
        }
        return fetch(event.request)
      }
    )
  )
})

在上面的代码中，我们创建了一个名为 my-site-cache-v1 的缓存，并将一些文件添加到缓存中。当用户访问这些文件时，Service Worker 将会从缓存中返回文件，而不是从网络中获取。

注册 Service Worker

在 pages/_app.js 中注册 Service Worker。

// javascriptcn.com 代码示例
import { useEffect } from 'react'
import { useRouter } from 'next/router'
import * as serviceWorker from '../public/service-worker'

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

  useEffect(() => {
    if ('serviceWorker' in navigator && router.asPath === '/') {
      window.addEventListener('load', () => {
        serviceWorker.register()
      })
    }
  }, [])

  return <Component {...pageProps} />
}

export default MyApp

在上面的代码中，我们在 useEffect 中注册 Service Worker。当页面加载完成时，我们调用 serviceWorker.register() 方法来注册 Service Worker。

测试 PWA

现在，我们已经完成了在 Next.js 中使用 PWA 的配置。我们可以启动应用程序并测试 PWA 的功能。

首先，我们需要在浏览器中打开应用程序，并将其添加到主屏幕上。然后，我们断开网络连接，并重新打开应用程序。我们会发现，应用程序仍然可以运行，并且可以从缓存中加载文件。

此外，我们还可以测试推送通知的功能。在 service-worker.js 中添加以下代码：

// javascriptcn.com 代码示例
self.addEventListener('push', function(event) {
  console.log('Push received', event)
  const title = 'Push Notification'
  const options = {
    body: 'This is a push notification',
    icon: '/images/icon.png',
    badge: '/images/badge.png',
  }

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

self.addEventListener('notificationclick', function(event) {
  console.log('Notification clicked', event)
  event.notification.close()
})

在上面的代码中，我们添加了 push 和 notificationclick 事件的监听器。当收到推送通知时，我们会在控制台输出日志，并显示一个通知。当用户点击通知时，我们会在控制台输出日志，并关闭通知。

现在，我们可以通过服务器向浏览器发送推送通知。我们可以使用 Firebase Cloud Messaging（FCM）服务来发送推送通知。在 FCM 中创建一个新项目，并将项目的密钥添加到应用程序中。然后，我们可以使用 web-push 模块来向浏览器发送推送通知。

npm install web-push

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

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

webpush.setVapidDetails(
  'mailto:example@domain.com',
  vapidKeys.publicKey,
  vapidKeys.privateKey
)

const subscription = {
  endpoint: 'https://fcm.googleapis.com/fcm/send/xxxxxxxxxxxxxxx',
  keys: {
    auth: 'xxxxxxxxxxxxxxx',
    p256dh: 'xxxxxxxxxxxxxxx',
  },
}

webpush.sendNotification(subscription, 'Hello World!')

在上面的代码中，我们使用 web-push 模块向浏览器发送推送通知。我们需要使用 FCM 的 endpoint 和 keys 来创建一个订阅。然后，我们可以使用 sendNotification 方法向浏览器发送推送通知。

总结

在本文中，我们介绍了 PWA 的核心特征，并详细讲解了在 Next.js 中使用 PWA 的方法。我们使用 next-pwa 插件来配置 PWA，使用 Service Worker 来实现离线访问和推送通知。通过本文的学习，你可以更好地了解 PWA 技术，并将其应用到实际项目中。

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

如何在 Next.js 中使用 PWA