type
status
date
slug
summary
tags
category
icon
password
前言
在现代 Web 开发中，Progressive Web App（PWA）正逐渐成为提升用户体验的重要技术。它能够让 Web 应用像原生 App 一样运行，支持离线访问、安装到桌面、推送通知等功能，同时避免了传统 App 开发的复杂性。
Next.js 作为一个流行的 React 框架，不仅提供了强大的 SSR（服务端渲染）和 SSG（静态生成）能力，还能很好地支持 PWA。本教程将介绍如何在 Next.js 项目中配置 PWA，包括
next-pwa 插件的使用、manifest.json 配置、Service Worker 注册，以及优化缓存策略，让你的 Web 应用更快、更可靠。无论你是想为博客、企业网站，还是 Web 应用添加 PWA 功能，本教程都将为你提供一套完整的实践方案。现在，让我们开始吧！🚀
📌 第一步：安装 next-pwa
Next.js 本身不自带 PWA 功能，我们需要安装
next-pwa 这个插件来添加 PWA 支持。或
📌 第二步：配置 next.config.js
安装完成后，我们需要修改
next.config.js 来启用 PWA。
在 Next.js 13 及以上版本，next-pwa 需要在 next.config.js 中配置：📌 第三步：添加 manifest.json
manifest.json 定义了 PWA 的基本信息，比如应用名称、图标、启动页面等。在
public/manifest.json 文件中添加：name/short_name：应用名称。
icons：PWA 的图标，至少提供192x192和512x512两种尺寸（必须是 PNG 格式）。
start_url：PWA 启动时加载的 URL，通常是/。
display: "standalone"：以独立应用的形式运行（不显示浏览器 UI）。
theme_color/background_color：主题色和背景色，影响状态栏、启动画面等。
确保你有相应的图标文件在
public/icons目录下，不然，到了你安装应用的时候，可能会导致失败，或者说应用没有图标。📌 第四步：在 _app.js 或 _app.tsx 中引入 manifest.json
Next.js 不会自动加载
manifest.json，我们需要手动在 _app.js 或 _app.tsx 里引入。修改
pages/_app.js：link rel="manifest"：告诉浏览器加载manifest.json。
📌 第五步：构建和运行 PWA
配置完成后，我们需要进行构建：
或
然后使用 Chrome 访问你的应用，打开 开发者工具（F12） → 应用（Application） → Service Worker，确保 Service Worker 已激活。
如果一切正常，你会看到 Install App（安装应用） 按钮，或者在手机上访问时，可以选择 添加到主屏幕。
注意：在开发环境中 PWA 功能默认是禁用的，需要在生产环境中测试
