मैं create-react-app का उपयोग एक्सप्रेस सर्वर।

create-react-app में एक पूर्व-कॉन्फ़िगर सर्विसवर्कर है जो स्थानीय संपत्तियों को कैश करता है (https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md #मेकिंग-ए-प्रोग्रेसिव-वेब-एप)।

जब मैंने अपने सर्वर पर प्रकाशित करने का प्रयास किया तो जिस समस्या का सामना करना पड़ा वह यह है कि service-worker.js फ़ाइल उपलब्ध थी, लेकिन जब इसे पंजीकृत करने का प्रयास किया गया तो मुझे अपने ब्राउज़र कंसोल में त्रुटियां मिल रही थीं।

फ़ायरफ़ॉक्स पर, मुझे यह त्रुटि मिली:

सेवा कार्यकर्ता पंजीकरण के दौरान त्रुटि:

लेखन त्रुटि: https://my-domain.com/service-worker.js पर सर्विसवर्कर स्क्रिप्ट कार्यक्षेत्र के लिए https://my-domain.com/ इंस्टालेशन के दौरान एक त्रुटि आई। पी>

क्रोम पर, मुझे अधिक वर्णनात्मक त्रुटि मिलती है:

सर्विस वर्कर पंजीकरण के दौरान त्रुटि: DOMException: सर्विसवर्कर को पंजीकृत करने में विफल: स्क्रिप्ट में एक असमर्थित MIME प्रकार ('text/html') है।

निश्चित रूप से, यदि मैं अपने डेवलपर टूल के नेटवर्क टैब में देखता हूं और service-worker.js फ़ाइल खोजता हूं, तो मैं देख सकता हूं कि HTTP हेडर में गलत MIME प्रकार है।

हालाँकि, मुझे समझ नहीं आया कि इसका MIME प्रकार गलत क्यों है?

54
MattSidor 30 मार्च 2018, 01:40

11 जवाब

सबसे बढ़िया उत्तर

मेरे एक्सप्रेस सर्वर एप्लिकेशन में, मेरे पास एक वाइल्डकार्ड (तारांकन / *) मार्ग है जो index.html पर रीडायरेक्ट करता है:

// Load React App
// Serve HTML file for production
if (env.name === "production") {
  app.get("*", function response(req, res) {
    res.sendFile(path.join(__dirname, "public", "index.html"));
  });
}

यह एक बहुत ही सामान्य डिजाइन पैटर्न है। हालांकि, इसका मतलब है कि अज्ञात पाठ फ़ाइलों के लिए कोई भी अनुरोध शुरू में index.html पर पुनर्निर्देशित हो जाता है, और इसलिए MIME प्रकार "text/html" के साथ वापस आ जाता है, भले ही वह वास्तव में एक जावास्क्रिप्ट या एसवीजी या किसी अन्य प्रकार की प्लेनटेक्स्ट फ़ाइल हो। .

मुझे जो समाधान मिला वह था service-worker.js पहले वाइल्डकार्ड रूट के लिए एक विशिष्ट मार्ग जोड़ना:

app.get("/service-worker.js", (req, res) => {
  res.sendFile(path.resolve(__dirname, "public", "service-worker.js"));
});
app.get("*", function response(req, res) {
  res.sendFile(path.join(__dirname, "public", "index.html"));
});

अब, जब ब्राउज़र service-worker.js खोजता है, तो एक्सप्रेस उसे सही MIME प्रकार के साथ लौटाएगा।

(ध्यान दें कि यदि आप वाइल्डकार्ड के बाद service-worker.js रूट जोड़ने का प्रयास करते हैं, तो यह काम नहीं करेगा क्योंकि वाइल्डकार्ड रूट ओवरराइड हो जाएगा।)

24
MattSidor 29 मार्च 2018, 22:40
self.addEventListener('fetch', function(event) {});

अपनी service-worker.js फ़ाइल में उपरोक्त कोड जोड़ें

-1
Arvind Kumar Shukla 22 सितंबर 2020, 10:17

मैं एक ही समस्या का सामना कर रहा था और मेरी कॉन्फ़िगरेशन से अन्य फायरबेस पुस्तकालयों को हटाने से मेरे लिए समस्या हल हो गई इसे जीथब पर जांचें


// Change this 
var firebaseConfig = {
    apiKey: "*********",
    authDomain: "**********",
    databaseURL: "*********",
    projectId: "***********",
    storageBucket: "************",
    messagingSenderId: "***********",
    appId: "************"
};

// To =>
var firebaseConfig = {
  apiKey: "*****************",
  projectId: "**********",
  messagingSenderId: "*******",
  appId: "***********"
};

0
Qais Khateeb 10 अप्रैल 2020, 22:54

स्क्रिप्ट में एक असमर्थित MIME प्रकार ('text/html') है। संसाधन लोड करने में विफल: net::ERR_INSECURE_RESPONSE (सूचकांक): 1 ध्यान में न आया (वादे में) DOMException: एक ServiceWorker पंजीकृत करने में विफल: स्क्रिप्ट में एक असमर्थित MIME प्रकार ('text/html') है।

Template.js रूट फ़ाइल के लिए कोड

export default ({ markup, css }) => {
  return `<!doctype html>
      <html lang="en">
        <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>MERN Marketplace</title>
          <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400">
          <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

          <style>
              a{
                text-decoration: none
              }
          </style>
          <link rel="manifest" href="./manifest.json">
        </head>
        <body style="margin:0">
            <div id="root">${markup}</div>
          <style id="jss-server-side">${css}</style>
          <script type="text/javascript" src="/dist/bundle.js"></script>
          <script>
          if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('/sw.js').then(function() { 
              console.log("Service Worker Registered"); 
            });
          }
          </script>
        </body>
      </html>`;
};
0
Ali The Flying Tiger 11 सितंबर 2018, 04:35

मेरे मामले में, Vue के लिए मुझे यहाँ वर्णित कमांड-लाइन टूल का उपयोग करके सार्वजनिक निर्देशिका में mockServiceWorker.js उत्पन्न करने की आवश्यकता है:

https://mswjs.io/docs/getting-started/integrate/browser

यह मेरे लिए नमूनों से स्पष्ट नहीं था। विशेष रूप से चलाने के लिए CLI कमांड है:

npx msw init ./public
1
D2TheC 25 अगस्त 2020, 13:35

सुनिश्चित करें कि सर्विस वर्कर फ़ाइल जेनरेट की गई है (Chrome DevTools -> Sources -> Filesystem)। यदि सेवा कार्यकर्ता फ़ाइल बिल्कुल भी उत्पन्न नहीं होती है तो आपको ऐसी त्रुटि प्राप्त हो सकती है (अपनी परिनियोजन स्क्रिप्ट की जाँच करें)।

2
Stamatis Rapanakis 25 जिंदा 2019, 22:04

प्रतिक्रिया: public/index.html

<script> 
  if ('serviceWorker' in navigator) {
    window.addEventListener('sw-cached-site.js', function() {
      navigator.serviceWorker.register('service-worker.js', {
        scope: '/',
      });
    });
  } 
  window.process = { env: { NODE_ENV: 'production' } };
</script>

नोट: पूरा ऐप/साइट सार्वजनिक/sw-cached-site.js

const cacheName = 'v1';
self.addEventListener('activate', (e) =>{
  e.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cache => {
          if(cache !== cacheName) { 
            return caches.delete(cache);
          }
        })
      )
    })
  )
});
self.addEventListener('fetch', e => { 
  e.respondWith(
      fetch(e.request)
        .then(res => {
            const resClone = res.clone();
            caches
                .open(cacheName)
                .then(cache => {
                    cache.put(e.request, resClone);
                }); 
                return res;
        }).catch(err => caches.match(e.request).then(res => res))
  );
});
2
Oscar Corona 16 जिंदा 2019, 20:41

