进入PWA：创建一个可安装的Next.js应用程序-DEV365 开发者社区

渐进式Web应用程序（PWAS）近年来由于能够向多个设备的用户提供类似母语的体验，因此近年来获得了巨大的知名度。 Next.js是建立PWA的强大工具的框架之一。

Next.js是服务器端渲染的一个React框架，为创建快速有效的Web应用程序提供了坚实的基础。在本文中，我们将利用现代浏览器提供的PWA功能来探讨创建Next.js应用程序的过程。

什么是渐进式Web应用程序（PWA）？

渐进式Web应用程序是一种Web应用程序，它利用现代Web功能为用户提供类似应用的体验。 PWA由HTML，CSS和JavaScript等Web技术构建，可以通过浏览器访问而无需安装App Store。 PWA提供了几个优点，包括离线功能，推送通知以及将用户屏幕添加到快速访问的能力。

使用Next.js构建PWA

在深入创建可安装的Next.js应用程序的过程之前，让我们快速设置一个基本的next.js项目。
确保系统上安装了NODE.JS和NPM（节点软件包管理器）。然后，按照以下步骤：

克隆next.js启动器模板（或创建一个新的next.js应用程序）：
git clone https://github.com/achingachris/nextjs-starter.git
安装依赖项：
npm install
安装完成后，您可以运行开发服务器：
npm run dev

这将启动下一个.js开发服务器，您的应用程序将在http://localhost:3000中访问。

添加PWA功能：安装性

对于此演示，我们将使用NPM软件包[next-pwa](https://www.npmjs.com/package/next-pwa)进行安装，在项目的根部运行以下内容：

npm i next-pwa

安装完成后，更新next.config.js文件以具有以下内容：

const withPWA = require('next-pwa')({
      dest: 'public',
      register: true,
      skipWaiting: true,
      disable: process.env.NODE_ENV === 'development'
    })

    /** @type {import('next').NextConfig} */
    const path = require('path')

    const nextConfig = {
      reactStrictMode: true,
      sassOptions: {
        includePaths: [path.join(__dirname, 'styles')],
      },
    }

    module.exports = nextConfig

在上面的代码中，我们添加了next-pwa配置：

    const withPWA = require('next-pwa')({
      dest: 'public',
      register: true,
      skipWaiting: true,
      disable: process.env.NODE_ENV === 'development'
    })

withPWA函数包装提供的配置选项，并返回一个修改后的Next.js配置对象，其中包括PWA设置。该修改后的配置可以在next.config.js文件中使用，以启用您的下一个pwa功能。

使用此代码段，您可以轻松地配置next-pwa软件包，以将PWA功能添加到您的Next.js应用程序，包括服务工作者注册，缓存和离线支持。

创建`manifest.json`

接下来，在项目的根部创建一个名为public/manifest.json的新文件。

manifest.json文件是渐进Web应用程序（PWA）的关键组成部分。它提供了有关应用程序的元数据和配置信息，允许浏览器和设备适当地理解和显示PWA。这是manifest.json文件的主要功能：

应用程序元数据：manifest.json文件包含有关PWA的信息，例如其名称，简短名称，描述和图标。显示PWA时，浏览器和设备使用此元数据，包括在主屏幕，App Switcher或其他相关用户界面上。
启动行为：manifest.json文件定义了PWA的启动行为。例如，您可以指定启动URL，即启动时PWA打开的页面。您还可以定义显示模式，例如“全屏”，“独立”或“最小UI”，该模式确定了用户的PWA显示方式。
图标：manifest.json文件允许您为PWA指定不同尺寸和格式的图标。浏览器和设备使用这些图标以视觉表示应用程序。提供多种尺寸的图标对于确保PWA在各种设备和平台上看起来都不错很重要。
主题颜色：manifest.json文件包括一个主题颜色属性，该属性定义了PWA用户界面的配色方案。当PWA处于活动状态时，浏览器可以使用此颜色自定义浏览器UI元素的外观。
其他配置：manifest.json文件可以根据PWA的特定要求包括其他配置选项。例如，您可以定义方向，背景颜色，语言偏好等。

在清单中提供这些详细信息。JSON文件使浏览器和设备能够适当处理PWA，从而确保用户的一致且类似于本机的体验。此外，当用户选择安装PWA时，使用manifest.json文件，因为它提供了必要的信息，以在主屏幕上创建类似应用的快捷方式并以其独立模式启动PWA。

这是一个样本manifest.json：

{
        "name": "Next.js PWA Demo",
        "short_name": "pwaedemo",
        "description": "A Progressive Web App built with Next.js",
        "start_url": "/",
        "display": "standalone",
        "background_color": "#ffffff",
        "theme_color": "#000000",
        "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"
            }
        ]
    }

您可以在网站上找到图标https://www.iconarchive.com/，并将图标自定义为网站上的各种尺寸：https://www.simicart.com/manifest-generator.html/

更新`_document.js`

最后，更新_document.js文件：src/pages/_document.js：

    <link rel="manifest" href="/manifest.json" />
    <link rel="apple-touch-icon" href="/icon-512x512.png"></link>
    <meta name="theme-color" content="#000" />

完成文件：


    import { Html, Head, Main, NextScript } from 'next/document'

    export default function Document() {
      return (
        <Html lang="en">
          <Head>
            <link rel="manifest" href="/manifest.json" />
            <link rel="apple-touch-icon" href="/icon-512x512.png"></link>
            <meta name="theme-color" content="#000" />
          </Head>
          <body>
            <Main />
            <NextScript />
          </body>
        </Html>
      )
    }

测试可安装的Next.js pwatesting the soptarable next.js pwa

使用上述配置，您现在可以测试Next.js PWA。在项目目录中运行以下命令，以构建应用程序的优化生产版本：

`npm run build`

构建过程完成后，通过运行：

启动生产服务器

npm start

安装应用程序后，您可以在应用程序启动器上进行搜索：

结论

在本文中，我们探索了将next.js应用程序转换为可安装的渐进式Web应用程序（PWA）。通过利用Next.js的功能以及现代浏览器提供的PWA功能，我们可以为用户创建快速，高效且类似应用程序的体验。在多个设备和浏览器上测试您的PWA，以确保广泛的兼容性和最佳的用户体验。通过本文概述的步骤，您现在有知识开始构建自己的Next.js PWAS。愉快的编码！