implementing os x push notifications for websites · directory structure of push package...
TRANSCRIPT
![Page 1: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/1.jpg)
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
![Page 2: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/2.jpg)
Push Notifications
![Page 3: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/3.jpg)
Why Push Notifications?
• Timely and relevant
![Page 4: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/4.jpg)
Why Push Notifications?
• Timely and relevant• Easy to access
![Page 5: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/5.jpg)
Why Push Notifications?
• Timely and relevant• Easy to access
![Page 6: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/6.jpg)
Why Push Notifications?
• Timely and relevant• Easy to access• Go straight to the details
![Page 7: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/7.jpg)
Why Push Notifications?
• Timely and relevant• Easy to access• Go straight to the details• Full control
![Page 8: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/8.jpg)
Push Notifications
![Page 9: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/9.jpg)
Push Notifications
![Page 10: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/10.jpg)
What About Websites?
![Page 11: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/11.jpg)
What About Websites?OS X Website Push Notifications
![Page 12: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/12.jpg)
What You Will Learn
• Background• How it works• Implementation• Best practices
![Page 13: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/13.jpg)
What You Will Learn
• Background• How it works• Implementation• Best practices
![Page 14: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/14.jpg)
Background
![Page 15: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/15.jpg)
Local Web Notifications
![Page 16: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/16.jpg)
Local Web Notifications
![Page 17: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/17.jpg)
Local vs. Push Notifications on Websites
Local
![Page 18: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/18.jpg)
Local vs. Push Notifications on Websites
Local
PushApple Push Notification
Service
![Page 19: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/19.jpg)
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
![Page 20: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/20.jpg)
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
![Page 21: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/21.jpg)
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
![Page 22: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/22.jpg)
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
![Page 23: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/23.jpg)
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
![Page 24: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/24.jpg)
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
![Page 25: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/25.jpg)
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!
![Page 26: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/26.jpg)
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
![Page 27: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/27.jpg)
App Identity
![Page 28: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/28.jpg)
App Identity
![Page 29: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/29.jpg)
App Identity
![Page 30: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/30.jpg)
App Identity
![Page 31: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/31.jpg)
App Identity
![Page 32: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/32.jpg)
Website Identity
??
![Page 33: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/33.jpg)
Website Identity
PushPackage
![Page 34: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/34.jpg)
PushPackage
Website Identity
![Page 35: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/35.jpg)
PushPackage
Website Identity
![Page 36: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/36.jpg)
Website Identity
PushPackage
![Page 37: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/37.jpg)
What You Will Learn
• Background• How it works• Implementation• Best practices
![Page 38: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/38.jpg)
What You Will Learn
• Background• How it works• Implementation• Best practices
![Page 39: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/39.jpg)
How It Works
![Page 40: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/40.jpg)
Two Steps
2 Delivering
1 Subscribing
![Page 41: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/41.jpg)
Safari
DeviceToken
Subscribing
ServerUser
![Page 42: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/42.jpg)
Safari
DeviceToken
Subscribing
ServerWeb Page
User
![Page 43: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/43.jpg)
Safari
DeviceToken
Subscribing
ServerWeb Page
UserSubscribes
![Page 44: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/44.jpg)
Safari
DeviceToken
Subscribing
ServerWeb Page
Credentials
UserSubscribes
![Page 45: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/45.jpg)
Safari
DeviceToken
Subscribing
ServerWeb Page
Credentials
UserSubscribes
PushPackage
![Page 46: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/46.jpg)
Safari
DeviceToken
Subscribing
ServerWeb Page
Credentials
UserSubscribes
Validate
PushPackage
![Page 47: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/47.jpg)
Safari
DeviceToken
Subscribing
ServerWeb Page
Credentials
UserSubscribes
Prompt andConfirm
Validate
PushPackage
![Page 48: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/48.jpg)
Safari
DeviceToken
Subscribing
ServerWeb Page
Credentials
UserSubscribes
DeviceToken
DeviceToken
Register
Prompt andConfirm
Validate
PushPackage
![Page 49: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/49.jpg)
Server
DeviceToken
Safari
DeviceToken
Safari
DeviceToken
ServerWeb Page
Credentials
Subscribes
PushPackage
DeviceTokenDeviceToken
Register
Prompt andConfirm
Validate
DeviceToken
User
Subscribing
![Page 50: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/50.jpg)
Server
DeviceToken
Safari
DeviceToken
DeviceToken
CredentialsPackage
DeviceTokenDeviceToken
Register
Prompt andConfirm
Validate
DeviceToken
User
Subscribing
![Page 51: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/51.jpg)
Server
DeviceToken
Safari
DeviceToken
DeviceToken
CredentialsPackage
DeviceTokenDeviceToken
Register
Prompt andConfirm
Validate
DeviceToken
Server
DeviceToken
Safari
DeviceToken
UserDeviceToken
Subscribing
![Page 52: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/52.jpg)
Server
DeviceToken
Safari
DeviceToken
DeviceToken
CredentialsPackage
DeviceTokenDeviceToken
Register
Prompt andConfirm
Validate
DeviceToken
Server
DeviceToken
Safari
DeviceToken
Unsubscribes
UserDeviceToken
Subscribing
![Page 53: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/53.jpg)
Server
DeviceToken
Safari
DeviceToken
DeviceToken
CredentialsPackage
DeviceTokenDeviceToken
Register
Prompt andConfirm
Validate
DeviceToken
Server Safari
DeviceToken
Unsubscribes
UserUnregisterDeviceToken
Subscribing
![Page 54: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/54.jpg)
Server
DeviceToken
Safari
DeviceToken
DeviceToken
CredentialsPackage
DeviceTokenDeviceToken
Register
Prompt andConfirm
Validate
DeviceToken
User
Subscribing
![Page 55: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/55.jpg)
Server
DeviceToken
Safari
DeviceToken
Safari
DeviceToken
ServerWeb Page
Credentials
Subscribes
PushPackage
DeviceTokenDeviceToken
Register
Prompt andConfirm
Validate
DeviceToken
User
Subscribing
![Page 56: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/56.jpg)
DeviceToken
Subscribing
SafariServerUser
![Page 57: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/57.jpg)
MessagePayload
DeviceToken
Subscribing
APNs
NotificationCenter
Safari
Server
User
![Page 58: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/58.jpg)
Delivering
User
Safari
NotificationCenter
APNs
DeviceToken
Message Payload
Server
![Page 59: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/59.jpg)
Delivering
User
Safari
NotificationCenter
APNs
DeviceToken
Message Payload
Server
NotificationPacket
![Page 60: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/60.jpg)
Delivering
User
Safari
NotificationCenter
APNs
DeviceToken
Message Payload
Server
NotificationPacket
![Page 61: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/61.jpg)
Delivering
User
Safari
NotificationCenter
APNs
DeviceToken
Message Payload
Server
NotificationPacket
![Page 62: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/62.jpg)
Delivering
User
Safari
NotificationCenter
APNs
DeviceToken
Message Payload
Server
NotificationPacket
Click
![Page 63: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/63.jpg)
Demo
Brian WeinsteinSafari Engineer
![Page 64: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/64.jpg)
What You Will Learn
• Background• How it works• Implementation• Best practices
![Page 65: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/65.jpg)
What You Will Learn
• Background• How it works• Implementation• Best practices
![Page 66: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/66.jpg)
Implementation
![Page 67: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/67.jpg)
Add Notification Support to Your Server
Get Website Push Certificate
What You Need to Do
![Page 68: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/68.jpg)
Add Notification Support to Your Server
Get Website Push Certificate
What You Need to Do
![Page 69: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/69.jpg)
Add Notification Support to Your Server
Get Website Push Certificate
What You Need to Do
![Page 70: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/70.jpg)
Add Notification Support to Your Server
Get Website Push Certificate
What You Need to Do
![Page 71: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/71.jpg)
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
![Page 72: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/72.jpg)
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
![Page 73: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/73.jpg)
![Page 74: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/74.jpg)
![Page 75: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/75.jpg)
![Page 76: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/76.jpg)
![Page 77: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/77.jpg)
![Page 78: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/78.jpg)
![Page 79: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/79.jpg)
![Page 80: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/80.jpg)
![Page 81: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/81.jpg)
![Page 82: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/82.jpg)
![Page 83: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/83.jpg)
![Page 84: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/84.jpg)
![Page 85: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/85.jpg)
![Page 86: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/86.jpg)
![Page 87: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/87.jpg)
![Page 88: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/88.jpg)
![Page 89: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/89.jpg)
![Page 90: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/90.jpg)
![Page 91: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/91.jpg)
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
![Page 92: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/92.jpg)
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
![Page 93: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/93.jpg)
Ask on Your WebsiteQuery permission
![Page 94: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/94.jpg)
Ask on Your Website
var result = window.safari.pushNotification.permission(websitePushID
);
Query permission
![Page 95: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/95.jpg)
Ask on Your Website
var result = window.safari.pushNotification.permission(websitePushID
);
Query permission
![Page 96: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/96.jpg)
Ask on Your Website
var result = window.safari.pushNotification.permission(websitePushID
);
• Three permissions "default" "denied" "granted"
Query permission
result.permission =
![Page 97: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/97.jpg)
Ask on Your Website
var result = window.safari.pushNotification.permission(websitePushID
);
• Three permissions "default" "denied" "granted"
Query permission
result.permission =
![Page 98: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/98.jpg)
Ask on Your Website
var result = window.safari.pushNotification.permission(websitePushID
);
• Three permissions "default" "denied" "granted"
Query permission
result.permission =
![Page 99: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/99.jpg)
Ask on Your Website
var result = window.safari.pushNotification.permission(websitePushID
);
• Three permissions "default" "denied" "granted"
Query permission
result.permission =
![Page 100: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/100.jpg)
Ask on Your Website
var result = window.safari.pushNotification.permission(websitePushID
);
• Three permissions "default" "denied"result.permission = "granted"
Query permission
![Page 101: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/101.jpg)
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
![Page 102: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/102.jpg)
Request permissionAsk on Your Website
![Page 103: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/103.jpg)
Request permissionAsk on Your Website
window.safari.pushNotification.requestPermission( webServiceURL, websitePushID, userInfo, callback);
![Page 104: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/104.jpg)
Request permissionAsk on Your Website
window.safari.pushNotification.requestPermission( webServiceURL, websitePushID, userInfo, callback);
• Base URL to your web service• Must be https
![Page 105: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/105.jpg)
Request permissionAsk on Your Website
window.safari.pushNotification.requestPermission( webServiceURL, websitePushID, userInfo, callback);
![Page 106: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/106.jpg)
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
![Page 107: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/107.jpg)
Request permissionAsk on Your Website
window.safari.pushNotification.requestPermission( webServiceURL, websitePushID, userInfo, callback);
![Page 108: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/108.jpg)
Request permissionAsk on Your Website
window.safari.pushNotification.requestPermission( webServiceURL, websitePushID, userInfo, callback);
• When user confirmscallback({ permission: "granted", deviceToken: "96385da7....88aaebaf"});
![Page 109: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/109.jpg)
Request permissionAsk on Your Website
window.safari.pushNotification.requestPermission( webServiceURL, websitePushID, userInfo, callback);
• When user confirmscallback({ permission: "granted", deviceToken: "96385da7....88aaebaf"});
![Page 110: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/110.jpg)
Request permissionAsk on Your Website
window.safari.pushNotification.requestPermission( webServiceURL, websitePushID, userInfo, callback);
• When user deniescallback({ permission: "denied"});
![Page 111: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/111.jpg)
Request permissionAsk on Your Website
window.safari.pushNotification.requestPermission( webServiceURL, websitePushID, userInfo, callback);
• When user deniescallback({ permission: "denied"});
![Page 112: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/112.jpg)
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
![Page 113: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/113.jpg)
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
![Page 114: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/114.jpg)
Write Web Service Back End
![Page 115: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/115.jpg)
SafariServer
DeviceToken
DeviceToken
Register
Write Web Service Back End
Web Page
Credentials
UserSubscribes
PushPackage
Prompt andConfirm
Validate
![Page 116: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/116.jpg)
Prompt andConfirm
Safari
DeviceToken
DeviceToken
Register
Write Web Service Back End
PushPackage Credentials
Validate
![Page 117: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/117.jpg)
Prompt andConfirmSafari
DeviceToken
DeviceToken
Register
Write Web Service Back End
PushPackage Credentials
Validate
![Page 118: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/118.jpg)
Write Web Service Back End
DeviceToken
RegisterDeviceToken
Safari
CredentialsPush
Package
Report ErrorPrompt andConfirm
Validate
![Page 119: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/119.jpg)
Write Web Service Back End
DeviceToken
RegisterDeviceToken
Safari
Credentials
Report ErrorPrompt andConfirm
Validate
PushPackage
![Page 120: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/120.jpg)
Write Web Service Back End
DeviceToken
RegisterDeviceToken
Safari
Credentials
Report ErrorPrompt andConfirm
Validate
PushPackage
![Page 121: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/121.jpg)
Return push packageWrite Web Service Back End
• POST/v1/pushPackages/<websitePushID>
• HTTP body is userInfo serialized as query string
![Page 122: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/122.jpg)
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);
![Page 123: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/123.jpg)
Return push packageWrite Web Service Back End
• POST/v1/pushPackages/<websitePushID>
• HTTP body is userInfo serialized as query string{ "login": "[email protected]", "frequentFlyerID": "2941035"}
![Page 124: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/124.jpg)
Return push packageWrite Web Service Back End
• POST/v1/pushPackages/<websitePushID>
• HTTP body is userInfo serialized as query string{ "login": "[email protected]", "frequentFlyerID": "2941035"}
![Page 125: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/125.jpg)
Return push packageWrite Web Service Back End
• POST/v1/pushPackages/<websitePushID>
• HTTP body is userInfo serialized as query string{ "login": "[email protected]", "frequentFlyerID": "2941035"}
[email protected]&frequentFlyerID=2941035
![Page 126: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/126.jpg)
Return push packageWrite Web Service Back End
• POST/v1/pushPackages/<websitePushID>
• HTTP body is userInfo serialized as query string{ "login": "[email protected]", "frequentFlyerID": "2941035"}
[email protected]&frequentFlyerID=2941035
![Page 127: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/127.jpg)
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
![Page 128: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/128.jpg)
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
![Page 129: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/129.jpg)
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
![Page 130: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/130.jpg)
Directory Structure of Push Package
BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png [email protected] icon_32x32.png [email protected] icon_128x128.png [email protected] website.json manifest.json signature
![Page 131: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/131.jpg)
Directory Structure of Push Package
BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png [email protected] icon_32x32.png [email protected] icon_128x128.png [email protected] website.json manifest.json signature
Defines websiteChecked during validation, used in notifications and Notification Center
![Page 132: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/132.jpg)
{ "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 [email protected] icon_32x32.png [email protected] icon_128x128.png [email protected] website.json manifest.json signature
![Page 133: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/133.jpg)
{ "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 [email protected] icon_32x32.png [email protected] icon_128x128.png [email protected] website.json manifest.json signature
![Page 134: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/134.jpg)
{ "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 [email protected] icon_32x32.png [email protected] icon_128x128.png [email protected] website.json manifest.json signature
![Page 135: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/135.jpg)
{ "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 [email protected] icon_32x32.png [email protected] icon_128x128.png [email protected] website.json manifest.json signature
![Page 136: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/136.jpg)
{ "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 [email protected] icon_32x32.png [email protected] icon_128x128.png [email protected] website.json manifest.json signature
![Page 137: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/137.jpg)
{ "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 [email protected] icon_32x32.png [email protected] icon_128x128.png [email protected] website.json manifest.json signature
![Page 138: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/138.jpg)
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
![Page 139: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/139.jpg)
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
ManifestJSON dictionary of SHA1 checksums
![Page 140: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/140.jpg)
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
[email protected][email protected][email protected]
website.json
![Page 141: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/141.jpg)
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
icon_16x16.png
icon_32x32.png
icon_128x128.png
website.json
![Page 142: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/142.jpg)
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{
"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"
}
![Page 143: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/143.jpg)
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
![Page 144: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/144.jpg)
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
Signature of manifest.json
![Page 145: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/145.jpg)
Write Web Service Back End
DeviceToken
RegisterDeviceToken
Safari
Credentials
Report Error
Validate
Prompt andConfirm
PushPackage
![Page 146: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/146.jpg)
Write Web Service Back End
DeviceToken
RegisterDeviceToken
Safari
Credentials
Report ErrorPrompt andConfirm
PushPackage Validate
![Page 147: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/147.jpg)
Write Web Service Back End
DeviceToken
RegisterDeviceToken
Safari
Credentials
Prompt andConfirm
PushPackage
Report Error
Validate
![Page 148: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/148.jpg)
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."]}
![Page 149: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/149.jpg)
Write Web Service Back End
DeviceToken
RegisterDeviceToken
Safari
Credentials
Prompt andConfirm
PushPackage
Report Error
Validate
![Page 150: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/150.jpg)
Write Web Service Back End
DeviceToken
RegisterDeviceToken
Safari
CredentialsPush
Package
Report ErrorPrompt andConfirm
Validate
![Page 151: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/151.jpg)
Push Package
Icons
websiteName
Push Notification Dialog
![Page 152: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/152.jpg)
Push Package
Icons
websiteName
Push Notification Dialog
![Page 153: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/153.jpg)
Push Package
Icons
websiteName
Push Notification Dialog
![Page 154: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/154.jpg)
Write Web Service Back End
DeviceToken
RegisterDeviceToken
Safari
CredentialsPush
Package
Report ErrorPrompt andConfirm
Validate
![Page 155: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/155.jpg)
Write Web Service Back End
Safari
CredentialsPush
Package
Report ErrorPrompt andConfirm
Validate
DeviceToken
RegisterDeviceToken
![Page 156: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/156.jpg)
Register user’s device tokenWrite Web Service Back End
• POST/v1/devices/<deviceToken>/registrations/<websitePushID>
• HTTP Authorize header fieldApplePushNotifications <authenticationToken>
![Page 157: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/157.jpg)
Unregister user’s device tokenWrite Web Service Back End
• DELETE/v1/devices/<deviceToken>/registrations/<websitePushID>
• HTTP Authorize header fieldApplePushNotifications <authenticationToken>
![Page 158: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/158.jpg)
Write Web Service Back End
Safari
CredentialsPush
Package
Report ErrorPrompt andConfirm
Validate
DeviceToken
RegisterDeviceToken
![Page 159: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/159.jpg)
Write Web Service Back End
Safari
CredentialsPush
Package
Report ErrorPrompt andConfirm
DeviceToken
RegisterDeviceToken
Validate
![Page 160: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/160.jpg)
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
![Page 161: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/161.jpg)
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
![Page 162: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/162.jpg)
• Similar to pushing notifications for apps
Send Push Notifications
![Page 163: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/163.jpg)
• 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
![Page 164: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/164.jpg)
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"] }}
![Page 165: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/165.jpg)
• 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
![Page 166: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/166.jpg)
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
![Page 167: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/167.jpg)
Push Package
Icons
websiteName
urlFormatString
Notification Payload
title
action
body
url-args
Push Notifications and Notification Center
![Page 168: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/168.jpg)
Push Package
Icons
websiteName
urlFormatString
Notification Payload
title
action
body
url-args
Push Notifications and Notification Center
![Page 169: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/169.jpg)
Push Package
Icons
websiteName
urlFormatString
Notification Payload
title
action
body
url-args
Push Notifications and Notification Center
![Page 170: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/170.jpg)
Push Package
Icons
websiteName
urlFormatString
Notification Payload
title
action
body
url-args
Push Notifications and Notification Center
![Page 171: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/171.jpg)
Push Package
Icons
websiteName
urlFormatString
Notification Payload
title
action
body
url-args
Push Notifications and Notification Center
![Page 172: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/172.jpg)
Push Package
Icons
websiteName
urlFormatString
Notification Payload
title
action
body
url-args
Push Notifications and Notification Center
![Page 173: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/173.jpg)
Push Package
Icons
websiteName
urlFormatString
Notification Payload
title
action
body
url-args
Push Notifications and Notification Center
![Page 174: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/174.jpg)
Push Package
Icons
websiteName
urlFormatString
Notification Payload
title
action
body
url-args
Push Notifications and Notification Center
![Page 175: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/175.jpg)
Push Package
Icons
websiteName
urlFormatString
Notification Payload
title
action
body
url-args
Push Notifications and Notification Center
![Page 176: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/176.jpg)
Push Package
Icons
websiteName
urlFormatString
Notification Payload
title
action
body
url-args
Push Notifications and Notification Centerhttp://bayairlines.com/%@?flight=%@
![Page 177: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/177.jpg)
Push Package
Icons
websiteName
urlFormatString
Notification Payload
title
action
body
url-args
Push Notifications and Notification Centerhttp://bayairlines.com/%@?flight=%@ ["gate-change", "A109"]
![Page 178: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/178.jpg)
Push Package
Icons
websiteName
urlFormatString
Notification Payload
title
action
body
url-args
Push Notifications and Notification Centerhttp://bayairlines.com/%@?flight=%@ ["gate-change", "A109"]
![Page 179: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/179.jpg)
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"]
![Page 180: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/180.jpg)
Push Package
Icons
websiteName
urlFormatString
Notification Payload
title
action
body
url-args
Push Notifications and Notification Centerhttp://bayairlines.com/gate-change?flight=A109
![Page 181: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/181.jpg)
Push Package
Icons
websiteName
urlFormatString
Notification Payload
title
action
body
url-args
Push Notifications and Notification Centerhttp://bayairlines.com/gate-change?flight=A109
![Page 182: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/182.jpg)
Demo
Brian WeinsteinSafari Engineer
![Page 183: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/183.jpg)
What You Will Learn
• Background• How it works• Implementation• Best practices
![Page 184: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/184.jpg)
What You Will Learn
• Background• How it works• Implementation• Best practices
![Page 185: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/185.jpg)
Best Practices
![Page 186: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/186.jpg)
For your notificationsBest Practices
• Think about what notifications are most useful
![Page 187: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/187.jpg)
For your notificationsBest Practices
• Think about what notifications are most useful• Use notifications as an additional, not primary means of communication
![Page 188: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/188.jpg)
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
![Page 189: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/189.jpg)
• 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"]
![Page 190: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/190.jpg)
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"]
![Page 191: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/191.jpg)
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
![Page 192: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/192.jpg)
For your web serverBest Practices
• Remove tokens when users unsubscribe
![Page 193: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/193.jpg)
For your web serverBest Practices
• Remove tokens when users unsubscribe• Take advantage of userInfo and authenticationToken
![Page 194: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/194.jpg)
For your websiteBest Practices
• Think about what kind of service you want to provide
![Page 195: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/195.jpg)
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(...);}
![Page 196: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/196.jpg)
For your websiteBest Practices
• Think about what kind of service you want to provide
• Check API availability• Ask at the right time
![Page 197: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/197.jpg)
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
![Page 198: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/198.jpg)
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
![Page 199: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/199.jpg)
Related Sessions
What’s New in Safari and WebKit for Web Developers MissionTuesday 9:00AM
Integrating Passbook into Your Ecosystem Pacific HeightsWednesday 3:15PM
![Page 200: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/200.jpg)
Labs
Safari and Web Tools Lab Media Lab AFriday 2:00PM
Safari and WebKit Open Lab Media Lab AFriday 9:00AM
![Page 201: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/201.jpg)
Summary
• Safari 7 supports website push notifications• App and website push notifications are the same• Safari validates your website’s identity
![Page 202: Implementing OS X Push Notifications for Websites · Directory Structure of Push Package BayAirlines.pushpackage/ icon.iconset/ icon_16x16.png icon_16x16@2x.png icon_32x32.png icon_32x32@2x.png](https://reader035.vdocuments.us/reader035/viewer/2022070723/5f020dee7e708231d4025968/html5/thumbnails/202.jpg)