如何在 Next.js 中提供 PWA 支持

随着移动设备的普及，越来越多的网站正在转向 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

在终端中，运行以下命令：

--- ------- -------- ------- -----------------

步骤二：配置 PWA

接下来，我们需要配置 next.config.js 文件，以启用 PWA 功能。

在项目的根目录下创建一个 next.config.js 文件，并添加下列代码：

----- ------- - --------------------

-------------- - ---------
  ---- -
    ----- ---------
  --
---

withPWA 方法将 Next.js 配置与 PWA 功能一起使用。pwa 对象，其中的 dest 属性指定了 Service Worker 文件的输出目录。这里我们将 Service Worker 文件放置在 public 文件夹中。

步骤三：构建 Service Worker 文件

在构建 Service Worker 文件之前，我们需要使用 Workbox CLI 生成 Service Worker 脚本。Workbox 是一款 Google 开发的库，用于帮助构建 Service Worker 文件。

在终端中，运行以下命令：

--- ------- ------

这会启动一个交互式向导来帮助我们生成 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 库。在终端中，运行以下命令：

--- ------- ------------

接下来，我们需要将 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：

  1. 在终端中运行 npm run build && npm run start 命令，启动 Next.js 应用程序。
  2. 打开浏览器，并访问 http://localhost:3000。
  3. 右键单击页面，选择“检查”。
  4. 在开发者工具中，选择“Application”选项卡，查看 Web App Manifest 和 Service Worker。
  5. 单击“Add to Home Screen”按钮，在主屏幕上添加应用程序。
  6. 断开网络，刷新页面。我们可以看到页面可以离线访问。
  7. 单击“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

阅读全文

