implementing os x push notifications for websites · directory structure of push package...

These are confidential sessions—please refrain from streaming, blogging, or taking pictures

Session 614

Implementing OS X Push Notifications for Websites

Jon LeeSafari and WebKit Manager

Push Notifications

Why Push Notifications?

• Timely and relevant


• Timely and relevant• Easy to access


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


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

Push Notifications

What About Websites?

What About Websites?OS X Website Push Notifications

What You Will Learn

• Background• How it works• Implementation• Best practices

Background

Local Web Notifications

Local vs. Push Notifications on Websites

Local


Local

PushApple Push Notification

Service


Local Notifications Push Notifications

Availability

Attribution

Notification Center

Action

Only when website is open Anytime

Safari iconDomain name Website icon

Grouped under Safari Grouped per website

Makes tab frontmost Opens web page

Push Notifications on Apps vs. Websites

For Native Apps For Websites on Mac

Availability

Attribution

Notification Center

Action

Anytime

Website icon

Grouped per website

Opens web page



Availability

Attribution

Notification Center

Action

Anytime

Website icon

Grouped per website

Opens web page

The same!



Availability

Attribution

Notification Center

Action

Anytime Anytime

App icon Website icon

Grouped per app Grouped per website

Opens app Opens web page

App Identity

Website Identity

??

Website Identity

PushPackage

PushPackage

Website Identity

Website Identity

PushPackage

What You Will Learn


How It Works

Two Steps

2 Delivering

1 Subscribing

Safari

DeviceToken

Subscribing

ServerUser

Safari

DeviceToken

Subscribing

ServerWeb Page

User

Safari

DeviceToken

Subscribing

ServerWeb Page

UserSubscribes

Safari

DeviceToken

Subscribing

ServerWeb Page

Credentials

UserSubscribes

Safari

DeviceToken

Subscribing

ServerWeb Page

Credentials

UserSubscribes

PushPackage

Safari

DeviceToken

Subscribing

ServerWeb Page

Credentials

UserSubscribes

Validate

PushPackage

Safari

DeviceToken

Subscribing

ServerWeb Page

Credentials

UserSubscribes

Prompt andConfirm

Validate

PushPackage

Safari

DeviceToken

Subscribing

ServerWeb Page

Credentials

UserSubscribes

DeviceToken

DeviceToken

Register

Prompt andConfirm

Validate

PushPackage

Server

DeviceToken

Safari

DeviceToken

Safari

DeviceToken

ServerWeb Page

Credentials

Subscribes

PushPackage

DeviceTokenDeviceToken

Register

Prompt andConfirm

Validate

DeviceToken

User

Subscribing

Server

DeviceToken

Safari

DeviceToken

DeviceToken

CredentialsPackage


Register

Prompt andConfirm

Validate

DeviceToken

User

Subscribing

Server

DeviceToken

Safari

DeviceToken

DeviceToken

CredentialsPackage


Register

Prompt andConfirm

Validate

DeviceToken

Server

DeviceToken

Safari

DeviceToken

UserDeviceToken

Subscribing

Server

DeviceToken

Safari

DeviceToken

DeviceToken

CredentialsPackage


Register

Prompt andConfirm

Validate

DeviceToken

Server

DeviceToken

Safari

DeviceToken

Unsubscribes

UserDeviceToken

Subscribing

Server

DeviceToken

Safari

DeviceToken

DeviceToken

CredentialsPackage


Register

Prompt andConfirm

Validate

DeviceToken

Server Safari

DeviceToken

Unsubscribes

UserUnregisterDeviceToken

Subscribing

Server

DeviceToken

Safari

DeviceToken

DeviceToken

CredentialsPackage


Register

Prompt andConfirm

Validate

DeviceToken

User

Subscribing

Server

DeviceToken

Safari

DeviceToken

Safari

DeviceToken

ServerWeb Page

Credentials

Subscribes

PushPackage


Register

Prompt andConfirm

Validate

DeviceToken

User

Subscribing

DeviceToken

Subscribing

SafariServerUser

MessagePayload

DeviceToken

Subscribing

APNs

NotificationCenter

Safari

Server

User

Delivering

User

Safari

NotificationCenter

APNs

DeviceToken

