跳到内容
构建你的应用程序配置渐进式 Web 应用 (PWA)

渐进式 Web 应用 (PWA)

渐进式 Web 应用 (PWA) 兼具 Web 应用的覆盖范围和可访问性,以及原生移动应用的功能和用户体验。借助 Next.js,你可以创建 PWA,在所有平台上提供无缝、类似应用的体验,而无需多个代码库或应用商店审批。

PWA 允许你:

  • 即时部署更新,无需等待应用商店审批
  • 使用单个代码库创建跨平台应用程序
  • 提供类似原生的功能,例如主屏幕安装和推送通知

使用 Next.js 创建 PWA

1. 创建 Web 应用清单

Next.js 提供内置支持,用于使用 App Router 创建 Web 应用清单。你可以创建静态或动态清单文件。

例如,创建一个 app/manifest.tsapp/manifest.json 文件。

app/manifest.ts
import type { MetadataRoute } from 'next'
 
export default function manifest(): MetadataRoute.Manifest {
  return {
    name: 'Next.js PWA',
    short_name: 'NextPWA',
    description: 'A Progressive Web App built with Next.js',
    start_url: '/',
    display: 'standalone',
    background_color: '#ffffff',
    theme_color: '#000000',
    icons: [
      {
        src: '/icon-192x192.png',
        sizes: '192x192',
        type: 'image/png',
      },
      {
        src: '/icon-512x512.png',
        sizes: '512x512',
        type: 'image/png',
      },
    ],
  }
}

此文件应包含有关名称、图标以及如何在用户设备上显示为图标的信息。这将允许用户在其主屏幕上安装你的 PWA,从而提供类似原生应用的体验。

你可以使用诸如 favicon 生成器 之类的工具来创建不同的图标集,并将生成的文件放在你的 public/ 文件夹中。

2. 实现 Web Push 通知

所有现代浏览器都支持 Web Push 通知,包括:

  • iOS 16.4+(对于安装到主屏幕的应用程序)
  • Safari 16(对于 macOS 13 或更高版本)
  • 基于 Chromium 的浏览器
  • Firefox

这使得 PWA 成为原生应用程序的可行替代方案。值得注意的是,你可以触发安装提示,而无需离线支持。

Web Push 通知允许你重新吸引用户,即使他们没有积极使用你的应用程序。以下是如何在 Next.js 应用程序中实现它们:

首先,让我们在 app/page.tsx 中创建主页组件。我们将把它分解成更小的部分,以便更好地理解。首先,我们将添加一些我们将需要的导入和实用程序。引用的服务器操作尚不存在是可以的。

'use client'
 
import { useState, useEffect } from 'react'
import { subscribeUser, unsubscribeUser, sendNotification } from './actions'
 
function urlBase64ToUint8Array(base64String: string) {
  const padding = '='.repeat((4 - (base64String.length % 4)) % 4)
  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/')
 
  const rawData = window.atob(base64)
  const outputArray = new Uint8Array(rawData.length)
 
  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i)
  }
  return outputArray
}

现在让我们添加一个组件来管理订阅、取消订阅和发送推送通知。

function PushNotificationManager() {
  const [isSupported, setIsSupported] = useState(false)
  const [subscription, setSubscription] = useState<PushSubscription | null>(
    null
  )
  const [message, setMessage] = useState('')
 
  useEffect(() => {
    if ('serviceWorker' in navigator && 'PushManager' in window) {
      setIsSupported(true)
      registerServiceWorker()
    }
  }, [])
 
  async function registerServiceWorker() {
    const registration = await navigator.serviceWorker.register('/sw.js', {
      scope: '/',
      updateViaCache: 'none',
    })
    const sub = await registration.pushManager.getSubscription()
    setSubscription(sub)
  }
 
  async function subscribeToPush() {
    const registration = await navigator.serviceWorker.ready
    const sub = await registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: urlBase64ToUint8Array(
        process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!
      ),
    })
    setSubscription(sub)
    const serializedSub = JSON.parse(JSON.stringify(sub))
    await subscribeUser(serializedSub)
  }
 
  async function unsubscribeFromPush() {
    await subscription?.unsubscribe()
    setSubscription(null)
    await unsubscribeUser()
  }
 
  async function sendTestNotification() {
    if (subscription) {
      await sendNotification(message)
      setMessage('')
    }
  }
 
  if (!isSupported) {
    return <p>Push notifications are not supported in this browser.</p>
  }
 
  return (
    <div>
      <h3>Push Notifications</h3>
      {subscription ? (
        <>
          <p>You are subscribed to push notifications.</p>
          <button onClick={unsubscribeFromPush}>Unsubscribe</button>
          <input
            type="text"
            placeholder="Enter notification message"
            value={message}
            onChange={(e) => setMessage(e.target.value)}
          />
          <button onClick={sendTestNotification}>Send Test</button>
        </>
      ) : (
        <>
          <p>You are not subscribed to push notifications.</p>
          <button onClick={subscribeToPush}>Subscribe</button>
        </>
      )}
    </div>
  )
}

