【ServiceWorker】The script has an unsupported MIME type ('text/html').エラー

問題

Reactのmain.tsxからService Workerを登録したのですが、表題エラーが発生したため対処方法を備忘します。

tsx.main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "@/styles/index.css";
import "maplibre-gl/dist/maplibre-gl.css";
import RouteProvider from "./router/RouteProvider.tsx";

if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("/src/serviceWorker.js", {
      updateViaCache: "none",
    })
    .then((registration) => {
      registration.update();
    })
    .catch((error) => {
      console.error("SW registration failed:", error);
    });
}

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <RouteProvider />
  </StrictMode>,
);

解決方法

registerメソッドで指定したservice worker.jsのパスが公開フォルダ直下になっていなかったことが原因でした。

main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "@/styles/index.css";
import "maplibre-gl/dist/maplibre-gl.css";
import RouteProvider from "./router/RouteProvider.tsx";

if ("serviceWorker" in navigator) {
  navigator.serviceWorker
+    .register("/serviceWorker.js", {
      updateViaCache: "none",
    })
    .then((registration) => {
      registration.update();
    })
    .catch((error) => {
      console.error("SW registration failed:", error);
    });
}

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <RouteProvider />
  </StrictMode>,
);

原因とエラーメッセージのギャップ

公開フォルダ直下のパスを指定していなかったことが原因でしたが、エラーメッセージが直結していないような気がしたので調べました。

ブラウザの検証ツールでserviceWorker.jsのリクエストを確認するとContent-typeがtext/htmlというレスポンスがありました。

指定したserviceWorker.jsが見つからない場合、理由はわかりませんが何もメッセージが無いhtmlファイルが返却されているようです。
今回viteを使っていたので何かしらのフォールバック機能が働いたのか、もしくはうまく働かなかったことが原因なのか、詳しいことまではわかりませんでした。

参考

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