Logo

菜单

发布于 2026-01-06 2 阅读
0

基于 Next.js 的 PWA

基于 Next.js 的 PWA

什么是PWA？

PWA 代表渐进式 Web 应用。PWA Web 应用可以作为应用程序安装在任何设备上，并在该平台上像原生应用一样运行。

以前，你需要为 Web 应用、Android 应用和 iOS 应用分别维护一套代码库。但现在，借助 PWA，你可以将任何现有的 Web 应用或网站转换为可安装的应用，并在任何平台上使用。太棒了！

PWA 的益处？

  1. 您可以将其用作原生应用。
  2. 速度超快，性能可靠。
  3. 提供离线支持。
  4. 直接从网站安装或作为 SDK 分发。
  5. 构建和部署成本更低。

PWA示例

Twitter 是 PWA 的一个绝佳示例。访问https://twitter.com/，您会注意到地址栏右侧出现了一个图标。该图标表示 Twitter 网站可以安装。安装后，无论您使用手机还是电脑，屏幕上都会显示一个 Twitter 应用。打开它。正如您所见，您可以通过网站获得类似原生应用的体验。您还可以使用原生应用的功能，例如上传图片和视频。

将您的 Next.js 应用转换为 PWA：

那么，让我们先为现有的 Next.js 应用添加 PWA 功能。如果您还没有现成的项目，可以克隆这个仓库。这个 GitHub 仓库有两个分支，请确保克隆的是起始分支。

GitHub - anuraggharat/Next-PWA-Demo 启动器

或者直接在终端运行此命令来克隆存储库。

git clone -b starter https://github.com/anuraggharat/Next-PWA-Demo.git
Enter fullscreen mode Exit fullscreen mode

安装必要的依赖项

打开应用程序内的终端并安装next-pwa。

npm i next-pwa
Enter fullscreen mode Exit fullscreen mode

生成清单文件

清单文件是一个 JSON 文件，其中包含应用程序的元数据和图标。您可以自己编写清单manifest.json文件，也可以使用在线工具生成。这里我将选择一种工具。以下是所有在线清单生成器的列表，本教程中我将选择第一个。

https://www.simicart.com/manifest-generator.html/

https://manifest-gen.netlify.app/

https://app-manifest.firebaseapp.com/

添加您的应用的各种详细信息，例如名称、简称、主题颜色和描述。

您可以选择应用的显示类型。浏览器模式会在单独的浏览器中打开应用；独立模式会使其外观与原生应用相同；全屏模式会以全屏模式打开应用；极简界面模式与原生应用类似，但保留了一些浏览器功能。

清单文件

为了让您的应用被识别，它应该使用固定尺寸的图标。我下载了一个简单的图标，这里我将用它来演示。请尝试选择一个 512 像素的图标。上传图标后，点击“生成”。这将生成一个 zip 压缩文件，请解压缩该文件，并将所有内容复制到您应用的 public 目录中。将 manifest 文件重命名为manifest.json.

你的文件夹结构应该如下所示。

文件夹结构

您的清单文件应该类似于这样：

