Implement ethinking safari push

0. Prereqisites

  • created Safari push app as described on the previeous section

  • download the library here

1. adjust the config

Extract the files and put them in a folder with the name "safaripush", then adjust the config.json as described below.

example config

{
    "clientId": "test", (1)
    "appId": "2590", (2)
    "token": "4ZNLj7OW2mJkDC4W61z3PNrMJxPdQsf5p", (3)
    "tagId": "[111, 125, 112]", (4)
    "websitePushId": "web.delivery.push.dev", (5)
    "subscriptionApi": "https://webpush-demo.ethinking.de/push-api/", (6)
    "platformId": 4 (7)
}
1 your clientId (string format)
2 your appId (string format)
3 the token in the "Subscription API" panel (string format)
4 the tags you want your users subscribe to (string format for a single tag, a number-array inside "" for multiple tags)
5 the websitePushId you selected for your safari certificate (string format)
6 the url in the "Subscription API" panel (string format)
7 the platformId (in number format)

You find most of this information in the "Subscription API" panel on the info section of your push app on https://console.push.delivery/.

safaripush setup01

2. Serve the safaripush folder on your website

  • e.g. www.yourwebsite.com/safaripush/*

3. Add script to your website

To initialise Safari Push you should import the safaripush.js script in the head of your website(s):

<script src='path to the script e.g. www.yourwebsite.com/safaripush/safaripush.js'></script>

Now the library will check on each pageload if the browser is safari and is able to recieve notifications. If that is the case, a blue gear icon will be displayed at the bottom left of your page. When a user clicks on that icon they will be asked, if they want to receive push-notifications. If yes, they will be automatically subscribed to all tags you specified as default in your app.