Safari Push Notifications: Complete Setup

The SPN walkthrough that stops you pulling your hair out

Generating your Website Push Certificate

Uploading certificates to server and converting to .pem

The Apple Worldwide Developer Relations Intermediate Certificate

Configuring your raw push package

pushPackage.raw 
website.json
icon.iconset
icon_16x16@2x.png
icon_16x16.png
icon_32x32@2x.png
icon_32x32.png
icon_128x128@2x.png
icon_128x128.png

icon.iconset

website.json

{
"websiteName": "Your Website Name",
"websitePushID": "web.com.domain.appname",
"allowedDomains": ["https://yourdomain.com"],
"urlFormatString": "http://yourdomain.com/notification/%@/%@",
"authenticationToken": "a_random_string_atleast_16_characters",
"webServiceURL": "https://yourdomain.com/push"
}

Configure the PHP Companion File

Configuring NginX to handle Safari Agent Requests

#Safari Push Package Request
location /push/v2/pushPackages/web.com.domain.appname {
add_header "Access-Control-Allow-Origin" *;
allow all;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME /var/www/safari.push/index.php;
include fastcgi_params;
}
#Safari Push Log
location /push/v2/log {

add_header "Access-Control-Allow-Origin" *;
allow all;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index log.php;
fastcgi_param SCRIPT_FILENAME /var/www/safari.push/log.php;
include fastcgi_params;
}
<?php$file = 'log';$current = file_get_contents($file);
$current .= file_get_contents("php://input") . "\n";

file_put_contents($file, $current);

Run client Javascript to Grant Access / Retreive Device Token

Sending Live Notification

Further Implementation

Programmer and Author. Director @ JKRBInvestments.com. Creator of LearnChineseGrammar.com for iOS and Android.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store