Safari Push Notification
•Download as PPTX, PDF•
3 likes•1,605 views
The background of Push Notification, how it works, how push notification can be implemented for Safari and the best practices.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Safari Push Notification
Similar to Safari Push Notification (20)
Recently uploaded
Recently uploaded (20)
Safari Push Notification
- 1. Knowledge Sharing Session on Push Notification Service Global Blue Team February 2016
- 3. Push Notification • Notifies a user by messages or events • Originates from a server • The end user must opt-in to receive alerts
- 4. Why Push Notifications? • Timely and relevant • Easy to access • Go straight to the details • Full control
- 5. Why Push Notifications? • Timely and relevant
- 6. Why Push Notifications? • Easy to access
- 7. Why Push Notifications? • Go straight to the details
- 8. Why Push Notifications? • Full Control
- 9. Why Push Notifications? • Full Control
- 10. Safari Push Notification Safari 7 along with OSX Mavericks
- 11. Safari Push Notification Things we will learn- • Background • How it works • Implementation • Best practices
- 13. Safari Push Notification • Local Web Notifications
- 14. Safari Push Notification Local VS Push Notifications
- 15. Safari Push Notification Local VS Push Notifications
- 16. Safari Push Notification Apps VS Websites Push Notifications
- 17. Safari Push Notification Apps VS Websites Push Notifications
- 24. Safari Push Notification How it works
- 25. Safari Push Notification Safari Push Notification works in two steps- 1. Subscribing 2. Delivering
- 43. Safari Push Notification Implementation 1. Get Website Push Certificate 2. Implement Push Notification to your server
- 44. Safari Push Notification Get Website Push Certificate 1. Required to register in the Certificates, Identifiers & Profiles section of the Member Center 2. Registration requires an iOS developer license or Mac developer license.
- 46. Safari Push Notification When 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.
- 47. Safari Push Notification • After providing the necessary informations the becomes available to download. • Push Certificate must be coverted to .p12 format.
- 48. Safari Push Notification Implement Push Notification to the server
- 49. Safari Push Notification Implement Push Notification to the server • Ask On Your Website • Write Web Service Backend • Send Push Notifications
- 50. 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"
- 51. Safari Push Notification Ask on Your Website: Query Permission 1. 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.
- 52. Safari Push Notification Ask on Your Website: Query Permission When permission is granted result.deviceToken = "96385da7....88aaebaf"
- 53. Safari Push Notification Ask on Your Website: Request Permission window.safari.pushNotification.requestPermission( webServiceURL, websitePushID, userInfo, callback );
- 54. Safari Push Notification Ask on Your Website: Request Permission webServiceURL – 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
- 55. Safari Push Notification Ask on Your Website: Request Permission Callback – When user confirms callback({ permission: "granted", deviceToken: "96385da7....88aaebaf" }); – When user denies callback({ permission: "denied" });
- 56. Safari Push Notification Write Web Service Back End
- 57. 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 );
- 58. 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" }
- 59. 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
- 60. Safari Push Notification Write Web Service Back End Push Package DIR Structure: GlobalBlue.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png icon_128x128.png icon_128x128@2x.png website.json manifest.json signature
- 61. Safari Push Notification Write Web Service Back End Push Package DIR Structure: GlobalBlue.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png icon_128x128.png icon_128x128@2x.png website.json manifest.json signature Icons – • Used in notifications • Notification Center • Safari Browser • System Preferences
- 62. 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.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png icon_128x128.png icon_128x128@2x.png website.json manifest.json signature
- 63. 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.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png icon_128x128.png icon_128x128@2x.png website.json manifest.json signature
- 64. Safari Push Notification JSON dictionary of SHA1 checksums Write Web Service Back End Push Package DIR Structure: GlobalBlue.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png icon_128x128.png icon_128x128@2x.png website.json manifest.json signature
- 65. 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.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png icon_128x128.png icon_128x128@2x.png website.json manifest.json signature
- 66. Safari Push Notification Write Web Service Back End Push Package DIR Structure: GlobalBlue.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png icon_128x128.png icon_128x128@2x.png website.json manifest.json signature Signature of manifest.json
- 67. Safari Push Notification Write Web Service Back End Logging errors • POST /v1/log • HTTP Body {"logs": ["Referrer URL http://globalblue.com/ is not in the list of allowed domains."]}
- 68. Safari Push Notification Push Notification Dialog Push Package Icons websiteName
- 69. Safari Push Notification Write Web Service Back End Register user’s device token • POST /v1/devices/<deviceToken>/registrations/<websitePushID> • HTTP Authorize header field ApplePushNotifications <authenticationToken>
- 70. Safari Push Notification Write Web Service Back End Unregister user’s device token • DELETE /v1/devices/<deviceToken>/registrations/<websitePushID> • HTTP Authorize header field ApplePushNotifications <authenticationToken>
- 71. Safari Push Notification Send Push Notifications
- 72. Safari Push Notification Send Push Notifications
- 73. Safari Push Notification Provider-to-APNs Connection Trust
- 74. Safari Push Notification APNs-to-Device Connection Trust
- 75. Safari Push Notification Device Token Generation
- 76. Safari Push Notification Send Push Notifications Push Payload { "aps": { "alert": { "title": “Nike Milan", "body": “50% off for all Nike products.", "action": "View" }, "url-args": [“milan", “532401"] } }
- 77. Safari Push Notification Send Push Notifications Push Payload { "aps": { "alert": { "title": “Nike Milan", "body": “50% off for all Nike products.", "action": "View" }, "url-args": [“milan", “532401"] } }
- 78. Safari Push Notification Send Push Notifications Push Payload { "aps": { "alert": { "title": “Nike Milan", "body": “50% off for all Nike products.", "action": "View" }, "url-args": [“milan", “532401"] } }
- 79. Safari Push Notification Send Push Notifications Push 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
- 80. Safari Push Notification Push Notifications and Notification Center Push Package Icons websiteName urlFormatString Notification Payload title action body url-args
- 81. Safari Push Notification Push Notifications and Notification Center Push Package Icons websiteName urlFormatString Notification Payload title action body url-args
- 82. Safari Push Notification Push Notifications and Notification Center http://globalblue.com/%@?articleId=%@ [“milan", " 532401 "] Push Package Icons websiteName urlFormatString Notification Payload title action body url-args
- 83. Safari Push Notification Push Notifications and Notification Center http://globalblue.com/milan?articleId=532401 Push Package Icons websiteName urlFormatString Notification Payload title action body url-args
- 84. 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 Payload url-args: ["globalblue.com/brands/specials/boggi/boggi-milan/"]
- 86. Safari Push Notification Thank You
Editor's Notes
- From Certificates, Identifiers & Profiles section Website Push Certificate can be obtained First Register the Website Push ID Create certificate by following the instructions in the developers portal iOS developer license or Mac developer license : Used by the developers to develop, sign, and distribute your apps.
- Description: Within the developer portal this can be visible User, Safari or the server wont be able to see it Web Push ID will be used in the code to identify the website
- .p12: Personal Infomation Exchange bundle a private key with its X.509 certificate or to bundle all the members of a chain of trust. Contains the private key to sign the Push Package and Certificate to connect to the APNs
- 1. userInfo could peice of information to keep track of the user
- 1. Every arrow initiating from the Safari means safari is requesting to the webservice endpoints
- webServiceURL: the web service, which must start with https. The web server does not need to be the same domain as the website requesting permission. websitePushID: The Website Push ID, which must start with web.. userInfo: An object to pass to the server. Include any data in this object that helps you identify the user requesting permission. Callback: A callback function, which is invoked upon completion.
- A zipped archieve Has a defined directory structure
- displayed to the user in the permission prompt 2. Notification Center and 3. the notification itself 4. All six images must be in the iconset for it to be considered valid.
- webServiceURL: The location used to make requests to your web service websitePushID: he Website Push ID, as specified in your registration with the Member Center. websiteName: This is the heading used in Notification Center allowedDomains: An array of websites that are allowed to request permission from the user urlFormatString: Use %@ as a placeholder for arguments authenticationToken: A string that helps you identify the user. Must be 16 char length or greater
- contains an entry for each file where the local file path is the entry’s key and the file’s SHA1 checksum is the entry’s value Every file in the package must appear in the manifest, except for the manifest itself and the signature The manifest must strictly conform to RFC 4627.
- A PKCS #7 detached signature of the manifest file Sign the manifest file with the private key associated with your web push certificate If the contents of your push package ever change, you’ll need to recompute your signature. The iconsets and the website.json describe the website Both manifest.json and signature validates the websites identity
- Push Notification Confirmation Dialog
- Notification Packet = Payload + DeviceToken
- Each provider must have a unique provider certificate and private cryptographic key Used to validate the provider’s connection with APNs Provider establishes connection trust with APNs through TLS peer-to-peer authentication You initiate a TLS connection, get the server certificate from APNs Validate the APNs certificate from the provider end Then Provider send your provider certificate to APNs, which validates that certificate on its end Once this procedure is complete, a secure TLS connection is established APNs is now satisfied that the connection has been made by a legitimate provider.
- Each device has a device certificate and private cryptographic key Used to validate the device’s connection with APNs The device obtains its certificate and key at device activation time and stores them in the keychain. TLS peer-to-peer authentication the device initiates a TLS connection with APNs, which returns its server certificate The device validates this certificate and then sends its device certificate to APNs, which validates that certificate.
- A website must register with the system to receive remote notifications Upon receiving push package and validating it the device forward the request APNs APNs generates token using the device certificate After creation the token is encrypted using a token key The the device token is retuned to the device The device token is then provided to the Push Server/Provider for registration Without device token no one can send push notification
- Title: Required. The title of the notification Body: Required. The body of the notification. Action: Optional. The label of the action button, if the user sets the notifications to appear as alerts. This label should be succinct, such as “Details” or “Read more”. If omitted, the default value is “Show”.
- The url-args key specifies an array of values that are paired with the placeholders inside the urlFormatString The url-args key must be included.