Reactjs 将create react应用程序自动转换为PWA

我正在尝试构建一个web应用程序，通过单击web应用程序本身上的按钮（例如firebase或heroku上的主机），将create react app（CRA）应用程序转换为PWA。单击按钮后，是否可以在后台运行“npm运行构建”，然后自动下载“构建”文件（zip文件），然后用户可以转到netlify，将整个构建文件拖放到网站中，以删除其PWA

根据我的理解，服务人员在一个非常简单的PWA中是标准的（我只会有一个index.html和一个offline.html），理想情况下，如果用户也能够通过一个输入字段（不太确定它作为一个json文件是如何完成的）更新manifest.json来更新他们的应用程序的名称会更好

PS在这里相对较新的开发人员，所以我可能需要更多的解释谢谢

serviceworker.js

const CACHE_NAME = "version-1";
const urlsToCache = [ 'index.html', 'offline.html' ];

const self = this;

// Install SW
self.addEventListener('install', (event) => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then((cache) => {
                console.log('Opened cache');

                return cache.addAll(urlsToCache);
            })
    )
});

// Listen for requests
self.addEventListener('fetch', (event) => {
    event.respondWith(
        caches.match(event.request)
            .then(() => {
                return fetch(event.request) 
                    .catch(() => caches.match('offline.html'))
            })
    )
});

// Activate the SW
self.addEventListener('activate', (event) => {
    const cacheWhitelist = [];
    cacheWhitelist.push(CACHE_NAME);

    event.waitUntil(
        caches.keys().then((cacheNames) => Promise.all(
            cacheNames.map((cacheName) => {
                if(!cacheWhitelist.includes(cacheName)) {
                    return caches.delete(cacheName);
                }
            })
        ))
            
    )
});

manifest.json

{
    "short_name": "Weather App",
    "name": "Weather App PWA",
    "icons": [
        {
            "src": "/images/logo.png",
            "type": "image/png",
            "sizes": "1024x1024"
        }
    ],
    "start_url": ".",
    "display": "standalone",
    "theme_color": "#000000",
    "background_color": "#ffffff"
}