safari push notification

Knowledge Sharing Session on Push Notification Service

Global Blue TeamFebruary 2016

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

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.

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": “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

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\/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"}

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

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"]

"aps": {"alert": {

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

"aps": {"alert": {

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

"aps": {"alert": {

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

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

Push Notifications and Notification Center

Push Package

websiteName

urlFormatString

NotificationPayload

action

url-args

Push Notifications and Notification Center

Push Package

websiteName

urlFormatString

NotificationPayload

action

url-args

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

Push Package

websiteName

urlFormatString

NotificationPayload

action

url-args

Safari Push NotificationPush Notifications and Notification Center

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

Push Package

websiteName

urlFormatString

NotificationPayload

action

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

sending push notifications using the windows push...

push notification...user will receive push notifications for...

urban airship and android integration for push notification...

azure push notification hub

push notification, live tile e background agent

push notification - idea, conception and tools

requirements of push notification

gcm (push notification)

cabestan's mobile application push notification management

hello, i'm push notification

phonegap/cordova: push notification on android

example mobile push notification service in rails

guide push notification - mmaf2015

skripsi implementasi push notification scheduler …

push notification delivery prediction framework

design and implementation of push notification system

push notification service for pivotal cloud foundry ... ·...

windows phone mango에서 push notification 활용

push notification to the open web

push notification - wifi quick start guidethe push...