随着移动设备的普及，越来越多的网站正在转向 PWA（Progressive Web App）技术，它将网站的体验提高到了移动应用程序的水平。Next.js 已经支持 PWA，包括离线访问和推送通知。在这篇文章中，我们将介绍如何在 Next.js 中提供 PWA 支持。
什么是 Progressive Web App？
PWA 是一种 web 应用程序，它具有类似原生移动应用程序的功能。它可以与离线数据，本地推送通知等一起工作，与本地应用程序相似。
PWA 的优点有：
- 可离线访问：网站在没有网络的情况下可以被访问，提供更好的用户体验。
- 小程序体验：PWA 可以添加到主屏幕上，并允许访问设备的硬件，并全屏展示。
- 快速加载：PWA 使用 HTTP2 和 Service Worker 等技术来更快地加载。
- 安装简单：PWA 不需要从应用商店下载安装，并且可以自动更新。
- 与 web 应用程序兼容：PWA 可以像 web 应用程序一样使用，无需安装。
如何在 Next.js 中提供 PWA 支持？
下面是在 Next.js 中添加 PWA 支持的步骤：
步骤一：安装依赖
首先，我们需要安装一些依赖项，包括：
next-pwa：Next.js 的 PWA 解决方案workbox：用于构建 Service Worker 文件@material-ui/core：Material UI 库，用于构建 UI
在终端中，运行以下命令：
npm install next-pwa workbox @material-ui/core
步骤二：配置 PWA
接下来，我们需要配置 next.config.js 文件，以启用 PWA 功能。
在项目的根目录下创建一个 next.config.js 文件，并添加下列代码：
const withPWA = require("next-pwa"); module.exports = withPWA({ pwa: { dest: "public", }, });
withPWA 方法将 Next.js 配置与 PWA 功能一起使用。pwa 对象，其中的 dest 属性指定了 Service Worker 文件的输出目录。这里我们将 Service Worker 文件放置在 public 文件夹中。
步骤三：构建 Service Worker 文件
在构建 Service Worker 文件之前，我们需要使用 Workbox CLI 生成 Service Worker 脚本。Workbox 是一款 Google 开发的库，用于帮助构建 Service Worker 文件。
在终端中，运行以下命令：
npx workbox wizard这会启动一个交互式向导来帮助我们生成 Service Worker 文件。我们需要回答几个问题，例如生成文件的路径和缓存策略。
在向导完成后，会生成一个 sw.js 文件，我们需要将该文件放置在 public 文件夹下。
步骤四：添加 PWA 功能
现在我们已经配置好了 PWA，接下来我们需要添加离线访问、推送通知等功能。
制作 Web App Manifest
Web App Manifest 是一个 JSON 文件，它提供了一些信息，用于标识应用程序，并指示浏览器如何安装和显示应用程序。
在 public 文件夹下创建 manifest.json 文件，并添加如下代码：
-- -------------------- ---- ------- - ------- --- ----- ---- ----- ------------- ----- ----- -------------- ---------- ------------------- ---------- ---------- ------------- ------------ ---- -------- - - ------ -------------------- -------- ---------- ------- ----------- -- - ------ -------------------- -------- ---------- ------- ----------- - - -展开代码
上述代码中，我们指定了应用程序的名称（name）、短名称（short_name）、主题颜色（theme_color）、背景颜色（background_color）、显示模式（display）、启动 URL（start_url）以及图标（icons）等信息。
添加 Service Worker
我们的 PWA 需要使用 Service Worker 文件来处理离线访问和推送通知等功能。我们可以在 pages/_app.js 文件中添加 Service Worker。
在 pages/_app.js 文件中，添加如下代码：
-- -------------------- ---- ------- ------ - --------- - ---- -------- ------ - --------- ---------- - ---- ----------------------- -------- ------- ---------- --------- -- - ------------ -- - ------------------ - ------ ----- --- ------ -- -- - ------------- -- -- ---- ------ ---------- -------------- --- - ------ ------- ------展开代码
上述代码中，我们首先将 Service Worker 注册到我们的 Next.js 应用程序中。我们还使用了 useEffect 方法来销毁 Service Worker。
添加推送通知
要添加推送通知功能，我们需要使用 next-offline 库提供的 withOffline 高阶组件。
首先，我们需要安装 next-offline 库。在终端中，运行以下命令：
npm install next-offline
接下来，我们需要将 withOffline 高阶组件应用到 index.js 文件中。我们还需要添加一个按钮来订阅通知。
在 pages/index.js 中，添加如下代码：
-- -------------------- ---- ------- ------ - -------- - ---- -------- ------ ---- ---- ------------ ------ - ----------- - ---- ----------------------- ------ - ------- ---------- - ---- -------------------- ------ - ---------------- - ---- --------------------- -------- ---------- - ----- ------------ -------------- - ---------------- ----- --------- - ----- -- -- - -- ---------------- -- ---------- - ----- ------------ - ----- ------------------------------------------ -- -------------- - ----- -------- - ----- ------------------------------------ ---------------- ----- --------------------- ---------------------- ----- ----------- ------ --- ----- -- --- -- ---- --- ------------ -- ---- ------ ---------------------- -------------------- - - -- ----- --------------------- - -------------- -- - ----- ------- - ------------- - -------------------- - --- - --- ----- ------ - ------------- - ----------------------- ------------------ ----- ----- ------- - -------------------- ----- ----------- - --- --------------------------- --- ---- - - -- - - --------------- ---- - -------------- - ---------------------- - ------ ------------ -- ------ - -- ------ --------- ----- ---- ----------- ------- ------ ----------- ------------ ------------- ------- -- -- --- ------------- ------- ------------------- --------------- ---------------------------- --- ------------------- --------------------- - --------- --- ---- ------------- --------- ------- --- -- - ------ ------- ----------------------展开代码
上述代码中，我们使用了 useState 方法来管理订阅状态。我们还定义了一个 subscribe 方法来订阅推送通知。在 Button 组件中，我们为订阅按钮添加了一个单击事件。
注意：我们需要将 Your application server key here 替换为自己的应用服务器密钥。这个密钥可以从 Web 应用程序后台获取，例如 Firebase、OneSignal 等。
此外，我们还需要在 public 文件夹下创建一个 swPush.js 文件，用于处理推送消息。在 public 文件夹中创建 swPush.js 文件，并添加如下代码：
-- -------------------- ---- ------- ----------------------------- ------- -- - ----- ---- - ------------------ --------------------- ------- ---- ------------ ---------- ------ ---------------- ---------------------------------------------- - ----- ---------- ---- ------------------- ----- -------------------- ------ -------------------- -- -- ---展开代码
上述代码中，我们使用 self.addEventListener 方法来监听推送事件，也就是接收到推送消息后的事件。我们还显示了推送通知，并将图标（icon）和徽章（badge）设置为 icon-192x192.png。
步骤五：测试
现在，我们已经在 Next.js 中添加了 PWA 支持。我们可以通过以下方式测试我们的 PWA：
- 在终端中运行
npm run build && npm run start命令，启动 Next.js 应用程序。 - 打开浏览器，并访问
http://localhost:3000。 - 右键单击页面，选择“检查”。
- 在开发者工具中，选择“Application”选项卡，查看 Web App Manifest 和 Service Worker。
- 单击“Add to Home Screen”按钮，在主屏幕上添加应用程序。
- 断开网络，刷新页面。我们可以看到页面可以离线访问。
- 单击“Subscribe for Push Notifications”按钮，订阅推送通知。
总结
在这篇文章中，我们介绍了如何在 Next.js 中提供 PWA 支持。我们了解了 PWA 的优点、在 Next.js 中添加 PWA 支持的步骤。我们还学习了如何使用 Workbox 和 next-offline 库来添加 Service Worker 文件和推送通知功能。现在，您可以为您的 Next.js web 应用程序添加 PWA 特性，并提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ca101b5ad90b6d04196a79
