TA貢獻(xiàn)1860條經(jīng)驗(yàn) 獲得超8個(gè)贊
CRA 不會(huì)使用默認(rèn)安裝命令直接為 Service Worker 提供支持，因?yàn)殚_(kāi)發(fā)人員可能不會(huì)將應(yīng)用程序制作為 PWA。因此，他們決定將其保留為可選。和我一樣，如果您其他人想在創(chuàng)建新應(yīng)用程序時(shí)安裝 Service Worker，請(qǐng)首選：
npx?create-react-app?my-app?--template?cra-template-pwa
而不是默認(rèn)的npx create-react-app my-app.?
TA貢獻(xiàn)1998條經(jīng)驗(yàn) 獲得超6個(gè)贊
如果您已經(jīng)有現(xiàn)有項(xiàng)目并且想要遷移到新版本的 CRA，您可以按照以下步驟操作：
1 使用 Service Worker 模板在計(jì)算機(jī)上的某個(gè)位置創(chuàng)建一個(gè)新的 CRA：
npx create-react-app my-app --template cra-template-pwa
2 將 service-worker.js 從新創(chuàng)建的應(yīng)用程序復(fù)制到您的 src 目錄中
3 將 package.json 中的“workbox-*”依賴項(xiàng)復(fù)制到 package.json 依賴項(xiàng)中
4 （可選）如果您需要 web-vitals，請(qǐng)將 web-vitals 依賴項(xiàng)從 package.json 復(fù)制到 package.json
并且不要忘記再次運(yùn)行“yarn install”或“npm install”
就是這樣
TA貢獻(xiàn)1845條經(jīng)驗(yàn) 獲得超8個(gè)贊
如果您已經(jīng)存在沒(méi)有模板的反應(yīng)項(xiàng)目，則另一種解決方法：
轉(zhuǎn)到文件夾index.html中的文件public并在其中添加<script>標(biāo)簽，您可以使用以下方式service worker從<script>標(biāo)簽中注冊(cè)index.html：
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/serviceworker.js")
.then(e => console.log("Service worker registered", e))
.catch(e => console.log("service worker failed", e));
}
這樣您就可以緩存您的公共圖標(biāo)文件和圖像。
TA貢獻(xiàn)1834條經(jīng)驗(yàn) 獲得超8個(gè)贊
你需要運(yùn)行這個(gè)命令
npx create-react-app your-app-name --template cra-template-pwa
代替
npx create-react-app your-app-name
TA貢獻(xiàn)1884條經(jīng)驗(yàn) 獲得超4個(gè)贊
運(yùn)行此命令“npx create-react-app your-app-name --template cra-template-pwa”而不是“npx create-react-app your-app-name”
TA貢獻(xiàn)1773條經(jīng)驗(yàn) 獲得超3個(gè)贊
遷移全棧應(yīng)用程序時(shí)，請(qǐng)確保執(zhí)行“bukso”中的所有步驟以及：
將 serviceWorkerRegistration.js 文件添加到 src 的根目錄中，就像 service-worker.js 一樣
構(gòu)建您的全棧應(yīng)用程序，使用“npm install --globalserve”安裝靜態(tài)服務(wù)器
轉(zhuǎn)到客戶端目錄并使用“serve -s build”在靜態(tài)創(chuàng)建的構(gòu)建文件夾上運(yùn)行服務(wù)器
舉報(bào)