PWA：学习、实施和爱上基于 NextJS 的 PWA，只需 2 分钟
当我开始我的网页开发之旅时，将网页应用转换为移动应用的概念一直让我感到不知所措。作为一名自学成才的开发者，我对如何做到这一点几乎一窍不通。我花了三个月的时间才意识到其中的优势以及背后的方法论。我认为现在是时候回馈社区了。那么，让我们从现在开始，用两分钟的时间学习这一切吧！
了解 PWA ✨
如果说移动应用和网页结合，那这个结合体就是 PWA。PWA 的核心在于帮助企业构建外观和体验与原生移动应用相似的 Web 应用，但使用的是 JavaScript、CSS 和 HTML 等 Web 技术。PWA 提供推送通知、离线支持等诸多功能。渐进式 Web 应用默认是安全的。PWA 的技术要求应用必须通过 HTTPS 协议才能正常运行。越来越多的公司开始采用 PWA，因为它可以显著缩短应用的开发、测试和维护时间。
Gartner预测，多达20%的公司将放弃其原生移动应用程序。他们认为，PWA将成为更可行的替代方案。
事实上，包括阿里巴巴在内的多家公司已经证明，与其开发多个原生应用，不如集中精力开发 PWA 应用，这样可以提高转化率和平均购买金额。既然我们的博客承诺在 2 分钟内用 NextJS 构建 PWA，那就让我们直接进入正题吧。
时间开始⏳
在这里，我将从零开始，但你完全可以将 PWA 添加到你现有的项目中。
yarn create next-app --typescript
我们已经从支持 TypeScript 的基本 NextJS 入门模板开始。现在，让我们添加一个能够帮我们完成后续工作的依赖项。
yarn add next-pwa @types/next-pwa
现在，我们需要manifest.json 文件来指定应用程序的元数据。
{
"name": "PWA Application with Next",
"short_name": "PWA",
"icons": [
{
"src": "/192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#000000",
"background_color": "#000000",
"start_url": "/",
"display": "standalone",
"orientation": "portrait"
}
您可以使用此方法为您的应用程序生成清单文件，或者复制上面的清单文件。您需要三张尺寸分别为 512 x 512、384 x 384 和 192 x 192 的图片，您可以从这里生成。将所有这些文件（图片和 manifest.json）放入 public 目录。
让我们_document.ts在 pages 目录下创建一个页面。你可以在文件中添加代码。
import Document, { Html, Head, Main, NextScript } from "next/document";
class NextDocument extends Document {
render() {
return (
<Html>
<Head>
<link rel="manifest" href="/manifest.json" />
<link rel="apple-touch-icon" href="/192x192.png"></link>
<meta name="theme-color" content="#000000" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default NextDocument;
我们快完成了！🥳 让我们最后添加新的配置next.config.js。
/** @type {import('next').NextConfig} */
const withPWA = require("next-pwa");
const nextConfig = {
reactStrictMode: true,
};
module.exports = withPWA({
pwa: {
dest: "public",
register: true,
skipWaiting: true,
},
nextConfig,
});
恭喜！🥳 你构建 PWA 应用的速度真快。希望你能在 2 分钟内完成，并且过程中没有遇到任何错误。
让我再补充一点，教你如何为你的应用程序添加离线支持。_offline.tsx在 pages 目录下创建一个文件，并将文件内容替换为以下代码：
import type { NextPage } from "next";
const Offline:NextPage = () =>{
return (<h1>You need to check your internet connection 😢 </h1>);
}
export default Offline;
务必添加一些炫酷的 UI 元素，让离线页面更具交互性，而不仅仅是一个简单的声明。下面是我为开源项目Fission做的一个贡献，即添加支持离线功能的 PWA（渐进式 Web 应用），Fission专注于为 Kubernetes 构建无服务器函数和工作流。
如果您在使用过程中遇到错误，导致应用程序无法正常运行，或者您只是想和我交流，欢迎随时通过LinkedIn联系我💕
文章来源：https://dev.to/aniket762/pwa-learning-implementing-and-loving-ft-nextjs-under-2-mins-il7