safari push notification

Knowledge Sharing Session on Push Notification Service

Global Blue TeamFebruary 2016

Push Notification

Push Notification

• Notifies a user by messages or events• Originates from a server• The end user must opt-in to receive alerts

Why Push Notifications?

• Timely and relevant• Easy to access• Go straight to the details• Full control


• Timely and relevant

Why Push Notifications?• Easy to access


• Go straight to the details


• Full Control

Why Push Notifications?• Full Control

Safari Push Notification

Safari 7 along with OSX Mavericks


Things we will learn-• Background• How it works• Implementation• Best practices


Background


• Local Web Notifications


Local VS Push Notifications


Apps VS Websites Push Notifications


How it works


Safari Push Notification works in two steps-1. Subscribing2. Delivering


Subscribing


Delivering


DEMO


Implementation


Implementation1. Get Website Push Certificate2. Implement Push Notification to your server


Get Website Push Certificate1. Required to register in the Certificates, Identifiers & Profiles section of

the Member Center2. Registration requires an iOS developer license or Mac developer license.

https://developer.apple.com/account/overview.action

https://developer.apple.com/programs/ios/

https://developer.apple.com/programs/mac/

Safari Push NotificationWhen registering, include the following information: Identifier –

• Unique reverse-domain string, such as web.com.globalblue (the string must start with web).

• This is also known as the Website Push ID.

Website Push ID Description – • This is the name used throughout the Provisioning Portal to refer to your

website. • Use it for your own benefit to label your Website Push IDs into a more human-

readable format.


• After providing the necessary informations the becomes available to download.

• Push Certificate must be coverted to .p12 format.


Implement Push Notification to the server


Implement Push Notification to the server• Ask On Your Website• Write Web Service Backend• Send Push Notifications


Ask on Your Website: Query Permission

var result = window.safari.pushNotification.permission(websitePushID

);

Three types of permissions – result.permissions

1. "default"2. "denied"3. "granted"


Ask on Your Website: Query Permission1. result.permissions == “default”– The user hasn’t yet been asked his or her permission.

2. result.permissions == “denied”– The user denied permission for the website to send

push notifications.3. result.permissions == “granted”– The user has allowed permission for the website to

send push notifications.


Ask on Your Website: Query Permission

When permission is grantedresult.deviceToken = "96385da7....88aaebaf"


Ask on Your Website: Request Permissionwindow.safari.pushNotification.requestPermission(

webServiceURL,websitePushID,userInfo,callback

);


Ask on Your Website: Request PermissionwebServiceURL

– Base URL to your web service– Must be https

websitePushID– Unique identity of your website

userInfo– How your website passes information to your web service– Dictionary of strings


Ask on Your Website: Request PermissionCallback

– When user confirmscallback({

permission: "granted",deviceToken: "96385da7....88aaebaf"

});

– When user deniescallback({

permission: "denied"});


Write Web Service Back End


Write Web Service Back End: Return push package• POST /v1/pushPackages/<websitePushID>• HTTP body is userInfo serialized as query string

window.safari.pushNotification.requestPermission(webServiceURL,websitePushID,userInfo,callback

);



{“email": “[email protected]",“empId": “123456"

}



{“email": “[email protected]",“empId": “123456"

}

• Serialized Info: [email protected]&empId=123456

Safari Push NotificationWrite Web Service Back End

Push Package DIR Structure:GlobalBlue.pushpackage/

icon.iconset/[email protected][email protected][email protected]

website.jsonmanifest.jsonsignature





Icons – • Used in notifications• Notification Center• Safari Browser• System Preferences


• Defines website• Checked during validation• Used in notifications and • Notification Centre






{ "webServiceURL": "https://globalblue.com/ws", "websitePushID": "web.com.globalblue", "websiteName": "Global Blue", "allowedDomains": ["http://globalblue.com"], "authenticationToken": "1e3f7d98ac417df", "urlFormatString": "http://globalblue.com/%@?articleId=%@"}






JSON dictionary of SHA1 checksums






{ "icon.iconset\/icon_16x16.png": "865f...17e1", "icon.iconset\/[email protected]": "1a47...35ca", "icon.iconset\/icon_32x32.png": "aa75...fbb6", "icon.iconset\/[email protected]": "88e8...351d", "icon.iconset\/icon_128x128.png": "0509...6228", "icon.iconset\/[email protected]": "e956...6611", "website.json": "9683...b3a8"}









Signature of manifest.json


Write Web Service Back EndLogging errors• POST /v1/log• HTTP Body{"logs": ["Referrer URL http://globalblue.com/ is not in the list of allowed domains."]}


Push Notification Dialog

Push Package

Icons

websiteName


Write Web Service Back EndRegister user’s device token• POST

/v1/devices/<deviceToken>/registrations/<websitePushID>

• HTTP Authorize header fieldApplePushNotifications <authenticationToken>


Write Web Service Back EndUnregister user’s device token• DELETE

/v1/devices/<deviceToken>/registrations/<websitePushID>

• HTTP Authorize header fieldApplePushNotifications <authenticationToken>


Send Push Notifications


Provider-to-APNs Connection Trust


APNs-to-Device Connection Trust


Device Token Generation


Send Push NotificationsPush Payload{

"aps": {"alert": {

"title": “Nike Milan","body": “50% off for all Nike products.","action": "View"

},"url-args": [“milan", “532401"]

}}


Send Push NotificationsPush Payload{

"aps": {"alert": {

"title": “Nike Milan","body": “50% off for all Nike products.","action": "View"

},"url-args": [“milan", “532401"]

}}

• Maximum size for message payload is 256 bytes.• Always connect to Production Environment


Push Notifications and Notification Center

Push Package

Icons

websiteName

urlFormatString

NotificationPayload

title

action

body

url-args

Safari Push NotificationPush Notifications and Notification Centerhttp://globalblue.com/%@?articleId=%@ [“milan", " 532401 "]

Push Package

Icons

websiteName

urlFormatString

NotificationPayload

title

action

body

url-args

http://globalblue.com/%25@?articleId=%25@

http://globalblue.com/%25@?articleId=%25@

Safari Push NotificationPush Notifications and Notification Center

http://globalblue.com/milan?articleId=532401

Push Package

Icons

websiteName

urlFormatString

NotificationPayload

title

action

body

url-args


Best Practice• Think about what notifications are most useful• Use notifications as an additional, not primary means of communication• Take advantage of the URL format string

• Strip whitespace from your JSON payload• You can use URL shortener to keep the payload size in limit.

Push Package urlFormatString: http://%@Website.json

Payloadurl-args: ["globalblue.com/brands/specials/boggi/boggi-milan/"]


Questions?


Thank You

safari push notification

Technology