我如何使我的应用程序与react js和vite，一个PWA?

Question

我一直在阅读一些关于它，但我不知道如何正确配置我的reactjs网站转换为PWA

我在项目的根目录下创建了一个workbox-config.js文件和一个清单。. json文件在我的App.js的顶部，但我不知道还能做什么

workbox-config.js文件的内容是:

module.exports = {
"globDirectory": "dist/",
"globPatterns": [
"**/*.{html,js,css,svg,png,jpg,jpeg,gif,webp}"
],
"swDest": "dist/sw.js",
"clientsClaim": true,
"skipWaiting": true,
"navigateFallback": "/index.html",
"navigateFallbackWhitelist": [/^/(about|contact)$/],
"runtimeCaching": [
{
"urlPattern": /^https://fonts.googleapis.com/,
"handler": "StaleWhileRevalidate"
},
{
"urlPattern": /^https://my-api.com/,
"handler": "NetworkFirst",
"options": {
"cacheName": "api-cache",
"networkTimeoutSeconds": 10
}
}
]
};

Answer 1

您需要安装vite-plugin-pwa并按本文所述修改vite.config.js文件:

"把你的react + vite应用变成PWA">