{
    "theme_color": "#3579f6",
    "background_color": "#ffffff",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "name": "Next-PWA",
    "short_name": "Next-PWA",
    "description": "A Demo for Next-PWA",
    "icons": [
        {
            "src": "/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icon-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

创建 _document.js 文件

现在，在你的页面目录中创建一个_document.js文件，并将以下代码粘贴到该文件中。**document.js文件是 Next.js 中的一个特殊文件，就像 _app.js 一样。如果你使用过 Next.js，你就会知道我们不需要自己编写 ` <body>,<script><body> <head>` 和 `<body>` 标签。但是，如果你打开浏览器的开发者工具，你会看到一大堆 `<body>` 和 `<head>` 标签，以及 `<body>` 和 `<head>` 标签。所有这些标签都是 Next.js 为我们生成的。`_app.js`_document.js允许我们自己控制这些标签。因此，如果你想添加指向外部 CSS 的链接或引用动画 JS 库的 `<script>` 标签，你可以创建一个_document.js文件并将它们添加到其中。这里我们使用_document.js`_app.js` 来引用我们的清单文件和图标。

_document.js文件已在服务器上加载并运行，因此请勿在此处添加事件处理程序。

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link rel="manifest" href="/manifest.json" />
          <link rel="apple-touch-icon" href="/icon.png"></link>
          <meta name="theme-color" content="#fff" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;
Enter fullscreen mode Exit fullscreen mode

在 next.config.js 文件中进行配置：

Next.js 提供了一个默认配置文件，我们可以在其中设置所有配置。打开 next.config.js 文件并粘贴以下代码。

const withPWA = require("next-pwa");

module.exports = withPWA({
  pwa: {
    dest: "public",
    register: true,
    skipWaiting: true,
  },
});
Enter fullscreen mode Exit fullscreen mode

在本地构建并测试 PWA：

配置完成后，我们就可以测试应用了。要在本地测试 PWA，首先需要创建一个新的构建版本。关闭终端，然后使用以下命令创建构建版本：

npm run build
Enter fullscreen mode Exit fullscreen mode

构建完成后，您会在公共文件夹中看到几个文件。

sw.js和workbox-1846d813.js

sw.js该文件是一个 Service Worker 文件。Service Worker 用于执行缓存、后台同步、提供原生功能和离线支持。Workbox 文件用于缓存资源。

好的，你已经创建了一个新的构建版本，现在让我们在本地运行这个构建版本。

npm run start
Enter fullscreen mode Exit fullscreen mode

访问localhost:3000，在地址栏右上角可以看到一个安装图标。点击该图标。现在你可以在电脑上找到并运行该应用了。

为您的网站添加网站图标

网站图标（favicon）是显示在网站标题栏左侧的小图标，它代表着您网站的身份标识。目前您的网站使用的是 Next.js 默认的网站图标，让我们把它换成我们自己的图标。请访问网站图标生成器网站。

favicon-generator.org

https://favicon.io/favicon-converter/

上传我们之前选择的图标并将其转换为网站图标（favicon）。下载压缩文件夹，解压缩，找到文件夹中的 favicon.ico 文件，并将其替换为我们项目公共文件夹中的网站图标。忽略解压缩文件夹中的所有其他文件。

在部署应用之前，让我们完成一些最后的配置。构建命令生成的文件不需要推送到 GitHub，因为这些文件是自动生成的，每次构建应用时都会重新生成。所以，当我们部署到托管平台时，平台会使用最新的配置为我们生成这些文件。现在，让我们把这些自动生成的文件添加到.gitignore文件中。如果你还不知道，.gitignore这个文件告诉 Git 在提交新代码时应该忽略哪些文件。

# Auto Generated PWA files
**/public/sw.js
**/public/workbox-*.js
**/public/worker-*.js
**/public/sw.js.map
**/public/workbox-*.js.map
**/public/worker-*.js.map
Enter fullscreen mode Exit fullscreen mode

同时，我们也需要在开发应用时禁用 PWA 的开发模式。为此，我们将更新 next.config.js 文件，内容如下。

const withPWA = require('next-pwa')

module.exports = withPWA({
  reactStrictMode: true,
  pwa:{
    dest:"public",
    register:true,
    skipWaiting:true,
    disable:process.env.NODE_ENV === 'development'
  }
});
Enter fullscreen mode Exit fullscreen mode

我们已添加了一个选项，如果环境是开发环境，则禁用 PWA 功能。是的，这就是将 PWA 添加到基本 Next.js 应用所需的全部步骤。现在，您可以将应用托管到您喜欢的托管平台上，并查看它在移动设备上的运行情况！

这就是最终版应用在我手机上的显示效果！

最终演示版本在此：https://next-pwa-demo-eight.vercel.app/

PWA 应用

以上就是如何将 Next.js 网站转换为 PWA 应用的方法。感谢阅读！如果您喜欢这类内容，请务必在 Twitter上关注我。我会定期发布关于 Web 开发和编程的内容。

文章来源：https://dev.to/anuraggharat/pwa-with-nextjs-5178
JavaScript 中的面向对象...
Axios：我的图书馆体验。