以下のエラーのため、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が失敗しました:
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
);
});
}
}
sw.js
をパブリックフォルダに移動すると、次のエラーが発生します:
Reactでブラウザーに提供されたときに具体的にtext/html
のヘッダーを(application/javascript
からsw.js
に)変更する方法はありますか?
ReactでのカスタムserviceWorkersの登録に関するいくつかのMediumの記事を試してみましたが、役に立ちませんでした...
サーバーサイドで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
}
});
これはこれの複製かもしれません 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アプリケーションでカスタムサービスワーカーと連携できるようになります。