ServiceWorker registration failed: DOMException: Only secure origins are allowed (see: https://goo.gl/Y0ZkNV)

Question

I wrote code to get GCM id to send chrome push notifications. I wrote below code to get GCM id.

var ChromePushManager = function (serviceWorkerPath, callback) {
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register(serviceWorkerPath).then(function (registration) {
            // Registration was successful 
            console.log('ServiceWorker registration successful with scope: ', registration.scope);

            registration.pushManager.subscribe({userVisibleOnly: true}).then(function (subscription) {
                console.log("subscription.subscriptionId: ", subscription.subscriptionId);
                console.log("subscription.endpoint: ", subscription.endpoint);

                // TODO: Send the subscription subscription.endpoint
                // to your server and save it to send a push message
                // at a later date
                var register = ChromePushManager.getRegistrationId(subscription);
                callback(null, register);
            });
        }).catch(function (err) {
            // registration failed :(
            console.log('ServiceWorker registration failed: ', err);
        });
    } else {
        callback('Service workers aren\'t supported in this browser.', null);
    }
};

ChromePushManager.getRegistrationId = function (pushSubscription) {
    if (pushSubscription.subscriptionId) {
        return pushSubscription.subscriptionId;
    }

    var endpoint = 'https://android.googleapis.com/gcm/send/';
    parts = pushSubscription.endpoint.split(endpoint);

    if (parts.length > 1)
    {
        console.log("RegistrationId : " + parts[1]);
        return parts[1];
    }
}

var chromePushManager = new ChromePushManager('../js/service-worker.js', function (error, registrationId) {
                    if (error !== null) {
                        console.log(error);
                    }
});

It is working fine in http://localhost:8080. I uploaded this code in server. I was trying to execute code in server. I was getting error.

ServiceWorker registration failed: DOMException: Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).

I don't know what this error says. Could you please any once explain me what this error mean and give me a solution to resolve this error at my server side.

Thank you.

Solution

You need to use https on the server.

In error: Only secure origins are allowed (see: link).

From link in error:

Comments

[Denis Giffeler]

You should also be aware that a service worker can't be initialised if the page is loaded locally e.g. for testing purposes. An error message can be avoided by testing against this additional condition: (!/^(?:|localhost|127\.0\.0\.1)$/.test(location.hostname))