PWA（Progressive Web App）是一种新型的 Web 应用程序，它能够给用户提供更好的体验，如离线访问、本地缓存、推送通知等等。使用 PWA 技术，开发者可以将 Web 应用程序变成类似于原生应用的体验，无需安装。
Next.js 是一个流行的 React 框架，它提供了 SSR（服务端渲染）和自动代码分割等丰富的特性。在 Next.js 中开发 PWA，能够让我们更加轻松地实现 PWA 的各种特性。
这篇文章会介绍在 Next.js 中开发 PWA 的完整教程，内容详细、有深度，同时也会提供示例代码和具体指导意义。
1. 配置基本的 PWA 特性
要开发 PWA，我们首先需要让应用能够离线访问、在本地缓存资源、添加到主屏幕等等基本特性。
1.1 安装依赖
我们首先需要通过 npm 安装依赖：
npm install --save next-offline next-manifest dotenv
next-offline：提供 PWA 的离线访问能力，能够生成 Service Worker 等代码。next-manifest：用于生成 manifest.json 文件，配置应用的图标、名称等信息。dotenv：作为常见的环境变量管理工具，能够帮助我们存储敏感信息。
1.2 配置离线访问
在我们的 Next.js 应用中，我们需要创建一个名为 next.config.js 的配置文件，加入以下代码：
-- -------------------- ---- -------
----- ----------- - ------------------------
-------------- - -------------
-- -- ------- ----------------
------------ -
--------------- -
-
----------- -----------------------
-------- -------------
--
-
----------- ------------
-------- ---------------
-------- -
---------------------- ---
------------------ -
--------- --- -----
--
--
--
--
--
-- ---------
----------- ------
-- ---- ------- ------------
--------- -----------------------------
---这里我们配置了使用 next-offline 插件来生成 Service Worker，在离线时，在 Service Worker 中的规则如下：
- 对于图片、CSS 等静态资源，优先从缓存中找，找不到再从网络中请求；
- 对于其他网络资源，优先从网络中请求，请求失败则从缓存中找。
1.3 配置添加到主屏幕
在我们的 Next.js 应用中，我们还需要在 pages/_document.js 文件中的 <head> 里添加以下代码：
<link rel="manifest" href="/manifest.json" /> <meta name="theme-color" content="#ffffff" />
manifest.json 是一个用于配置 PWA 应用信息的文件，包含了应用的名称、图标、主题色等信息，我们将在下一步中生成这个文件。
其中，theme-color 的值表示应用的主题色。在 Android 上，添加到主屏幕后该颜色将会参与应用的主题色，iOS 上则不支持该特性。
1.4 配置 manifest.json
在我们的 Next.js 应用中，我们需要在 next.config.js 中加入以下代码，创建 manifest.json 文件：
-- -------------------- ---- -------
----- -------------- - -----------------------------------
-------------- - ------------------ -
--------------- -------- -
----- --- - -----------------------
----- ------ - -------------------- --- -------------
--------------------
--- ----------------
--------- ----------------------------------------------
----------- ------------------------ -- ---
---------------- -----
--
--
------ -------
--
---在上面的代码中，我们用到了 webpack-manifest-plugin 插件，用于生成 manifest.json 文件。
2. 配置 PWA 的推送通知
另一个常见的 PWA 特性就是推送通知。在 Next.js 应用中，我们可以使用 Firebase 来实现推送通知的功能。
2.1 创建 Firebase 项目并添加密钥
我们首先需要创建 Firebase 项目，并在项目设置中添加 Web 应用程序。添加完成后，我们可以在 Firebase 控制台获取到应用的配置信息，包括 App ID、API Key 等等。
在 next.config.js 中，我们可以通过下面的代码来引入 Firebase 的配置：
-- -------------------- ---- ------- ----- ------------ - - ------- ----------------------------- ----------- --------------------------------- ---------- -------------------------------- -------------- ------------------------------------ ------------------ ----------------------------------------- ------ ---------------------------- -------------- ------------------------------------ --
这里将 Firebase 的配置存储在 .env 文件中，确保不会被提交到代码仓库中：
FIREBASE_API_KEY=YOUR_API_KEY FIREBASE_AUTH_DOMAIN=YOUR_AUTH_DOMAIN FIREBASE_PROJECT_ID=YOUR_PROJECT_ID FIREBASE_STORAGE_BUCKET=YOUR_STORAGE_BUCKET FIREBASE_MESSAGING_SENDER_ID=YOUR_MESSAGING_SENDER_ID FIREBASE_APP_ID=YOUR_APP_ID FIREBASE_MEASUREMENT_ID=YOUR_MEASUREMENT_ID
2.2 配置推送通知
在我们的 Next.js 应用中，我们还需要安装 Firebase 的 JS SDK 和 Cloud Messaging。可以使用 npm 来进行安装：
npm install --save firebase firebase/messaging
接着，在我们的 Next.js 应用中，我们需要创建一个名为 public/firebase-messaging-sw.js 的文件，其中包含以下代码：
-- -------------------- ---- -------
--------------------------------------------------------------------------
--------------------------------------------------------------------------------
----- -------------- - -
------- ---------------
----------- -------------------
---------- ------------------
-------------- ----------------------
------------------ ---------------------------
------ --------------
--
---------------------------------------
----- --------- - ---------------------
----------------------------------------------- -- -
---------------------
----- ------------ - ---------------------
----- ----------------- - -------------------
----- ------------------- - -
----- ------------------
----- ------------------
--
------ ----------------------------------------------------- ---------------------
---这里定义了一个名为 firebase-messaging-sw.js 的 Service Worker，用于处理 Web 推送通知。可以将该文件看作是一个监听 Web 推送事件的文件，将用户从服务端发送过来的推送信息显示在 Web 页面上。
要实现推送通知的配置，我们还需要在 pages/_app.js 中加入以下代码：
-- -------------------- ---- -------
------ -------- ---- ---------------
------ ---------------------
------------------- -
------------------------
------- ---------------
----------- -------------------
---------- ------------------
-------------- ----------------------
------------------ ---------------------------
------ --------------
---
---------------------------------------- -- -
-------------------- --------- -- ---------
---
-这里的代码将 Firebase 的 JS SDK 引入了我们的组件中，并监听了 Firebase 的 onMessage 事件，当 Firebase 服务端发送 Web 推送通知请求时会触发该事件。
最后，在 Firebase 控制台中配置推送通知的主题和内容即可完成推送通知配置。
3. 配置 PWA 的其他特性
在上面的部分中，我们已经讲解了如何在 Next.js 中开发基本的 PWA 特性和推送通知。此外，PWA 还有许多其他特性，比如背景同步、预取、API 离线访问等等。
这些特性的实现，可以根据具体业务场景进行设计，如果要展开讲解，需要更加深入、详细地研究 PWA 的各项特性，超出了本文的讨论范围。
总结
以上就是本文中介绍的在 Next.js 中开发 PWA 的完整教程，涵盖了 PWA 的离线访问、添加到主屏幕、推送通知等基本特性，同时也提供了代码示例和具体指导意义。
在实际项目中，我们可以根据 PWA 的特性和业务场景进行设计和实现，为用户提供更好的 Web 应用程序体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c5f79968c7c53b077179d