javascript - אפליקציית React PWA, דף ריק אחרי בנייה מחדש והפעלה. ערכי ה-hash של הקבצים השתנו

יש לי אפליקציית React שמשתמשת ב-Service Worker כדי להירשם כ-PWA.

(הערה: זה כרגע לא פועל כתוכנית PWA מותקנת)

לאחר בנייה חדשה של היישום, האפליקציה מציגה דף לבן ריק אלא אם תנקה את הקאש של הדפדפן.

השגיאה הבאה ניתנת למציאה בקונסולה:

סירב לבצע סקריפט מ-'https://[MYSITE]/static/js/main.5499eb74.js' מכיוון שסוג ה-MIME שלו ('text/html') אינו ניתן להוצאה לפועל, ובדיקת סוג MIME קפדנית מופעלת.

מביט בזה אני יכול לראות שתי דברים: ראשית, התגובה עבור main.5499eb74.js מחזירה את עמוד האינדקס (חלק מהשורות הושמטו למען קיצור):

<!doctype html>
<html lang="en">
<head>   
<meta name="description" content="Web site created using create-react-app"/>   
<link rel="manifest" href="./manifest.json"/>
<script defer="defer" src="./static/js/main.9f20fe6e.js"></script>
<link href="./static/css/main.3d186e11.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

מזה אני מבחין ש-HTML מכיל את main.9f20fe6e.js שהוא שונה מ-main.5499eb74.js

במהלך הבנייה ערך ה-hash של הקובץ השתנה (כפי שציפית), עם זאת, שירות העובד טוען מסמך אינדקס ישן עם main.5499eb74.js (תגובה לבקשה הראשונה, הוחזרה משירות העובד):

...
<script defer="defer" src="./static/js/main.5499eb74.js"></script>
...

הבעיה היא שאני לא בטוח איך לגשת לתיקון זה. או שהעובד של השירות צריך לטעון גרסה משומרת במטמון של main.5499eb74.js או שהוא צריך להבין שהוא חייב לטעון את הקובץ index מהשרת (או שניהם)

תשובה #1

נראה שהבעיה הייתה קשורה לשגיאה/אזהרה הזו ביומן הבנייה (שלא שמתי לב אליה כי אנחנו משתמשים ב-CI:

/static/js/main.da1f27cc.js is 6.13 MB, and won't be precached. Configure maximumFileSizeToCacheInBytes to change this limit.

התקנת והגדרת maximumFileSizeToCacheInBytes ב-craco-workbox פתרה את הבעיה הזו

תשובה #2

התנהגות זו נראית כי עובד השירות שומר במטמון את 'index.html' שמכיל הפניות לחלקי הבנייה הקודמים שלך.

הפנה לחוט SO הבא כדי להבין איך לתקן את זה.

איך לטפל במטמון של קובץ index.html עם Service Worker?