什么是PWA？
渐进式Web应用程序（PWA）是一个网络应用程序，可提供与本机移动应用程序相似的体验。 PWA是使用现代Web技术建造的，例如服务工作人员，Web应用程序清单和推送通知，该通知使他们能够离线或网络连接差，可在用户的主屏幕上安装，并提供类似应用的体验。
PWA的主要好处之一是它们通过在浏览器中提供类似应用的体验来提高用户参与度和满意度的能力。 PWA还可以降低开发成本，并使吸引更多受众更容易，因为他们在各种设备和平台上工作。
如何在React中简单步骤创建PWA
如果您有兴趣在React中创建PWA，则需要一些简单的步骤开始：
步骤1：设置一个React项目
第一步是使用诸如Create React App之类的工具设置一个新的React项目。这将为您提供一个基本的React应用程序，您可以将其用作PWA的起点。
步骤2：安装必要的依赖项
接下来，您需要安装必要的依赖项来创建React中的PWA。这包括“ Workbox-Webpack-Plugin”和“ Web-Push”软件包。
npm install workbox-webpack-plugin web-push
yarn add workbox-webpack-plugin web-push
步骤3：创建服务工作者
服务工作者是一个在后台运行并处理诸如缓存资源和处理推送通知之类的任务的JavaScript文件。要在React中创建服务工作者，您可以使用“ Workbox-webpack-plugin”软件包。
在您的WebPack配置文件中，添加以下代码：
const WorkboxPlugin = require('workbox-webpack-plugin');
module.exports = {
// ...
plugins: [
new WorkboxPlugin.GenerateSW({
clientsClaim: true,
skipWaiting: true,
}),
],
};
这将创建一个服务工作者，该服务工作者缓存您的应用程序的资源并启用离线功能。
步骤4：创建网络应用清单
Web应用清单是一个JSON文件，可提供有关您的应用程序的信息，例如其名称，图标和主题颜色。要创建一个在React中的Web应用程序清单，您可以在公共文件夹中添加清单。
这是一个示例清单。JSON文件：
{
"name": "My PWA",
"short_name": "My PWA",
"icons": [
{
"src": "icon.png",
"sizes": "192x192",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"start_url": ".",
"display": "standalone",
"scope": "/"
}
步骤5：启用推送通知
要启用PWA中的推送通知，您需要设置推送通知服务，例如Firebase Cloud Messaging（FCM）。设置FCM后，您可以使用“ Web-Push”软件包来处理应用程序中的推送通知。
这是用于处理推送通知的示例代码：
const publicKey = 'your-public-key';
navigator.serviceWorker.register('/sw.js').then((registration) => {
registration.pushManager
.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(publicKey),
})
.then((subscription) => {
console.log('Subscription successful:', subscription);
console.log(JSON.stringify(subscription));
})
.catch((error) => {
console.log('Subscription failed:', error);
});
});
function urlBase64ToUint8Array(base64String) {
const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
const base64 = (base64String + padding)
.replace(/-/g, '+')
.replace(/_/g, '/');
const rawData = window.atob(base64);
const outputArray = new Uint8Array(rawData.length);
for (let i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
}
此代码注册服务工作者，并使用“ Web-Push”软件包订阅以推送通知。它还将公共密钥从base64字符串转换为uint8array。
步骤6：测试您的PWA
完成上述所有步骤后，您可以通过在浏览器或移动设备上运行PWA来测试PWA。您应该能够在主屏幕上查看应用程序的图标，并且应该脱机并支持推送通知。
结论
在本文中，我们了解了PWA是什么以及如何在React中创建一个。我们还学习了如何设置React项目，安装必要的依赖项，创建服务工作者，创建Web应用程序清单并启用推送通知。