プログレッシブWebアプリページにサービスワーカーを追加しようとすると、ブラウザコンソールに次のエラーが表示されるのはなぜですか?
ERROR "Uncaught (in promise) DOMException: Only secure origins are allowed
JSコード:
(function () {
'use strict';
// TODO add service worker code here
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('service-worker.js')
.then(function () {
console.log('Service Worker Registered');
});
}
})();
http://192.168.29.53:808 の代わりに http://127.0.0.1:808 をローカルでホストするために使用してみてください
From Service Worker FAQ :
Q:「セキュアなオリジンのみが許可されています」というエラーメッセージが表示されます。なぜですか?
A:サービスワーカーは、強力な新機能のためにセキュアオリジンを優先するポリシーに従って、「セキュアオリジン」(基本的にはHTTPSサイト)でのみ使用できます。ただし、 http:// localhost も安全なOriginとみなされるため、可能であれば、localhostでの開発はこのエラーを回避する簡単な方法です。
--unsafely-treat-insecure-Origin-as-secure
コマンドラインフラグを使用することもできます。このフラグは、--user-data-dir
フラグと組み合わせる必要があります。例えば:$ ./chrome --user-data-dir=/tmp/foo --unsafely-treat-insecure-Origin-as-secure=http://your.insecure.site
自己署名証明書を使用して https:// localhost でテストする場合は、次のようにします。
$ ./chrome --allow-insecure-localhost https://localhost
--ignore-certificate-errors
フラグも役立つ場合があります。
このようにサービスワーカーを登録する前に、プロトコルを確認できます。location.protocol === 'https:' && serviceWorker.register('service-worker.js')