SecurityError: Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).

[KevinWessels]

Expected Behaviour

Calling PushNotification.init sets up everything needed for push notifications, regardless of platform

Actual Behaviour

Calling PushNotification.init sets up everything needed for push notifications for iOS, but fails in chrome

Reproduce Scenario (including but not limited to)

this:
var push = PushNotification.init({
"android": {
"senderID": "XXXXXXXX"
},
"browser": {},
"ios": {
"sound": true,
"vibration": true,
"badge": true
},
"windows": {}
});
produces:
"SecurityError: Only secure origins are allowed (see: https://goo.gl/Y0ZkNV)."
error in phonegap CLI and:
"DOMException: Only secure origins are allowed (see: https://goo.gl/Y0ZkNV)."
in browser console

Platform and Version (eg. Android 5.0 or iOS 9.2.1)

Chrome 53.0

Cordova CLI version and cordova platform version

6.3.3
browser 4.1.0

Plugin version

1.8.2

Sample Push Data Payload

Sample Code that illustrates the problem

var PushInterface = {

register: function() {
    console.log("Trying to register for push notifications");

    var push = PushNotification.init({
        "android": {
            "senderID": "XXXXXXXX"
        },
        "browser": {},
        "ios": {
            "sound": true,
            "vibration": true,
            "badge": true
        },
        "windows": {}
    });

    if (push) {
        console.log("Got push object");

        // configure push event 'registration' 
        push.on("registration", PushInterface.onRegistration);

        // configure push event 'error'
        push.on("error", PushInterface.onError);

        // configure push event 'notification' 
        push.on("notification", PushInterface.onNotification);
    }
},

onRegistration: function(e) {
},

onNotification: function(e) {
},

onError: function(e) {
},

};

Logs taken while reproducing problem

phonegap CLI:
[phonegap] [console.log] device is ready
[phonegap] [console.log] Trying to register for push notifications
[phonegap] [console.log] Got push object
[phonegap] [console.log] SecurityError: Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).

Chrome console:
Trying to register for push notifications
(index):111 Got push object
(index):111 DOMException: Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).
push.js:80 Uncaught (in promise) Error: Error registering Service Worker(…)(anonymous function) @ push.js:80

[macdonst]

@KevinWessels yeah, service workers are only accessible via https in chrome. SW are required for browser push. The easiest way around it is to go to http://localhost:3000 instead of the IP address of the computer you are running phonegap serve on.

[KevinWessels]

@macdonst How would this work in production though?

[macdonst]

@KevinWessels it's not supposed to work in production. The browser platform is there to allow you to write as much of your app as possible before compiling it into a binary that can run on Android, iOS, etc.

By using the browser platform and the PhoneGap CLI you can send pushes to your browser which allows you to test your application logic when notification messages are received.

When going to production you'll need to register your own app with Google to receive GCM and setup all the Apple signing certificates.

[uPaymeiFixit]

Are there any plans to support this in production?
(To truly support browser push notifications?)

[macdonst]

@uPaymeiFixit the production plans are to morph this API to match the W3C push API so writing an app for the browser will be the same as a Cordova/PhoneGap one.

[lock]

This thread has been automatically locked.