发表新帖
发表新帖

Service Worker registration error: Unsupported MIME type ('text/html')

前端 未结
关注
12 1248
梦如初夏
梦如初夏 2020-12-05 17:44

I\'m using create-react-app with an express server.

create-react-app has a pre-configured ServiceWorker that caches local assets (https://github.com/fac

相关标签:
12条回答
  • 再見小時候
    2020-12-05 18:07

    I use nginx to serve react app and I resolved this issue adding mime types to nginx:

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

    # another config details
}

    Also you can find mime.types file here

    0 讨论(0)
  • 没有蜡笔的小新
    2020-12-05 18:08

    In my case, for Vue I needed to generate the mockServiceWorker.js in the public directory using the command-line tool as described here:

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

    This was not clear from the samples to me. Specifically the CLI command to run is:

    npx msw init ./public
    0 讨论(0)
  • 没有蜡笔的小新
    2020-12-05 18:09

    The script has an unsupported MIME type ('text/html'). Failed to load resource: net::ERR_INSECURE_RESPONSE (index):1 Uncaught (in promise) DOMException: Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html').

    Code for template.js root file 

    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 讨论(0)
  • 谎友^
    2020-12-05 18:10

    Make sure that the service worker file is generated (Chrome DevTools -> Sources -> Filesystem). You may receive such an error if the service worker file is not generated at all (check your deployment script).

    0 讨论(0)
  • 时光取名叫无心
    2020-12-05 18:10 
    self.addEventListener('fetch', function(event) {});

    Add Above code on your service-worker.js file

    0 讨论(0)
  • 清酒与你
    2020-12-05 18:17

    In my Express server application, I have one wildcard (asterisk / *) route that redirects to 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"));
  });
}

    This is a very common design pattern. However, it means that any requests for unknown text files initially get redirected to index.html, and therefore return with the MIME type of "text/html", even if it's actually a JavaScript or SVG or some other kind of plaintext file.

    The solution I found was to add a specific route for service-worker.js before the wildcard route:

    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"));
});

    Now, when the browser looks for service-worker.js, Express will return it with the correct MIME type.

    (Note that if you try adding the service-worker.js route after the wildcard, it won't work because the wildcard route will override.)

    0 讨论(0)
 看不清?
提交回复
热议问题