PWA与下一个JS 13-DEV365 开发者社区

什么是PWA？

渐进式Web应用程序（PWAS）是使用我们可能都知道和喜欢的Web技术构建的应用程序，例如HTML，CSS和JavaScript。但是它们具有实际的本机应用程序的感觉和功能。

在我们必须管理Web，Android和iOS应用程序的不同代码库之前。但是PWA使开发人员的生活变得容易。现在，我们可以管理所有具有单个代码库的人。我们可以将任何网站或Web应用程序变成可安装的移动应用程序，并将其用于不同的平台。

PWA的好处

具有跨平台兼容性。
它们快速轻巧。
他们与其他网站不同。
推送通知功能。
低维护成本。

PWA的示例

Twitter是PWA的一个很好的例子，其快速加载时间，响应式设计和脱机功能。可以在URL https://twitter.com/上访问Twitter的PWA版本，并允许用户浏览和与应用程序般的界面中的Tweet浏览和交互。 Twitter PWA还支持推送通知，使用户能够实时接收更新和警报。 PWA旨在为包括台式机和移动设备在内的所有设备访问和优化，使用户可以轻松保持连接并在旅途中与他们的追随者互动。

你要学什么？

您可以使用Startch的下一个JS创建PWA。
您可以使用PWA转换现有应用。

下一个JS PWA样板

如果您更像是代码优先的人，则可以在此处找到现成的样板。但是，我仍然建议阅读本文的其余部分，以更好地了解一切如何一起工作。

GitHub - sabbirzzaman/next-pwa

或仅运行此命令以克隆终端中的存储库。（打字稿）

https://github.com/sabbirzzaman/next-pwa.git

javascript

git clone -b with-js https://github.com/sabbirzzaman/next-pwa.git

让我们创建一个PWA

首先打开终端并创建下一个JS项目。

npx create-next-app@latest

生成清单文件

清单文件是一个JSON文件，可提供有关PWA的元数据和配置详细信息。它包含诸如应用程序名称，图标，启动URL，主题颜色和显示模式之类的信息。 Web浏览器使用清单文件来识别和安装PWA，从而使其表现得更像用户设备上的本机应用程序。浏览器还使用了清单文件在启动应用程序时显示PWA的名称，图标和Splash屏幕。

您可以简单地在public文件夹中创建一个manifest.json文件，然后将下面的清单复制并根据您的需求修改名称，颜色，描述等。或者，您也可以从此网站为您生成一个新的：simicart

{
  "theme_color": "#3b82f6",
  "background_color": "#f8fafc",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "name": "Your App Name",
  "short_name": "your_app_name",
  "description": "A PWA boilerplate with Next Js TypeScript",
  "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"
    }
  ]
}

这就是创建manifest.json文件后的公共文件夹的外观。

创建_ document文件

接下来，您必须创建一个_document.js，_document.jsx或_document.tsx在页面目录中归档并粘贴以下代码。

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.png"></link>
        <meta name="theme-color" content="#fff" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Next.js中的_document.tsx文件用于自定义用户浏览器提供的HTML文档，使开发人员可以添加自定义的HTML头部元素并修改页面的HTML结构。它仅在页面初始渲染期间仅在服务器端执行，通常用于添加服务器端渲染支持CSS-IN-JS库或将全局样式和脚本添加到页面。

。

下一个PWA配置

在Next.js中，开发人员可以使用默认配置文件Next.Config.js配置其项目。只需打开文件并粘贴以下代码即可。

注意：如果您的项目不在打字稿中，则可以Ingore the /** @type {import('next').NextConfig} */系列。

/** @type {import('next').NextConfig} */

const withPWA = require('next-pwa')({
  dest: 'public',
  register: true,
  skipWaiting: true,
});

module.exports = withPWA({
  reactStrictMode: true,
});

一些Gitignores

创建构建后，您将在public文件夹中看到几个自动生成的.js文件。您无需将它们保留在GitHub中。为了忽略您可以在.gitingore文件中粘贴以下行的人。

# 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

本地构建和测试PWA

完成配置过程后，您可以测试下一个.js应用程序。要在本地测试PWA，您需要创建一个新的构建。停止终端并使用以下命令创建一个构建：

npm run build

现在您已经创建了一个新构建，可以在本地运行。

npm run start

好吧，所以现在您已经创建了一个新的构建，让我们在本地机器上进行测试！在您最喜欢的浏览器中前往http://localhost:3000，并留意位于URL盒右角的可安装图标。单击那个坏男孩，您应该能够在计算机上搜索该应用并像Pro一样运行！

就是这样，伙计们！现在，您知道如何将您的下一个网站变成一个花哨的PWA应用程序。欢呼！