Message Payload

Server

Delivering

User

Safari

NotificationCenter

APNs

DeviceToken

Message Payload

Server

NotificationPacket

Delivering

User

Safari

NotificationCenter

APNs

DeviceToken

Message Payload

Server

NotificationPacket

Click

Demo

Brian WeinsteinSafari Engineer

What You Will Learn


Implementation

Add Notification Support to Your Server

Get Website Push Certificate

What You Need to Do

2 Write Web Service Back End

3 Send Push Notifications

1 Ask on Your Website



What You Need to Do

Ask on Your WebsiteQuery permission

Ask on Your Website

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

);

Query permission

Ask on Your Website


);

• Three permissions "default" "denied" "granted"

Query permission

result.permission =

Ask on Your Website


);

• Three permissions "default" "denied"result.permission = "granted"

Query permission

Ask on Your Website


);

• Three permissions "default" "denied"result.permission = "granted"

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

Query permission

Request permissionAsk on Your Website


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



• Base URL to your web service• Must be https



• How your website passes information to your web service • Dictionary of strings



• When user confirmscallback({ permission: "granted", deviceToken: "96385da7....88aaebaf"});



• When user deniescallback({ permission: "denied"});






What You Need to Do

Write Web Service Back End

SafariServer

DeviceToken

DeviceToken

Register


Web Page

Credentials

UserSubscribes

PushPackage

Prompt andConfirm

Validate

Prompt andConfirm

Safari

DeviceToken

DeviceToken

Register


PushPackage Credentials

Validate

Prompt andConfirmSafari

DeviceToken

DeviceToken

Register


PushPackage Credentials

Validate


DeviceToken

RegisterDeviceToken

Safari

CredentialsPush

Package

Report ErrorPrompt andConfirm

Validate


DeviceToken

RegisterDeviceToken

Safari

Credentials


Validate

PushPackage

Return push packageWrite Web Service Back End

• POST/v1/pushPackages/<websitePushID>

• HTTP body is userInfo serialized as query string



• HTTP body is userInfo serialized as query stringwindow.safari.pushNotification.requestPermission( webServiceURL, websitePushID, userInfo, callback);



• HTTP body is userInfo serialized as query string{ "login": "[email protected]", "frequentFlyerID": "2941035"}

mailto:[email protected]

mailto:[email protected]



• HTTP body is userInfo serialized as query string{ "login": "[email protected]", "frequentFlyerID": "2941035"}

[email protected]&frequentFlyerID=2941035

BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png [email protected] icon_32x32.png [email protected] icon_128x128.png [email protected] website.json manifest.json signature

Directory Structure of Push Package



IconsUsed in notifications, Notification Center, Safari, and System Preferences



Defines websiteChecked during validation, used in notifications and Notification Center

{ "webServiceURL": "https://bayairlines.com/webService",

"websitePushID": "web.com.example.bayairlines",

"websiteName": "Bay Airlines",

"allowedDomains": ["http://bayairlines.com"],

"authenticationToken": "userID=1096172013",

"urlFormatString": "http://bayairlines.com/%@?flight=%@"

}



http://web.com.example.bayairlines

http://web.com.example.bayairlines

{ "webServiceURL": "https://bayairlines.com/webService",

"websitePushID": "web.com.example.bayairlines",

"websiteName": "Bay Airlines",

"allowedDomains": ["http://bayairlines.com"],

"authenticationToken": "userID=1096172013",

"urlFormatString": "http://bayairlines.com/%@?flight=%@"

}





ManifestJSON dictionary of SHA1 checksums



[email protected][email protected][email protected]

website.json



icon_16x16.png

[email protected]

icon_32x32.png

[email protected]

icon_128x128.png

[email protected]

website.json


