OneSignal web push notification on safari configuration does not work

Question

I am setting up web push notification with OneSignal by reading their documentation. The follwoing code block is my configuration example

<script>
    var OneSignal = window.OneSignal || [];
    OneSignal.push(["init", {
        appId: "my-app-id",
        safari_web_id: 'my-safari-web-id',
        autoRegister: false,
        notifyButton: {
            enable: true /* Set to false to hide */
        },
    }]);
</script>

It work on Google Chrome vs Firefox. But does not work on safari and when I click on Subscribe to notifications button I got the error like the following

What's wrong on my configuration?

I use safari Version 10.0.1 (12602.2.14.0.7)

Answer 1

Here are some of the reasons why this might be happening on Safari. From https://github.com/OneSignal/OneSignal-Website-SDK/wiki/Safari-Registration-Bug:

Ordered by most likely to least likely:

1. The Safari Site URL's origin must match the origin in your address bar. Even if your hosts file allows for an alias, you must use the actual origin listed in the Site URL when subscribing. The Site URL is even case-sensitive.

2. The safari_web_id parameter must match the Safari Web ID in the app's platform settings. Make sure it isn't being overridden by another value, or that the web.onesignal.auto prefix wasn't missed if they're using our autogenerated certificate.

3. The icon must be square (width equal to height).

4. Make sure you're not browsing Safari in a Private window.

5. Make sure you're not using Safari on iOS. Safari on Windows is not supported. Some users might download Safari 5.1.7 to test out push notifications, but the only Safari that is supported is Safari 7.1+ on the Mac OS X operating system.

6. The icon's DPI must be 72x72.

   This can be checked using ImageMagick, with the command identify -format "%w x %h %x x %y" PATH_TO_FILE.

7. If a custom certificate is used, it may be invalid. Recreate the Safari platform using an auto-generated certificate. Contact OneSignal for this.

8. Finally, the auto-generated certificate may not be working correctly. Recreate the Safari platform using another auto-generated certificate. Contact OneSignal for this.

Answer 2

You can use OneSignal.log.setLevel('trace'); to trace your problem. It may tell you exact problem like icon is missing or p12 is wrong.