猜你喜欢

  • 使用 Mocha 和 Selenium 进行前端自动化测试的实践

    使用 Mocha 和 Selenium 进行前端自动化测试的实践 前端自动化测试是保证产品质量的重要一环。而Mocha和Selenium是目前前端自动化测试中最流行的框架。

    1 年前
  • 如何在 Vue.js 中使用 GraphQL？

    GraphQL 是一种用于 API 的查询语言，它可以让前端开发者更加灵活地请求数据。Vue.js 是一种流行的前端框架，它可以帮助开发者快速构建复杂的应用程序。在本文中，我们将介绍如何在 Vue.j...

    1 年前
  • Vue.js：使用 nextTick 解决 DOM 渲染异步更新的问题

    前言 在开发 Web 应用程序时，前端开发人员经常使用 Vue.js 这类流行的 JavaScript 框架。Vue.js 允许我们构建复杂的用户界面，但是,在某些情况下，数据更新可能不会立即更新视图...

    1 年前
  • 网络通信中的 Node.js 套接字技术介绍

    节点（Node.js）是一种运行在服务器端的 JavaScript 运行环境，可用于构建高性能的网络应用程序。在构建网络应用程序时，网络通信是必不可少的一部分。该文章将重点介绍节点（Node.js）中...

    1 年前
  • Jest 'Cannot find module' 错误的解决方法

    当使用 Jest 进行前端单元测试时，有时会遇到 "Cannot find module" 的错误，这是因为 Jest 无法找到你的代码中引用的某些模块。本篇文章将讲解造成该错误的原因以及如何解决它。

    1 年前
  • ES7 引入的 Object.values/Object.entries 方法

    在 JavaScript 中，对象是一种常见的数据类型，它非常灵活。在开发中，我们经常需要对对象进行操作，获取它们的属性和值。ES7 引入了两个新的方法 Object.values() 和 Objec...

    1 年前
  • 移动设备浏览器兼容性问题的解决方案

    在现代的前端开发中，移动端设备已经成为非常重要的一部分。但是，由于移动设备的多样性，不同的浏览器或操作系统之间会存在很多兼容性问题，这给前端工程师带来了很大的困扰。

    1 年前
  • 使用 TypeScript 开发可扩展的 Vue 组件

    引言 Vue.js 作为一款现代化的前端框架，在 Web 开发市场占据了不可或缺的地位。它以其轻量、易学、灵活等优点受到了越来越多开发者的青睐。而为了满足 Vue 组件的可靠性、扩展性和可维护性等需求...

    1 年前
  • Webpack打包时遇到Invalid configuration object 的解决方法

    在开发过程中，我们经常需要用到Webpack来对前端代码进行打包处理，这个工具可以将我们的代码进行压缩、合并、优化等操作，使得我们的网站可以快速加载并具有更好的性能表现，但是在使用Webpack打包的...

    1 年前
  • ES8 中的 Proxy 对象：自定义 JavaScript 的行为

    在 JavaScript 中，我们经常会遇到需要进行对象监听、拦截等操作的场景，这时候就需要用到一个新的对象：Proxy。Proxy 是 ES6 中新增的特性，而在 ES8 中，它的功能被进一步加强，...

    1 年前
  • Chai 断言错误：Expected NaN to equal 0

    在前端开发中，我们经常使用断言库来编写测试用例以保证代码的正确性。其中，Chai 是一个功能丰富的 JavaScript 断言库，它提供了多种风格的断言，适用于不同的项目需求。

    1 年前
  • Android Material Design 开发指南: 从头打造漂亮的应用

    引言 现如今，越来越多的应用开始将 Material Design 应用于它们的界面设计中，因为这种设计风格能够创造出简约而美观的视觉效果，同时满足了用户对于操作体验的需求。

    1 年前
  • Web Components 和自定义元素的关系

    前端技术的发展日新月异，现在已经出现了很多前端框架和库。但是，这些框架和库一般都是面向特定开发者或组织的，缺少通用性。Web Components 解决了这个问题，让开发者可以创建自己的可重用组件并在...

    1 年前
  • ES10 中的 Array 的.flat() 方法解决 NaN 的处理方法

    在前端开发中，处理数组是非常常见的一项任务。而在 ES10 中，新增了一个非常有用的方法，即 Array.flat() 方法，它可以将数组扁平化并返回一个新数组。除此之外， Array.flat() ...

    1 年前
  • 如何使用 Fastify 框架发布 RESTful API

    Fastify 是一个快速且低开销的 Node.js Web 框架。它以其异常快速的速度和低内存占用率而闻名。在本文中，我们将学习如何使用 Fastify 框架在 Node.js 中发布 RESTfu...

    1 年前
  • 完整的 Koa 多进程和负载均衡实现教程

    完整的 Koa 多进程和负载均衡实现教程 Koa 是一款轻量级的 Web 应用框架，基于 Node.js 平台。它提供了一系列强大而灵活的功能，使得我们可以轻松地构建高效可靠的 Web 应用程序。

    1 年前
  • 无障碍模式下，如何实现辅助选中功能

    无障碍模式是为了让所有人都能方便地访问网站而设计的。在无障碍模式下，我们需要考虑到一些特殊情况，比如视力受限的人如何使用网站。在本文中，我们将介绍如何使用 HTML 和 JavaScript 实现辅助...

    1 年前
  • Next.js 如何实现真正的服务器端渲染

    随着单页应用越来越流行，前端渲染已经成为了主流，然而前端渲染也存在一些弊端，比如 SEO 不友好、首屏渲染慢等问题。为了解决这些问题，服务器端渲染应运而生。在 Node.js 服务器端渲染技术中，Ne...

    1 年前
  • 深入理解 ECMAScript 2018 的 Symbol.asyncIterator

    ES2018 规范中引入了 Symbol.asyncIterator，它是一种新的 JavaScript 类型，用于定义异步迭代器方法。它允许我们使用异步方式来遍历集合中的元素，使得我们的代码更加灵活...

    1 年前
  • Enzyme 适合什么样的用户和项目

    在前端开发中，我们经常需要对组件进行测试。而针对 React 组件的测试，我们可以使用 Enzyme 来方便地模拟组件的行为并进行测试。Enzyme 适合那些希望提高组件测试效率以及代码质量的前端开发...

    1 年前

相关推荐

    暂无文章