渐进式 Web 应用 (PWA)
渐进式 Web 应用 (PWA) 兼具 Web 应用的覆盖范围和可访问性,以及原生移动应用的功能和用户体验。借助 Next.js,你可以创建 PWA,在所有平台上提供无缝、类似应用的体验,而无需多个代码库或应用商店审批。
PWA 允许你:
- 即时部署更新,无需等待应用商店审批
- 使用单个代码库创建跨平台应用程序
- 提供类似原生的功能,例如主屏幕安装和推送通知
使用 Next.js 创建 PWA
1. 创建 Web 应用清单
Next.js 提供内置支持,用于使用 App Router 创建 Web 应用清单。你可以创建静态或动态清单文件。
例如,创建一个 app/manifest.ts
或 app/manifest.json
文件。
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
中包含你的操作。此文件将处理创建订阅、删除订阅和发送通知。
'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
文件。
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 支持自定义图像和通知。它处理传入的推送事件和通知点击。
- 你可以使用
icon
和badge
属性为通知设置自定义图标。 - 可以调整
vibrate
模式,以在支持的设备上创建自定义振动警报。 - 可以使用
data
属性将其他数据附加到通知。
请记住彻底测试你的 Service Worker,以确保它在不同的设备和浏览器上按预期运行。此外,请确保将 notificationclick
事件侦听器中的 'https://your-website.com'
链接更新为你的应用程序的相应 URL。
6. 添加到主屏幕
在步骤 2 中定义的 InstallPrompt
组件为 iOS 设备显示一条消息,指示他们安装到主屏幕。
为了确保你的应用程序可以安装到移动设备主屏幕,你必须具备:
- 有效的 Web 应用清单(在步骤 1 中创建)
- 通过 HTTPS 提供的网站
当满足这些条件时,现代浏览器将自动向用户显示安装提示。您可以使用 beforeinstallprompt
提供自定义安装按钮,但是,我们不建议这样做,因为它不跨浏览器和平台(在 Safari iOS 上不起作用)。
7. 本地测试
为了确保您可以在本地查看通知,请确保
- 您正在 通过 HTTPS 在本地运行
- 使用
next dev --experimental-https
进行测试
- 使用
- 您的浏览器(Chrome、Safari、Firefox)已启用通知
- 当在本地提示时,接受使用通知的权限
- 确保没有为整个浏览器全局禁用通知
- 如果您仍然看不到通知,请尝试使用其他浏览器进行调试
8. 保护您的应用程序
安全性是任何 Web 应用程序的关键方面,尤其是对于 PWA。 Next.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'",
},
],
},
]
},
}
让我们 بررسی 这些选项中的每一个
- 全局标头(应用于所有路由)
X-Content-Type-Options: nosniff
:防止 MIME 类型嗅探,降低恶意文件上传的风险。X-Frame-Options: DENY
:通过防止您的站点被嵌入到 iframe 中来防御点击劫持攻击。Referrer-Policy: strict-origin-when-cross-origin
:控制请求中包含多少引用站点信息,从而平衡安全性和功能性。
- Service Worker 特定标头
Content-Type: application/javascript; charset=utf-8
:确保 service worker 被正确解释为 JavaScript。Cache-Control: no-cache, no-store, must-revalidate
:防止 service worker 被缓存,确保用户始终获得最新版本。Content-Security-Policy: default-src 'self'; script-src 'self'
:为 service worker 实施严格的内容安全策略,仅允许来自相同来源的脚本。
了解更多关于使用 Next.js 定义 内容安全策略 的信息。
下一步
- **探索 PWA 功能**:PWA 可以利用各种 Web API 来提供高级功能。 考虑探索诸如后台同步、定期后台同步或文件系统访问 API 等功能来增强您的应用程序。 有关 PWA 功能的灵感和最新信息,您可以参考诸如 What PWA Can Do Today 之类的资源。
- **静态导出:** 如果您的应用程序不需要运行服务器,而是使用文件的静态导出,您可以更新 Next.js 配置以启用此更改。 在 Next.js 静态导出文档 中了解更多信息。 但是,您将需要从服务器操作转移到调用外部 API,以及将您定义的标头移动到您的代理。
- **离线支持**:要提供离线功能,一种选择是将 Serwist 与 Next.js 结合使用。 您可以在他们的 文档 中找到有关如何将 Serwist 与 Next.js 集成的示例。 **注意:** 此插件目前需要 webpack 配置。
- **安全注意事项**:确保您的 service worker 已正确保护。 这包括使用 HTTPS、验证推送消息的来源以及实施适当的错误处理。
- **用户体验**:考虑实施渐进增强技术,以确保即使在用户的浏览器不支持某些 PWA 功能时,您的应用程序也能良好运行。
这是否有帮助?