私のサービスワーカーにとって、「エラー - 安全な原点のみが許可されています」と表示されるのはなぜですか？

Question

プログレッシブウェブアプリケーションページにサービスワーカーを追加しようとすると、ブラウザコンソールに次のエラーが表示されるのはなぜですか？

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'); 
      }); 
    } 
})(); 

Answer 1

Service Worker FAQから：

Q：私は "唯一の安全な起源が許可されている" というエラーメッセージが表示されます。どうして？

A：サービスの労働者は、強力な新機能のための安全な起源を好むための政策に沿って、（HTTPSサイト、基本的には）「の起源を確保」するためにのみ使用可能です。しかし、http://localhostもセキュアな起点と見なされます。可能であれば、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フラグが役に立つかもしれません。

Answer 2

あなたは location.protocol === 'https:' && serviceWorker.register('service-worker.js')