最后,让我们创建一个组件来为 iOS 设备显示一条消息,指示他们安装到主屏幕,并且仅当应用程序尚未安装时才显示此消息。

function InstallPrompt() {
  const [isIOS, setIsIOS] = useState(false)
  const [isStandalone, setIsStandalone] = useState(false)
 
  useEffect(() => {
    setIsIOS(
      /iPad|iPhone|iPod/.test(navigator.userAgent) && !(window as any).MSStream
    )
 
    setIsStandalone(window.matchMedia('(display-mode: standalone)').matches)
  }, [])
 
  if (isStandalone) {
    return null // Don't show install button if already installed
  }
 
  return (
    <div>
      <h3>Install App</h3>
      <button>Add to Home Screen</button>
      {isIOS && (
        <p>
          To install this app on your iOS device, tap the share button
          <span role="img" aria-label="share icon">
            {' '}
            ⎋{' '}
          </span>
          and then "Add to Home Screen"
          <span role="img" aria-label="plus icon">
            {' '}
            ➕{' '}
          </span>.
        </p>
      )}
    </div>
  )
}
 
export default function Page() {
  return (
    <div>
      <PushNotificationManager />
      <InstallPrompt />
    </div>
  )
}

现在,让我们创建此文件调用的服务器操作。

3. 实现服务器操作

创建一个新文件,用于在 app/actions.ts 中包含你的操作。此文件将处理创建订阅、删除订阅和发送通知。

app/actions.ts
'use server'
 
import webpush from 'web-push'
 
webpush.setVapidDetails(
  '<mailto:your-email@example.com>',
  process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!,
  process.env.VAPID_PRIVATE_KEY!
)
 
let subscription: PushSubscription | null = null
 
export async function subscribeUser(sub: PushSubscription) {
  subscription = sub
  // In a production environment, you would want to store the subscription in a database
  // For example: await db.subscriptions.create({ data: sub })
  return { success: true }
}
 
export async function unsubscribeUser() {
  subscription = null
  // In a production environment, you would want to remove the subscription from the database
  // For example: await db.subscriptions.delete({ where: { ... } })
  return { success: true }
}
 
export async function sendNotification(message: string) {
  if (!subscription) {
    throw new Error('No subscription available')
  }
 
  try {
    await webpush.sendNotification(
      subscription,
      JSON.stringify({
        title: 'Test Notification',
        body: message,
        icon: '/icon.png',
      })
    )
    return { success: true }
  } catch (error) {
    console.error('Error sending push notification:', error)
    return { success: false, error: 'Failed to send notification' }
  }
}

发送通知将由我们的 Service Worker 处理,在步骤 5 中创建。

在生产环境中,你可能希望将订阅存储在数据库中,以便在服务器重启时持久保存,并管理多个用户的订阅。

4. 生成 VAPID 密钥

要使用 Web Push API,你需要生成 VAPID 密钥。最简单的方法是直接使用 web-push CLI。

首先,全局安装 web-push。

终端
npm install -g web-push

通过运行以下命令生成 VAPID 密钥:

终端
web-push generate-vapid-keys

复制输出并将密钥粘贴到你的 .env 文件中。

NEXT_PUBLIC_VAPID_PUBLIC_KEY=your_public_key_here
VAPID_PRIVATE_KEY=your_private_key_here

5. 创建 Service Worker

为你的 Service Worker 创建一个 public/sw.js 文件。

public/sw.js
self.addEventListener('push', function (event) {
  if (event.data) {
    const data = event.data.json()
    const options = {
      body: data.body,
      icon: data.icon || '/icon.png',
      badge: '/badge.png',
      vibrate: [100, 50, 100],
      data: {
        dateOfArrival: Date.now(),
        primaryKey: '2',
      },
    }
    event.waitUntil(self.registration.showNotification(data.title, options))
  }
})
 
self.addEventListener('notificationclick', function (event) {
  console.log('Notification click received.')
  event.notification.close()
  event.waitUntil(clients.openWindow('<https://your-website.com>'))
})

