implementing os x push notifications for websites · directory structure of push package...
Post on 04-Jun-2020
9 Views
Preview:
TRANSCRIPT
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
Why Push Notifications?
• Timely and relevant• Easy to access
Why Push Notifications?
• Timely and relevant• Easy to access
Why Push Notifications?
• Timely and relevant• Easy to access• Go straight to the details
Why Push Notifications?
• Timely and relevant• Easy to access• Go straight to the details• Full control
Push Notifications
Push Notifications
What About Websites?
What About Websites?OS X Website Push Notifications
What You Will Learn
• Background• How it works• Implementation• Best practices
What You Will Learn
• Background• How it works• Implementation• Best practices
Background
Local Web Notifications
Local Web Notifications
Local vs. Push Notifications on Websites
Local
Local vs. Push Notifications on Websites
Local
PushApple Push Notification
Service
Local vs. Push Notifications on Websites
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
Local vs. Push Notifications on Websites
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
Local vs. Push Notifications on Websites
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
Local vs. Push Notifications on Websites
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
Local vs. Push Notifications on Websites
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
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
The same!
Push Notifications on Apps vs. Websites
For Native Apps For Websites on Mac
Availability
Attribution
Notification Center
Action
Anytime Anytime
App icon Website icon
Grouped per app Grouped per website
Opens app Opens web page
App Identity
App Identity
App Identity
App Identity
App Identity
Website Identity
??
Website Identity
PushPackage
PushPackage
Website Identity
PushPackage
Website Identity
Website Identity
PushPackage
What You Will Learn
• Background• How it works• Implementation• Best practices
What You Will Learn
• Background• How it works• Implementation• Best practices
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
DeviceTokenDeviceToken
Register
Prompt andConfirm
Validate
DeviceToken
User
Subscribing
Server
DeviceToken
Safari
DeviceToken
DeviceToken
CredentialsPackage
DeviceTokenDeviceToken
Register
Prompt andConfirm
Validate
DeviceToken
Server
DeviceToken
Safari
DeviceToken
UserDeviceToken
Subscribing
Server
DeviceToken
Safari
DeviceToken
DeviceToken
CredentialsPackage
DeviceTokenDeviceToken
Register
Prompt andConfirm
Validate
DeviceToken
Server
DeviceToken
Safari
DeviceToken
Unsubscribes
UserDeviceToken
Subscribing
Server
DeviceToken
Safari
DeviceToken
DeviceToken
CredentialsPackage
DeviceTokenDeviceToken
Register
Prompt andConfirm
Validate
DeviceToken
Server Safari
DeviceToken
Unsubscribes
UserUnregisterDeviceToken
Subscribing
Server
DeviceToken
Safari
DeviceToken
DeviceToken
CredentialsPackage
DeviceTokenDeviceToken
Register
Prompt andConfirm
Validate
DeviceToken
User
Subscribing
Server
DeviceToken
Safari
DeviceToken
Safari
DeviceToken
ServerWeb Page
Credentials
Subscribes
PushPackage
DeviceTokenDeviceToken
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
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
• Background• How it works• Implementation• Best practices
What You Will Learn
• Background• How it works• Implementation• Best practices
Implementation
Add Notification Support to Your Server
Get Website Push Certificate
What You Need to Do
Add Notification Support to Your Server
Get Website Push Certificate
What You Need to Do
Add Notification Support to Your Server
Get Website Push Certificate
What You Need to Do
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
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
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
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
Add Notification Support to Your Server
Get Website Push Certificate
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
var result = window.safari.pushNotification.permission(websitePushID
);
Query permission
Ask on Your Website
var result = window.safari.pushNotification.permission(websitePushID
);
• Three permissions "default" "denied" "granted"
Query permission
result.permission =
Ask on Your Website
var result = window.safari.pushNotification.permission(websitePushID
);
• Three permissions "default" "denied" "granted"
Query permission
result.permission =
Ask on Your Website
var result = window.safari.pushNotification.permission(websitePushID
);
• Three permissions "default" "denied" "granted"
Query permission
result.permission =
Ask on Your Website
var result = window.safari.pushNotification.permission(websitePushID
);
• Three permissions "default" "denied" "granted"
Query permission
result.permission =
Ask on Your Website
var result = window.safari.pushNotification.permission(websitePushID
);
• Three permissions "default" "denied"result.permission = "granted"
Query permission
Ask on Your Website
var result = window.safari.pushNotification.permission(websitePushID
);
• Three permissions "default" "denied"result.permission = "granted"
• When permission is grantedresult.deviceToken = "96385da7....88aaebaf"
Query permission
Request permissionAsk on Your Website
Request permissionAsk on Your Website
window.safari.pushNotification.requestPermission( webServiceURL, websitePushID, userInfo, callback);
Request permissionAsk on Your Website
window.safari.pushNotification.requestPermission( webServiceURL, websitePushID, userInfo, callback);
• Base URL to your web service• Must be https
Request permissionAsk on Your Website
window.safari.pushNotification.requestPermission( webServiceURL, websitePushID, userInfo, callback);
Request permissionAsk on Your Website
window.safari.pushNotification.requestPermission( webServiceURL, websitePushID, userInfo, callback);
• How your website passes information to your web service • Dictionary of strings
Request permissionAsk on Your Website
window.safari.pushNotification.requestPermission( webServiceURL, websitePushID, userInfo, callback);
Request permissionAsk on Your Website
window.safari.pushNotification.requestPermission( webServiceURL, websitePushID, userInfo, callback);
• When user confirmscallback({ permission: "granted", deviceToken: "96385da7....88aaebaf"});
Request permissionAsk on Your Website
window.safari.pushNotification.requestPermission( webServiceURL, websitePushID, userInfo, callback);
• When user confirmscallback({ permission: "granted", deviceToken: "96385da7....88aaebaf"});
Request permissionAsk on Your Website
window.safari.pushNotification.requestPermission( webServiceURL, websitePushID, userInfo, callback);
• When user deniescallback({ permission: "denied"});
Request permissionAsk on Your Website
window.safari.pushNotification.requestPermission( webServiceURL, websitePushID, userInfo, callback);
• When user deniescallback({ permission: "denied"});
2 Write Web Service Back End
3 Send Push Notifications
1 Ask on Your Website
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
Add Notification Support to Your Server
Get Website Push Certificate
What You Need to Do
Write Web Service Back End
SafariServer
DeviceToken
DeviceToken
Register
Write Web Service Back End
Web Page
Credentials
UserSubscribes
PushPackage
Prompt andConfirm
Validate
Prompt andConfirm
Safari
DeviceToken
DeviceToken
Register
Write Web Service Back End
PushPackage Credentials
Validate
Prompt andConfirmSafari
DeviceToken
DeviceToken
Register
Write Web Service Back End
PushPackage Credentials
Validate
Write Web Service Back End
DeviceToken
RegisterDeviceToken
Safari
CredentialsPush
Package
Report ErrorPrompt andConfirm
Validate
Write Web Service Back End
DeviceToken
RegisterDeviceToken
Safari
Credentials
Report ErrorPrompt andConfirm
Validate
PushPackage
Write Web Service Back End
DeviceToken
RegisterDeviceToken
Safari
Credentials
Report ErrorPrompt andConfirm
Validate
PushPackage
Return push packageWrite Web Service Back End
• POST/v1/pushPackages/<websitePushID>
• HTTP body is userInfo serialized as query string
Return push packageWrite Web Service Back End
• POST/v1/pushPackages/<websitePushID>
• HTTP body is userInfo serialized as query stringwindow.safari.pushNotification.requestPermission( webServiceURL, websitePushID, userInfo, callback);
Return push packageWrite Web Service Back End
• POST/v1/pushPackages/<websitePushID>
• HTTP body is userInfo serialized as query string{ "login": "brian@bayairlinesflyer.com", "frequentFlyerID": "2941035"}
Return push packageWrite Web Service Back End
• POST/v1/pushPackages/<websitePushID>
• HTTP body is userInfo serialized as query string{ "login": "brian@bayairlinesflyer.com", "frequentFlyerID": "2941035"}
Return push packageWrite Web Service Back End
• POST/v1/pushPackages/<websitePushID>
• HTTP body is userInfo serialized as query string{ "login": "brian@bayairlinesflyer.com", "frequentFlyerID": "2941035"}
login=brian@bayairlinesflyer.com&frequentFlyerID=2941035
Return push packageWrite Web Service Back End
• POST/v1/pushPackages/<websitePushID>
• HTTP body is userInfo serialized as query string{ "login": "brian@bayairlinesflyer.com", "frequentFlyerID": "2941035"}
login=brian@bayairlinesflyer.com&frequentFlyerID=2941035
BayAirlines.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
Directory Structure of Push Package
BayAirlines.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
Directory Structure of Push Package
BayAirlines.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
Directory Structure of Push Package
IconsUsed in notifications, Notification Center, Safari, and System Preferences
Directory Structure of Push Package
BayAirlines.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
Directory Structure of Push Package
BayAirlines.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
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=%@"
}
Directory Structure of Push Package
BayAirlines.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
{ "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=%@"
}
Directory Structure of Push Package
BayAirlines.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
{ "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=%@"
}
Directory Structure of Push Package
BayAirlines.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
{ "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=%@"
}
Directory Structure of Push Package
BayAirlines.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
{ "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=%@"
}
Directory Structure of Push Package
BayAirlines.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
{ "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=%@"
}
Directory Structure of Push Package
BayAirlines.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
BayAirlines.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
Directory Structure of Push Package
BayAirlines.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
Directory Structure of Push Package
ManifestJSON dictionary of SHA1 checksums
BayAirlines.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
Directory Structure of Push Package
icon_16x16.pngicon_16x16@2x.pngicon_32x32.pngicon_32x32@2x.pngicon_128x128.pngicon_128x128@2x.png
website.json
BayAirlines.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
Directory Structure of Push Package
icon_16x16.png
icon_16x16@2x.png
icon_32x32.png
icon_32x32@2x.png
icon_128x128.png
icon_128x128@2x.png
website.json
BayAirlines.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
Directory Structure of Push Package{
"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"
}
BayAirlines.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
Directory Structure of Push Package
BayAirlines.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
Directory Structure of Push Package
Signature of manifest.json
Write Web Service Back End
DeviceToken
RegisterDeviceToken
Safari
Credentials
Report Error
Validate
Prompt andConfirm
PushPackage
Write Web Service Back End
DeviceToken
RegisterDeviceToken
Safari
Credentials
Report ErrorPrompt andConfirm
PushPackage Validate
Write Web Service Back End
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."]}
Write Web Service Back End
DeviceToken
RegisterDeviceToken
Safari
Credentials
Prompt andConfirm
PushPackage
Report Error
Validate
Write Web Service Back End
DeviceToken
RegisterDeviceToken
Safari
CredentialsPush
Package
Report ErrorPrompt andConfirm
Validate
Push Package
Icons
websiteName
Push Notification Dialog
Push Package
Icons
websiteName
Push Notification Dialog
Push Package
Icons
websiteName
Push Notification Dialog
Write Web Service Back End
DeviceToken
RegisterDeviceToken
Safari
CredentialsPush
Package
Report ErrorPrompt andConfirm
Validate
Write Web Service Back End
Safari
CredentialsPush
Package
Report ErrorPrompt andConfirm
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>
Write Web Service Back End
Safari
CredentialsPush
Package
Report ErrorPrompt andConfirm
Validate
DeviceToken
RegisterDeviceToken
Write Web Service Back End
Safari
CredentialsPush
Package
Report ErrorPrompt andConfirm
DeviceToken
RegisterDeviceToken
Validate
2 Write Web Service Back End
3 Send Push Notifications
1 Ask on Your Website
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
Add Notification Support to Your Server
Get Website Push Certificate
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"] }}
Send Push Notifications
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"] }}
• 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
Send Push Notifications
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• 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
Notification Payload
title
action
body
url-args
Push Notifications and Notification Center
Push Package
Icons
websiteName
urlFormatString
Notification Payload
title
action
body
url-args
Push Notifications and Notification Center
Push Package
Icons
websiteName
urlFormatString
Notification Payload
title
action
body
url-args
Push Notifications and Notification Center
Push Package
Icons
websiteName
urlFormatString
Notification Payload
title
action
body
url-args
Push Notifications and Notification Center
Push Package
Icons
websiteName
urlFormatString
Notification Payload
title
action
body
url-args
Push Notifications and Notification Center
Push Package
Icons
websiteName
urlFormatString
Notification Payload
title
action
body
url-args
Push Notifications and Notification Center
Push Package
Icons
websiteName
urlFormatString
Notification Payload
title
action
body
url-args
Push Notifications and Notification Center
Push Package
Icons
websiteName
urlFormatString
Notification Payload
title
action
body
url-args
Push Notifications and Notification Center
Push Package
Icons
websiteName
urlFormatString
Notification Payload
title
action
body
url-args
Push Notifications and Notification Centerhttp://bayairlines.com/%@?flight=%@
Push Package
Icons
websiteName
urlFormatString
Notification Payload
title
action
body
url-args
Push Notifications and Notification Centerhttp://bayairlines.com/%@?flight=%@ ["gate-change", "A109"]
Push Package
Icons
websiteName
urlFormatString
Notification Payload
title
action
body
url-args
Push Notifications and Notification Centerhttp://bayairlines.com/%@?flight=%@ ["gate-change", "A109"]
Push Package
Icons
websiteName
urlFormatString
Notification Payload
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
Notification Payload
title
action
body
url-args
Push Notifications and Notification Centerhttp://bayairlines.com/gate-change?flight=A109
Push Package
Icons
websiteName
urlFormatString
Notification Payload
title
action
body
url-args
Push Notifications and Notification Centerhttp://bayairlines.com/gate-change?flight=A109
Demo
Brian WeinsteinSafari Engineer
What You Will Learn
• Background• How it works• Implementation• Best practices
What You Will Learn
• Background• How it works• Implementation• Best practices
Best Practices
For your notificationsBest Practices
• Think about what notifications are most useful
For your notificationsBest Practices
• Think about what notifications are most useful• Use notifications as an additional, not primary means of communication
For your notificationsBest Practices
• Think about what notifications are most useful• Use notifications as an additional, not primary means of communication• Take advantage of the URL format string
• Think about what notifications are most useful• Use notifications as an additional, not primary means of communication• Take advantage of the URL format string
For your notificationsBest Practices
Push Packagewebsite.json
NotificationPayload
urlFormatString:http://%@
url-args:["bayairlines.com/gate-change?flight=A109"]
For your notificationsBest Practices
• 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://bayairlines.com/%@?flight=%@
url-args:["gate-change", "A109"]
For your notificationsBest Practices
• 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
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(...);}
For your websiteBest Practices
• Think about what kind of service you want to provide
• Check API availability• Ask at the right time
For your websiteBest Practices
• Think about what kind of service you want to provide
• Check API availability• Ask at the right time• Give your users control
More Information
John GeleynseDirector, Technology Evangelismgeleynse@apple.com
Paul MarcosApplication Services Evangelistpmarcos@apple.com
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
top related