手把手教你使用Next.js实现一个PWA应用

原创

brzhang

修改于 2023-12-12 19:10:19

6180

修改于 2023-12-12 19:10:19

PWA（Progressive Web Apps），是一种可以提供类似原生应用体验的网页应用。简单的理解就是，可以让网页像原生应用那样在用户的设备上安装，并且能够实现离线工作、推送通知等功能，不知道你注意过没有，你偶尔会在chrome浏览器中可以看到一个这样的标志：

这就意味着这个web站点是支持了PWA的。那么为什么有越来越多的网站支持了这个特性呢？

1、我想主要是因为，PWA可以通过Service Workers，在没有网络的情况下运行，提高用户体验。

2、另外可以很方便的添加到主屏幕，类似于你装了一个App一样，这样等同于霸占了用户的屏幕，不需要用户去记住你的域名了，点击一下图标，而且前面也提到了，即便在网络不佳的情况下，都可以秒速加载，因为那些html，css，js等资源都打包好了在本地。

因此，使用PWA对用户体验的提升是显而易见的，所以，今天的主题是怎么样轻而易举做一个PWA应用。

学习本文，你将了解

如何使用Next.js 使用PWA应用的最佳姿势，实现一个 hack news。
了解 PWA 的底层原理

PWA 应用的基础原理

其实PWA的实现原理主要依赖于几个现代Web技术：

Web App Manifest：这是一个JSON文件，等会我们下面例子里面会给出，他的作用就是告诉浏览器关于你的Web应用的信息，并且允许用户将Web应用添加到他们的主屏幕上。仅此而以，当然，你可以可以指定应用的名称、图标、启动页URL、屏幕方向等配置信息。
Service Workers： Service Workers是一种在浏览器后台运行的脚本，即使在用户关闭网页之后也能运行。它们主要用于拦截和处理网络请求，包括可编程的缓存文件。这使得PWA能够在离线时提供内容，提高加载速度，并实现背景数据同步，等会我们会演示Service Workers的生成。

PWA 应用的一个大致的交互流程，可以使用下图来配合理解：

使用Next.js实现一个PWA应用

为什么又是Next.js，你可能会问你能不能来点别的，我想说的是，Next.js作为一个前后端通杀的框架，的确非常适合作为本文的教学，因为本文是要实现一个 hack news top news列表，自然而然是需要拿到 hack news 的列表的，为了防止跨域等等一些不确定性，通常是需要一个后端server提供接口的，为了演示一个PWA，去做一个全栈项目似乎又有点偏离主题，总之，正因为Next.js有如下好处：

可以让你专注入业务逻辑
免路由配置
快速实现接口
避免复杂的配置
最重要的！！，Next.js做了PWA的支持！

我们才选择了使用 Next.js来做这个演示。

操作环节

在命令行中运行以下命令来创建一个新的Next.js项目：

npx create-next-app hackernews-pwa
cd hackernews-pwa

为了使你的Next.js应用成为PWA，你需要安装一些额外的依赖，

npm install next-pwa

在你的Next.js项目中，使用上next-pwa插件，我们只修要将下面的代码贴入到里面即可。

/** @type {import('next').NextConfig} */
const withPWA = require('next-pwa')({
    dest: 'public'
})
const nextConfig = {}

module.exports = withPWA(nextConfig);

如下图所示，如果你将以后的项目转化为PWA支持的项目，这里同样适合你学习。

继续，我们创建一个public/manifest.json文件，这是PWA的应用清单，它定义了应用的名称、图标等：

{
  "short_name": "HackerNews",
  "name": "Hacker News PWA",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",// 注意这里命名一致
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/icons/icon-512x512.png",// 保持一致
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/",
  "background_color": "#ffffff",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#000000"
}

有了这个manifest.json文件之后，你需要在html上做点手脚，编辑 layout.tsx文件，告知manifest.json文件所在：

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      ++ <link rel="manifest" href="/manifest.json" />
      <body className={inter.className}>{children}</body>
    </html>
  );
}

还有,确保你有相应的图标文件在public/icons目录下，不然，到了你安装应用的时候，可能会导致失败，或者说应用没有图标。

如果你是基于其他的项目，比如纯净的手写 html+css，那么，你可能需要生成的Service Worker。但是现在你使用的Next.js，不需要手动去做，因为我们在next.config.js里面已经配置了PWA插件， next-pwa插件会自动为你生成Service Worker，所以你不需要手动添加，如图。

接下来，就运行下我们的应用，npm run dev，打开浏览器并访问http://localhost:3000。打开浏览器，我们并没有发现chrome上那个安装应用的图标，这是因为，Next.js开发模式下，为了热更新等一些特性，不支持，如图所示，主要是因为，Next.js在开发模式cache和precache被禁用了。

因此，为了测试PWA功能，你需要在生产模式下运行你的应用，因此你需要 npm run build。

npm run build && npm start

此时，我们在打开 localhost:3000，不出意外的话，我们就可以看到chrome 地址栏安装应用的图标了，我们可以点击安装试试看，这里因为没有写任何 css，所以，界面看起来不那么 ok，但是这个不是本文的重点。

点击安装，我们发现，应用成功被安装了。

总结

如果你正在做一个web 应用，不妨考虑一下，是否进一步优化，将其做成一个可以打包成 PWA 的应用，这样，用户可以将你的 web 应用安装到桌面上，这将会有一些显而易见的好处。

增加你应用的活跃指标，因为一个 web 标签是极其容易在用户不经意间就关闭的。
更快的启动速度带来的更好的体验从而增强用户粘性，用户的不良情绪可能会因为自身网络而迁怒到你的服务身上，而 PWA 的支持，意味着你基本杜绝了启动白屏。而且如果你的 web 服务如果完全就是工具性，无需联网的话，那就更 nice 了，简直就和 App 体验无太大差异。
进一步了解，PWA 可以发布到 Google 商店，你知道如何操作吗？
PWA 和跨平台有哪些相同点？有哪些差一点，各适用于什么场景，交给你来思考。

我正在参与2023腾讯技术创作特训营第四期有奖征文，快来和我瓜分大奖！

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

跨平台