前言
现在越来越多的网站开始使用 PWA（Progressive Web App），不仅仅是因为 PWA 可以带来便利的离线使用和更快的加载速度，更重要的是，使用 PWA 可以为网站增加自适应特性。
本文将介绍如何在 Next.js 中使用 PWA，以及如何利用 PWA 增加网站自适应特性。
什么是 PWA
PWA 可以理解为一组 Web 技术的综合体，它可以帮助网站模拟原生应用程序的行为，从而为用户带来更好的体验。PWA 常见的特性包括：
- 可靠性：PWA 可以通过 Service Worker 缓存网站内容，使得即使离线也可以访问这些内容。
- 快速加载：PWA 可以通过预缓存和预加载来加速网站的加载速度。
- 提示用户安装：PWA 可以提示用户将网站安装在桌面上，就像安装原生应用程序一样。
- 自适应：PWA 可以根据用户的设备和网络情况，动态地调整网站的展示方式。
Next.js 中使用 PWA
创建 Next.js 应用程序
首先我们需要创建一个 Next.js 应用程序，可以使用以下命令：
npx create-next-app my-app cd my-app npm run dev # or yarn dev
安装必要的依赖
我们需要先安装相关依赖：
npm install next-pwa npm install swr
其中，next-pwa 是 Next.js 的 PWA 插件，swr 可以帮助我们缓存网站数据，从而加快网站加载速度。
配置 PWA
在 next.config.js 文件中，我们需要添加如下配置：
-- -------------------- ---- -------
----- ------- - -------------------
----- --------- - ---------------------------------
-------------- - ---------
---- -
----- ---------
-------- -------------------- --- --------------
--
----------
--其中，withPWA 是对 next.config.js 的拓展，它会在打包时生成一个 Service Worker 文件。pwa.dest 表示生成的 Service Worker 文件的路径，这里设为 public。pwa.disable 表示在开发模式下是否启用 PWA，我们可设置为只在生产环境下启用。
配置 swr
我们可以在 lib/config/swrConfig.ts 中配置 swr 缓存策略：
-- -------------------- ---- -------
------ ------- -
----------------- ------
------------- ------- -
------ ---------------------- -- -
-- --------- -
----- --- ---------------
-
------ ----------
--
--
-这里的 dedupingInterval 表示相同请求的缓存时间（ms），fetcher 是处理数据的函数，它会被 swr 执行。
编写 PWA 代码
我们可以在 _app.tsx 中编写 PWA 代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - -------- - ---- ----------
------ - --------- - ---- -----
------ - -------- - ---- ----------
------ ---- ---- -----------
----- ---- ------------------ - -- ---------- --------- -- -- -
------------ -- -
-- ---------------- -- ---------- -
------------------------------ -
------ ----
--
-
-- ---
------ -
--
------
----- --------------- ---------------------------- ------------------ --
-------
-----------
---------- -------------- --
------------
---
-
-
------ ------- ---这里的 register 函数会用于注册 Service Worker，{scope: '/'} 表示 Service Worker 可以缓存整个网站。<SWRConfig> 可以用来传递 swr 的配置。
配置离线页面
我们需要在 public 目录下创建 offline.html 文件，用于离线使用时的展示页面。
编写自适应样式
我们可以根据用户的设备和网络情况，动态地调整网站的展示方式，比如缩短图片，去除动画等等。
-- -------------------- ---- -------
------ ----- ---- ------------
----- -------- -------- - -- -- -
----- - ----- ----- - - ---------------
-----------------------------------
-
-- ------- ------ ----------- -- ----------
-- ------- ------ ---------------------
----- -------- - -------------------------- --------
----- --------- - -------- - --- - ---
------ -
------
----------
------- ------
-----------------
------------------
--
-
-这里的 useMediaQuery 是用于判断用户设备的函数，useSwr 是用于数据请求的 Hooks。
总结
通过使用 PWA，我们可以帮助网站实现自适应，为用户带来更好的体验。在 Next.js 中使用 PWA 具体步骤如下：
- 创建 Next.js 应用程序
- 安装必要的依赖
- 配置 PWA
- 配置 swr
- 编写 PWA 代码
- 配置离线页面
- 编写自适应样式
PWA 还有很多其他的特性，值得我们去学习和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6485efc348841e98944a1bc6