<html><head><meta http-equiv="Content-Type" content="text/html charset=us-ascii"></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><p style="margin-top: 0px !important; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; ">so i started to play with Safari Push notifications, here is my experience:</p><h3 style="text-rendering: optimizelegibility; margin: 1em 0px 15px; padding: 0px; line-height: 1.7; cursor: text; position: relative; font-size: 1.5em; font-family: Helvetica, arial, freesans, clean, sans-serif; "><a name="setup" class="anchor" href="https://gist.github.com/lholmquist/a7080e4a6189a202d291#setup" style="color: rgb(65, 131, 196); text-decoration: none; display: block; padding-left: 30px; margin-left: -30px; cursor: pointer; position: absolute; top: 0px; left: 0px; bottom: 0px;"><span class="mini-icon mini-icon-link"></span></a>Setup</h3><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; ">like iOS, you need to login to the dev portal and create an application ID, in this case a website ID, then do all the same things with certifcates and such.</p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; ">the next part is you need to create a "push package" that either resides on the server your "website/webapp" is on as a .zip, or created dynamically at runtime. more on this later</p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; ">The push package contains some things that are ultimately signed with your create certificate.</p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; ">here is a link for more detail on the push package <a href="https://developer.apple.com/library/mac/documentation/NetworkingInternet/Conceptual/NotificationProgrammingGuideForWebsites/PushNotifications/PushNotifications.html#//apple_ref/doc/uid/TP40013225-CH3-SW1" rel="noreferrer" style="color: rgb(65, 131, 196); text-decoration: none;">pp link</a></p><h3 style="text-rendering: optimizelegibility; margin: 1em 0px 15px; padding: 0px; line-height: 1.7; cursor: text; position: relative; font-size: 1.5em; font-family: Helvetica, arial, freesans, clean, sans-serif; "><a name="the-client-and-server" class="anchor" href="https://gist.github.com/lholmquist/a7080e4a6189a202d291#the-client-and-server" style="color: rgb(65, 131, 196); text-decoration: none; display: block; padding-left: 30px; margin-left: -30px; cursor: pointer; position: absolute; top: 0px; left: 0px; bottom: 0px;"><span class="mini-icon mini-icon-link"></span></a>The client and server</h3><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; ">Safari 7 on Mavericks ships with some new API's for doing push.</p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; ">the first:</p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; "><code style="font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 12px; line-height: normal; margin: 0px 2px; padding: 0px 5px; border: 1px solid rgb(221, 221, 221); background-color: rgb(248, 248, 248); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; white-space: nowrap; ">window.safari.pushNotification.requestPermission(url, websitePushID, userInfo, callback);</code></p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; ">*url - a https url to a webservice *websitePushID - website push ID created in the dev console *userInfo - just some metadata if you want *callback - yup, it's asynchronous</p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; ">so when this call is made, safari will make a POST to an endpoint like this:</p><pre style="font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 13px; line-height: 19px; margin-top: 15px; margin-bottom: 15px; background-color: rgb(248, 248, 248); border: 1px solid rgb(221, 221, 221); overflow: auto; padding: 6px 10px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; "><code style="font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 12px; line-height: normal; margin: 0px; padding: 0px; border: none; background-color: transparent; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; ">webServiceURL/version/pushPackages/websitePushID
</code></pre><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; ">this is where you would serve your push package with the <code style="font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 12px; line-height: normal; margin: 0px 2px; padding: 0px 5px; border: 1px solid rgb(221, 221, 221); background-color: rgb(248, 248, 248); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; white-space: nowrap; ">application/zip</code> content type header thing</p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; ">if all goes well with the push package, safari will ask the user to allow notifications, if the user allows them, then a POST to this endpoint happens</p><pre style="font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 13px; line-height: 19px; margin-top: 15px; margin-bottom: 15px; background-color: rgb(248, 248, 248); border: 1px solid rgb(221, 221, 221); overflow: auto; padding: 6px 10px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; "><code style="font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 12px; line-height: normal; margin: 0px; padding: 0px; border: none; background-color: transparent; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; ">webServiceURL/version/devices/deviceToken/registrations/websitePushID
</code></pre><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; ">and the "device token" is then returned in the callback from above</p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; ">a DELETE sent to that same endpoint if a user removes permissions.( haven't tried this yet )</p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; ">if any error happens during any of these calls, this endpoint is POST'ed to</p><pre style="font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 13px; line-height: 19px; margin-top: 15px; margin-bottom: 15px; background-color: rgb(248, 248, 248); border: 1px solid rgb(221, 221, 221); overflow: auto; padding: 6px 10px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; "><code style="font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 12px; line-height: normal; margin: 0px; padding: 0px; border: none; background-color: transparent; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; ">webServiceURL/version/log
</code></pre><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; ">here is my repo that is running on openshift( the easist way to get https since safari doesn't like self signed certs )</p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; "><a href="https://github.com/lholmquist/safaripush" rel="noreferrer" style="color: rgb(65, 131, 196); text-decoration: none;">https://github.com/lholmquist/safaripush</a></p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; ">the hardest part of this whole things is the actual setup of the push package</p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; ">here is a repo i found that helped a bit, and apple also has a file that tries to help</p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; "><a href="https://github.com/connorlacombe/Safari-Push-Notifications" rel="noreferrer" style="color: rgb(65, 131, 196); text-decoration: none;">https://github.com/connorlacombe/Safari-Push-Notifications</a></p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; ">yes, i know, php.</p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; ">i'm in the process of writing a node version, and yes, i've seen this one <a href="https://npmjs.org/package/web-push-package" rel="noreferrer" style="color: rgb(65, 131, 196); text-decoration: none;">https://npmjs.org/package/web-push-package</a></p><h3 style="text-rendering: optimizelegibility; margin: 1em 0px 15px; padding: 0px; line-height: 1.7; cursor: text; position: relative; font-size: 1.5em; font-family: Helvetica, arial, freesans, clean, sans-serif; "><a name="ups" class="anchor" href="https://gist.github.com/lholmquist/a7080e4a6189a202d291#ups" style="color: rgb(65, 131, 196); text-decoration: none; display: block; padding-left: 30px; margin-left: -30px; cursor: pointer; position: absolute; top: 0px; left: 0px; bottom: 0px;"><span class="mini-icon mini-icon-link"></span></a>UPS</h3><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; ">So the good news is that the developer has to do all that stuff before they interact with the UPS.</p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; ">Safari uses APNs( production only gateway ), but the payload is slightly different.</p><pre style="font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 13px; line-height: 19px; margin-top: 15px; margin-bottom: 15px; background-color: rgb(248, 248, 248); border: 1px solid rgb(221, 221, 221); overflow: auto; padding: 6px 10px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; "><code style="font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 12px; line-height: normal; margin: 0px; padding: 0px; border: none; background-color: transparent; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; ">{
"aps": {
"alert": {
"title": "Flight A998 Now Boarding",
"body": "Boarding has begun for Flight A998.",
"action": "View"
},
"url-args": ["boarding", "A998"]
}
}
</code></pre><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; ">title and body are required</p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; ">i sent a PR to get this updated in the java_apns thing <a href="https://github.com/notnoop/java-apns/pull/135" rel="noreferrer" style="color: rgb(65, 131, 196); text-decoration: none;">https://github.com/notnoop/java-apns/pull/135</a></p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; ">so we'll see what happens there</p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; ">there is a lot of duplication in the UPS for the APN's stuff, i just wanted to get things to work first, but iOS and Safari share almost everything.</p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; ">So maybe we need a more general APNs variant/sender whatever. i'm javascript dude, so my java skills are a bit rusty</p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; ">i have a branch of the UPS where i am playing with this here <a href="https://github.com/lholmquist/aerogear-unified-push-server/tree/safaripush" rel="noreferrer" style="color: rgb(65, 131, 196); text-decoration: none;">https://github.com/lholmquist/aerogear-unified-push-server/tree/safaripush</a></p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; ">the update UI is here <a href="https://github.com/lholmquist/aerogear-unified-push-server-admin-ui/tree/safarpush" rel="noreferrer" style="color: rgb(65, 131, 196); text-decoration: none;">https://github.com/lholmquist/aerogear-unified-push-server-admin-ui/tree/safarpush</a></p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; ">the modified java_apns is here</p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; "><a href="https://github.com/lholmquist/java-apns/tree/safari_push" rel="noreferrer" style="color: rgb(65, 131, 196); text-decoration: none;">https://github.com/lholmquist/java-apns/tree/safari_push</a></p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25px; ">there might be things missing, i'm just trying to download my brain</p></body></html>