web-dev-qa-db-ja.com

サービスワーカーに「エラー-安全なオリジンのみが許可されています」と表示されるのはなぜですか？

プログレッシブ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');
            });
    }
})();
javascriptjqueryprogressive-web-apps
26
user7348450

http://192.168.29.53:808 の代わりに http://127.0.0.1:808 をローカルでホストするために使用してみてください

6
anoNewb

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フラグも役立つ場合があります。

22
tony19

このようにサービスワーカーを登録する前に、プロトコルを確認できます。location.protocol === 'https:' && serviceWorker.register('service-worker.js')

2
Rajesh Hegde

chromeタイプchrome://flags

search "secure Origin"

enter image description here

次にEnabledをクリックして、chromeを再起動します。

1
CLIFFORD P Y