Directory Structure of Push Package{

"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


DeviceToken

RegisterDeviceToken

Safari

Credentials

Report Error

Validate

Prompt andConfirm

PushPackage


DeviceToken

RegisterDeviceToken

Safari

Credentials


PushPackage Validate


DeviceToken

RegisterDeviceToken

Safari

Credentials

Prompt andConfirm

PushPackage

Report Error

Validate

Logging errorsWrite Web Service Back End

• POST/v1/log

• HTTP body{"logs": ["Referrer URL http://bayairlines.com/ is not in the list of allowed domains."]}


DeviceToken

RegisterDeviceToken

Safari

Credentials

Prompt andConfirm

PushPackage

Report Error

Validate


DeviceToken

RegisterDeviceToken

Safari

CredentialsPush

Package


Validate

Push Package

Icons

websiteName

Push Notification Dialog


DeviceToken

RegisterDeviceToken

Safari

CredentialsPush

Package


Validate


Safari

CredentialsPush

Package


Validate

DeviceToken

RegisterDeviceToken

Register user’s device tokenWrite Web Service Back End

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

• HTTP Authorize header fieldApplePushNotifications <authenticationToken>

Unregister user’s device tokenWrite Web Service Back End

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

• HTTP Authorize header fieldApplePushNotifications <authenticationToken>


Safari

CredentialsPush

Package


Validate

DeviceToken

RegisterDeviceToken


Safari

CredentialsPush

Package


DeviceToken

RegisterDeviceToken

Validate






What You Need to Do

• Similar to pushing notifications for apps

Send Push Notifications

• Similar to pushing notifications for apps{ "aps": { "alert": { "title": "Flight A109 Gate Changed", "body": "Your gate has changed to A4.", "action": "View" }, "url-args": ["gate-change", "A109"] }}



• Maximum size for message payload is 256 bytes




• Maximum size for message payload is 256 bytes• Always connect to production environment

Push Package

Icons

websiteName

urlFormatString

Notification Payload

title

action

body

url-args

Push Notifications and Notification Center

Push Package

Icons

websiteName

urlFormatString


title

action

body

url-args

Push Notifications and Notification Centerhttp://bayairlines.com/%@?flight=%@

http://livepage.apple.com/


Push Package

Icons

websiteName

urlFormatString


title

action

body

url-args

Push Notifications and Notification Centerhttp://bayairlines.com/%@?flight=%@ ["gate-change", "A109"]



Push Package

Icons

websiteName

urlFormatString


title

action

body

url-args

Push Notifications and Notification Centerhttp://bayairlines.com/gate-change?flight=A109http://bayairlines.com/%@?flight=%@["gate-change", "A109"]



Push Package

Icons

websiteName

urlFormatString


title

action

body

url-args

Push Notifications and Notification Centerhttp://bayairlines.com/gate-change?flight=A109

Demo

Brian WeinsteinSafari Engineer

What You Will Learn


Best Practices

For your notificationsBest Practices

• Think about what notifications are most useful


• Think about what notifications are most useful• Use notifications as an additional, not primary means of communication


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



Push Packagewebsite.json

NotificationPayload

urlFormatString:http://%@

url-args:["bayairlines.com/gate-change?flight=A109"]



Push Packagewebsite.json

NotificationPayload

urlFormatString:http://bayairlines.com/%@?flight=%@

url-args:["gate-change", "A109"]


• 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

For your web serverBest Practices

• Remove tokens when users unsubscribe

For your web serverBest Practices

• Remove tokens when users unsubscribe• Take advantage of userInfo and authenticationToken

For your websiteBest Practices

• Think about what kind of service you want to provide



• Check API availability

if (window.safari && window.safari.pushNotification) { var result = window.safari.pushNotification.permission(websitePushID);

if (result.permission === "default") window.safari.pushNotification.requestPermission(...);}



• Check API availability• Ask at the right time



• Check API availability• Ask at the right time• Give your users control

More Information

John GeleynseDirector, Technology [email protected]

Paul MarcosApplication Services [email protected]

DocumentationLocal and Push Notifications for Developershttp://developer.apple.com/notifications

Safari Developer Forumshttp://devforums.apple.com/Safari

Related Sessions

What’s New in Safari and WebKit for Web Developers MissionTuesday 9:00AM

Integrating Passbook into Your Ecosystem Pacific HeightsWednesday 3:15PM

Labs

Safari and Web Tools Lab Media Lab AFriday 2:00PM

Safari and WebKit Open Lab Media Lab AFriday 9:00AM

Summary

• Safari 7 supports website push notifications• App and website push notifications are the same• Safari validates your website’s identity

implementing os x push notifications for websites · directory structure of push package...

Documents