Transcript
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
Why Push Notifications?
• Timely and relevant
Why Push Notifications?• Easy to access
Why Push Notifications?
• Go straight to the details
Why Push Notifications?
• Full Control
Why Push Notifications?• Full Control
Safari Push Notification
Safari 7 along with OSX Mavericks
Safari Push Notification
Things we will learn-• Background• How it works• Implementation• Best practices
Safari Push Notification
Background
Safari Push Notification
• Local Web Notifications
Safari Push Notification
Local VS Push Notifications
Safari Push Notification
Local VS Push Notifications
Safari Push Notification
Apps VS Websites Push Notifications
Safari Push Notification
Apps VS Websites Push Notifications
Safari Push Notification
Safari Push Notification
Safari Push Notification
Safari Push Notification
Safari Push Notification
Safari Push Notification
Safari Push Notification
How it works
Safari Push Notification
Safari Push Notification works in two steps-1. Subscribing2. Delivering
Safari Push Notification
Subscribing
Safari Push Notification
Subscribing
Safari Push Notification
Subscribing
Safari Push Notification
Subscribing
Safari Push Notification
Subscribing
Safari Push Notification
Subscribing
Safari Push Notification
Subscribing
Safari Push Notification
Subscribing
Safari Push Notification
Subscribing
Safari Push Notification
Subscribing
Safari Push Notification
Delivering
Safari Push Notification
Delivering
Safari Push Notification
Delivering
Safari Push Notification
Delivering
Safari Push Notification
Delivering
Safari Push Notification
DEMO
Safari Push Notification
Implementation
Safari Push Notification
Implementation1. Get Website Push Certificate2. Implement Push Notification to your server
Safari Push Notification
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.
Safari Push Notification
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.
Safari Push Notification
• After providing the necessary informations the becomes available to download.
• Push Certificate must be coverted to .p12 format.
Safari Push Notification
Implement Push Notification to the server
Safari Push Notification
Implement Push Notification to the server• Ask On Your Website• Write Web Service Backend• Send Push Notifications
Safari Push Notification
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"
Safari Push Notification
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.
Safari Push Notification
Ask on Your Website: Query Permission
When permission is grantedresult.deviceToken = "96385da7....88aaebaf"
Safari Push Notification
Ask on Your Website: Request Permissionwindow.safari.pushNotification.requestPermission(
webServiceURL,websitePushID,userInfo,callback
);
Safari Push Notification
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
Safari Push Notification
Ask on Your Website: Request PermissionCallback
– When user confirmscallback({
permission: "granted",deviceToken: "96385da7....88aaebaf"
});
– When user deniescallback({
permission: "denied"});
Safari Push Notification
Write Web Service Back End
Safari Push Notification
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
);
Safari Push Notification
Write Web Service Back End: Return push package• POST /v1/pushPackages/<websitePushID>• HTTP body is userInfo serialized as query string
{“email": “me@cefalo.com",“empId": “123456"
}
Safari Push Notification
Write Web Service Back End: Return push package• POST /v1/pushPackages/<websitePushID>• HTTP body is userInfo serialized as query string
{“email": “me@cefalo.com",“empId": “123456"
}
• Serialized Info: email=me@cefalo.com&empId=123456
Safari Push NotificationWrite Web Service Back End
Push Package DIR Structure:GlobalBlue.pushpackage/
icon.iconset/icon_16x16.pngicon_16x16@2x.pngicon_32x32.pngicon_32x32@2x.pngicon_128x128.pngicon_128x128@2x.png
website.jsonmanifest.jsonsignature
Safari Push NotificationWrite Web Service Back End
Push Package DIR Structure:GlobalBlue.pushpackage/
icon.iconset/icon_16x16.pngicon_16x16@2x.pngicon_32x32.pngicon_32x32@2x.pngicon_128x128.pngicon_128x128@2x.png
website.jsonmanifest.jsonsignature
Icons – • Used in notifications• Notification Center• Safari Browser• System Preferences
Safari Push Notification
• Defines website• Checked during validation• Used in notifications and • Notification Centre
Write Web Service Back End
Push Package DIR Structure:GlobalBlue.pushpackage/
icon.iconset/icon_16x16.pngicon_16x16@2x.pngicon_32x32.pngicon_32x32@2x.pngicon_128x128.pngicon_128x128@2x.png
website.jsonmanifest.jsonsignature
Safari Push Notification
{ "webServiceURL": "https://globalblue.com/ws", "websitePushID": "web.com.globalblue", "websiteName": "Global Blue", "allowedDomains": ["http://globalblue.com"], "authenticationToken": "1e3f7d98ac417df", "urlFormatString": "http://globalblue.com/%@?articleId=%@"}
Write Web Service Back End
Push Package DIR Structure:GlobalBlue.pushpackage/
icon.iconset/icon_16x16.pngicon_16x16@2x.pngicon_32x32.pngicon_32x32@2x.pngicon_128x128.pngicon_128x128@2x.png
website.jsonmanifest.jsonsignature
Safari Push Notification
JSON dictionary of SHA1 checksums
Write Web Service Back End
Push Package DIR Structure:GlobalBlue.pushpackage/
icon.iconset/icon_16x16.pngicon_16x16@2x.pngicon_32x32.pngicon_32x32@2x.pngicon_128x128.pngicon_128x128@2x.png
website.jsonmanifest.jsonsignature
Safari Push Notification
{ "icon.iconset\/icon_16x16.png": "865f...17e1", "icon.iconset\/icon_16x16@2x.png": "1a47...35ca", "icon.iconset\/icon_32x32.png": "aa75...fbb6", "icon.iconset\/icon_32x32@2x.png": "88e8...351d", "icon.iconset\/icon_128x128.png": "0509...6228", "icon.iconset\/icon_128x128@2x.png": "e956...6611", "website.json": "9683...b3a8"}
Write Web Service Back End
Push Package DIR Structure:GlobalBlue.pushpackage/
icon.iconset/icon_16x16.pngicon_16x16@2x.pngicon_32x32.pngicon_32x32@2x.pngicon_128x128.pngicon_128x128@2x.png
website.jsonmanifest.jsonsignature
Safari Push NotificationWrite Web Service Back End
Push Package DIR Structure:GlobalBlue.pushpackage/
icon.iconset/icon_16x16.pngicon_16x16@2x.pngicon_32x32.pngicon_32x32@2x.pngicon_128x128.pngicon_128x128@2x.png
website.jsonmanifest.jsonsignature
Signature of manifest.json
Safari Push Notification
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."]}
Safari Push Notification
Push Notification Dialog
Push Package
Icons
websiteName
Safari Push Notification
Write Web Service Back EndRegister user’s device token• POST
/v1/devices/<deviceToken>/registrations/<websitePushID>
• HTTP Authorize header fieldApplePushNotifications <authenticationToken>
Safari Push Notification
Write Web Service Back EndUnregister user’s device token• DELETE
/v1/devices/<deviceToken>/registrations/<websitePushID>
• HTTP Authorize header fieldApplePushNotifications <authenticationToken>
Safari Push Notification
Send Push Notifications
Safari Push Notification
Send Push Notifications
Safari Push Notification
Provider-to-APNs Connection Trust
Safari Push Notification
APNs-to-Device Connection Trust
Safari Push Notification
Device Token Generation
Safari Push Notification
Send Push NotificationsPush Payload{
"aps": {"alert": {
"title": “Nike Milan","body": “50% off for all Nike products.","action": "View"
},"url-args": [“milan", “532401"]
}}
Safari Push Notification
Send Push NotificationsPush Payload{
"aps": {"alert": {
"title": “Nike Milan","body": “50% off for all Nike products.","action": "View"
},"url-args": [“milan", “532401"]
}}
Safari Push Notification
Send Push NotificationsPush Payload{
"aps": {"alert": {
"title": “Nike Milan","body": “50% off for all Nike products.","action": "View"
},"url-args": [“milan", “532401"]
}}
Safari Push Notification
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
Safari Push Notification
Push Notifications and Notification Center
Push Package
Icons
websiteName
urlFormatString
NotificationPayload
title
action
body
url-args
Safari Push Notification
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
Safari Push NotificationPush Notifications and Notification Center
http://globalblue.com/milan?articleId=532401
Push Package
Icons
websiteName
urlFormatString
NotificationPayload
title
action
body
url-args
Safari Push Notification
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/"]
Safari Push Notification
Questions?
Safari Push Notification
Thank You
top related