यदि आप NodeJS पर काम कर रहे हैं, तो serviceWorker फ़ाइल सार्वजनिक फ़ोल्डर में होनी चाहिए। यदि आप सर्विसवर्कर को सार्वजनिक रूप से निर्यात करने के लिए वेबपैक का उपयोग कर रहे हैं, तो आपको 'कॉपी-वेबपैक-प्लगइन' का उपयोग करने की आवश्यकता है।

3
Hoang Duong 30 पद 2020, 10:18

मैं प्रतिक्रिया ऐप की सेवा के लिए nginx का उपयोग करता हूं और मैंने इस मुद्दे को nginx में माइम प्रकार जोड़कर हल किया:

http {
    include    mime.types; // <--- this line

    # another config details
}

साथ ही आपको mime.types फ़ाइल यहां मिल सकती है

4
zemil 9 नवम्बर 2019, 18:19

सर्विसवर्कर समर्थित माइम प्रकार 'टेक्स्ट/जावास्क्रिप्ट', एप्लिकेशन/जावास्क्रिप्ट और एप्लिकेशन/एक्स-जावास्क्रिप्ट हैं। अपने सर्वर फ़ाइल पर जाएं और सेट करें

    response.writeHead(201, {
        'Content-Type': 'application/javascript'
    });
6
WapShivam 13 मार्च 2020, 14:58

मुझे लगता है कि सेवा कार्यकर्ता फ़ाइल http://localhost:3000/service-worker.js पर मौजूद नहीं है, इसलिए सर्वर इसके बजाय index.html लौटा रहा है। फिर पंजीकरण फ़ंक्शन को पता नहीं है कि index.html फ़ाइल के साथ क्या करना है और आपको बताता है कि MIME- प्रकार सही नहीं है।

Service-worker.js फ़ाइल को public फ़ोल्डर में कॉपी करना एक त्वरित समाधान होगा ताकि जब आप http://localhost:3000/service-worker.js को हिट करें तो आपको ब्राउज़र में फ़ाइल दिखाई दे।

ChromeDev > एप्लिकेशन > सर्विसवर्कर्स पर जाना याद रखें और अनसब्सक्राइब को हिट करें। ताकि त्रुटिपूर्ण को दूर किया जा सके। कैशे को अक्षम करना भी याद रखें

12
Facundo Luis Rodriguez 5 जुलाई 2020, 12:37