When I try to add a service worker on my progressive web app page, why does the browser console show the following error?
ERROR "Uncaught (in promise) DOMException: Only secure origins are allowed
JS Code:
(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');
});
}
})();
From Service Worker FAQ:
Q: I get an error message about "Only secure origins are allowed". Why?
A: Service workers are only available to "secure origins" (HTTPS sites, basically) in line with a policy to prefer secure origins for powerful new features. However http://localhost is also considered a secure origin, so if you can, developing on localhost is an easy way to avoid this error.
You can also use the
--unsafely-treat-insecure-origin-as-secure
command-line flag. This flag must be combined with a--user-data-dir
flag. For example:$ ./chrome --user-data-dir=/tmp/foo --unsafely-treat-insecure-origin-as-secure=http://your.insecure.site
If you want to test on https://localhost with a self-signed certificate, do:
$ ./chrome --allow-insecure-localhost https://localhost
You might also find the
--ignore-certificate-errors
flag useful.
Try using http://127.0.0.1:8080 for hosting locally instead of http://192.168.29.53:8080
You can check for protocol before registering the service worker like this,
location.protocol === 'https:' && serviceWorker.register('service-worker.js')
in chrome type chrome://flags
search "secure origin"
then click on Enabled, relaunch chrome.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With