web-dev-qa-db-ja.com

登録時のServiceWorker MIMEタイプエラー（ 'text / html'）（React）

現在の動作：

以下のエラーのため、Service Workerが登録されません

予想される動作：

サービスワーカーの登録

細部

Githubの問題として投稿： https://github.com/facebook/create-react-app/issues/8593

Service Workerが登録しようとすると、次のエラーが発生します。

サービスワーカーの登録中のエラー：
DOMException：ServiceWorker for scope（ ' http：// localhost：3000 / '）with script（ ' http：// localhost：3000/sw.js 'の登録に失敗しました）：
スクリプトにサポートされていないMIMEタイプ（ 'text/html'）があります。コンソール。 @ index.js：1

sw.jsは、Chrome開発ツールの[ソース]タブに表示されていますが、登録されていません。

反応バージョン：16.12.0

エラーメッセージ：

Service Worker登録中のエラー：DOMException：
ServiceWorkerをスクリプト（ ' http：// localhost：3000/sw.js '）でスコープ（ ' http：// localhost：3000 / '）に登録できませんでした：
スクリプトにサポートされていないMIMEタイプ（ 'text/html'）があります。

Chromeの[検査]タブでServiceWorkerが失敗しました：  Chrome Error

再現する手順：

Reactでサービスワーカーを登録します（登録解除から登録に変更するか、SWコードを直接index.htmlに配置するか、より単純なSWを使用します。devまたはビルド反応アプリ）

SWの例：

export function register() {
  if ("serviceWorker" in navigator) {
    navigator.serviceWorker
      .register("./sw.js")
      .then(function(registration) {
        // Successful registration
        console.log(
          "Hooray. Registration successful, scope is:",
          registration.scope
        );
      })
      .catch(function(error) {
        // Failed registration, service worker won’t be installed
        console.log(
          "Whoops. Service worker registration failed, error:",
          error
        );
      });
  }
}

また、 ` http：// localhost：3000/sw.js の場合、ReactのデフォルトSWを使用すると、このHTMLが返されます。

 enter image description here

上記のコードサンプルを使用すると、 http：// localhost：3000/sw.js にアクセスしようとすると、index.html（デフォルト404、 http：// localhost：3000 / ）が返されます。

推奨される修正：

sw.jsをパブリックフォルダに移動すると、次のエラーが発生します：  Public folder error

Reactでブラウザーに提供されたときに具体的にtext/htmlのヘッダーを（application/javascriptからsw.jsに）変更する方法はありますか？

ReactでのカスタムserviceWorkersの登録に関するいくつかのMediumの記事を試してみましたが、役に立ちませんでした...

javascripthtmlnode.jsreactjsservice-worker
7
Sean Moody

サーバーサイドでsw.jsファイルを処理するコードを記述できます。以下は、sw.jsファイル要求をインターセプトしてフォルダーから読み取り、ブラウザーに送信するnodejsコードです。

app.get('/sw.js', (req, res) => {
  if (__DEVELOPMENT__) {
    http.get('http://localhost:4001/static/build/sw.js', (r) => {
      res.set({
        'Content-Type': 'text/javascript',
        'Cache-Control': 'max-age=0, no-cache, no-store, must-revalidate'
      });
      r.setEncoding('utf8');
      r.pipe(res);
    }).on('error', (e) => {
      console.error(`Error in sending sw.js in dev mode : ${e.message}`);
    });
  } else {
    res.setHeader('Cache-Control', 'max-age=0, no-cache, no-store, must-revalidate');
    res.sendFile('sw.js', { root: path.join(__ROOT_DIRECTORY__, 'assets', 'build') }); // eslint-disable-line no-undef
  }
});
0
Rahul Jain

これはこれの複製かもしれません 61776698

あなたが知る必要があると思う主な事柄：text/htmlファイルではなく.jsファイルとして扱われるようにパブリックフォルダー内にservieWorkerを作成します。

次に、そのサービスをindex.jsに登録します

ステップ1public/sw.jsを作成します

self.addEventListener('message', async (event) => {
  console.log('Got message in the service worker', event);
});

ステップ2、src/sw-register.jsを作成します

export default function LocalServiceWorkerRegister() {
  const swPath = `${process.env.PUBLIC_URL}/sw-build.js`;
  if ('serviceWorker' in navigator && process.env.NODE_ENV !== 'production') {
    window.addEventListener('load', function () {
      navigator.serviceWorker.register(swPath).then(registration => {
        console.log('Service worker registered');
      });
    });
  }
}

ステップ3、src/index.jsに次の2行を追加します

import LocalServiceWorkerRegister from './sw-register';
...
LocalServiceWorkerRegister();

必要に応じていくつか変更できますが、これらの変更により、create-react-appアプリケーションでカスタムサービスワーカーと連携できるようになります。

0
Jhonatan