此 Service Worker 支持自定义图像和通知。它处理传入的推送事件和通知点击。

  • 你可以使用 iconbadge 属性为通知设置自定义图标。
  • 可以调整 vibrate 模式,以在支持的设备上创建自定义振动警报。
  • 可以使用 data 属性将其他数据附加到通知。

请记住彻底测试你的 Service Worker,以确保它在不同的设备和浏览器上按预期运行。此外,请确保将 notificationclick 事件侦听器中的 'https://your-website.com' 链接更新为你的应用程序的相应 URL。

6. 添加到主屏幕

在步骤 2 中定义的 InstallPrompt 组件为 iOS 设备显示一条消息,指示他们安装到主屏幕。

为了确保你的应用程序可以安装到移动设备主屏幕,你必须具备:

  1. 有效的 Web 应用清单(在步骤 1 中创建)
  2. 通过 HTTPS 提供的网站

当满足这些条件时,现代浏览器将自动向用户显示安装提示。您可以使用 beforeinstallprompt 提供自定义安装按钮,但是,我们不建议这样做,因为它不跨浏览器和平台(在 Safari iOS 上不起作用)。

7. 本地测试

为了确保您可以在本地查看通知,请确保

  • 您正在 通过 HTTPS 在本地运行
    • 使用 next dev --experimental-https 进行测试
  • 您的浏览器(Chrome、Safari、Firefox)已启用通知
    • 当在本地提示时,接受使用通知的权限
    • 确保没有为整个浏览器全局禁用通知
    • 如果您仍然看不到通知,请尝试使用其他浏览器进行调试

8. 保护您的应用程序

安全性是任何 Web 应用程序的关键方面,尤其是对于 PWA。 Next.js 允许您使用 next.config.js 文件配置安全标头。 例如

next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
          {
            key: 'X-Frame-Options',
            value: 'DENY',
          },
          {
            key: 'Referrer-Policy',
            value: 'strict-origin-when-cross-origin',
          },
        ],
      },
      {
        source: '/sw.js',
        headers: [
          {
            key: 'Content-Type',
            value: 'application/javascript; charset=utf-8',
          },
          {
            key: 'Cache-Control',
            value: 'no-cache, no-store, must-revalidate',
          },
          {
            key: 'Content-Security-Policy',
            value: "default-src 'self'; script-src 'self'",
          },
        ],
      },
    ]
  },
}

让我们 بررسی 这些选项中的每一个

  1. 全局标头(应用于所有路由)
    1. X-Content-Type-Options: nosniff:防止 MIME 类型嗅探,降低恶意文件上传的风险。
    2. X-Frame-Options: DENY:通过防止您的站点被嵌入到 iframe 中来防御点击劫持攻击。
    3. Referrer-Policy: strict-origin-when-cross-origin:控制请求中包含多少引用站点信息,从而平衡安全性和功能性。
  2. Service Worker 特定标头
    1. Content-Type: application/javascript; charset=utf-8:确保 service worker 被正确解释为 JavaScript。
    2. Cache-Control: no-cache, no-store, must-revalidate:防止 service worker 被缓存,确保用户始终获得最新版本。
    3. Content-Security-Policy: default-src 'self'; script-src 'self':为 service worker 实施严格的内容安全策略,仅允许来自相同来源的脚本。

了解更多关于使用 Next.js 定义 内容安全策略 的信息。

下一步

  1. **探索 PWA 功能**:PWA 可以利用各种 Web API 来提供高级功能。 考虑探索诸如后台同步、定期后台同步或文件系统访问 API 等功能来增强您的应用程序。 有关 PWA 功能的灵感和最新信息,您可以参考诸如 What PWA Can Do Today 之类的资源。
  2. **静态导出:** 如果您的应用程序不需要运行服务器,而是使用文件的静态导出,您可以更新 Next.js 配置以启用此更改。 在 Next.js 静态导出文档 中了解更多信息。 但是,您将需要从服务器操作转移到调用外部 API,以及将您定义的标头移动到您的代理。
  3. **离线支持**:要提供离线功能,一种选择是将 Serwist 与 Next.js 结合使用。 您可以在他们的 文档 中找到有关如何将 Serwist 与 Next.js 集成的示例。 **注意:** 此插件目前需要 webpack 配置。
  4. **安全注意事项**:确保您的 service worker 已正确保护。 这包括使用 HTTPS、验证推送消息的来源以及实施适当的错误处理。
  5. **用户体验**:考虑实施渐进增强技术,以确保即使在用户的浏览器不支持某些 PWA 功能时,您的应用程序也能良好运行。