Geeks Guide to Web Push v2
GEEKS GUIDE TO
NOTIFICATIONS
WEB PUSH DEFINED Visitors to a site subscribe to get notifications from that site.
SINGLE CLICK OPT-IN
PERSISTENT DELIVERY
Registers that browser/device with a persistent device token. (APNS or GCM)
Site can deliver notifications through that device persistently thereafter, even if cookies are cleared.
EASY UNSUBSCRIBE
CROSS-DEVICE
User can unsubscribe through the browser on which they subscribed, through browser preferences.
Chrome is providing the rudiments of cross-device persistence, others may follow.
GETTING STARTED
HOW TO INSTALL Place the Roost Javascript in your HEAD tag:
<script src='//cdn.goroost.com/roostjs/YOURID' async>
Three Chrome files go onto your server:
.html
.json
.js
roost.html Installs the service worker and handles notification clicks.
roost_manifest.json Identifies your site to Google and drives some of the backend push components.
roost_worker.js Receives the pushes, communicates with Roost, and shows the actual notifications.
THE NOTIFICATION
WHATS CUSTOMIZABLE?
CUSTOM BRANDING Your logo and site name appear on every message.
The Next Web https://thenextweb.com
Thanks for subscribing to web push from The Next Web!
TITLE Create custom titles or automate based on existing content.
URL Attached URL can be anything; web page, phone number, mail-to, etc.
SUBSCRIBER OPT-IN
CUSTOMIZING VIA JAVASCRIPT By default, subscribers opt-in for notifications on the first visit.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
//To opt-in on Xth visit: <script> var _roost = _roost || []; _roost.push(['autoprompt', false]); _roost.push(['minvisits', 3]); //To opt-in manually, first disable auto-prompting: <script> var _roost = _roost || []; _roost.push(['autoprompt', false]); //Then manually prompt for the subscription on an event: roost.prompt();
NOTIFICATION DELIVERY Subscribers receive notifications on the device on which they are registered.
ON DESKTOP Notification appears in the upper right corner on Mac and lower right corner on Windows. ON MOBILE Notification appears on the lockscreen or notification tray. Android stores 100 or more, iOS stores 6 notifications.
NOTIFICATIONS ARE DELIVERED THROUGH APNS OR GCM The Roost system takes a few seconds to process the notification, regardless of load. APNS and GCM may take up to a minute to pass the notification through to the device.
PUSH METHODS
3 WAYS TO SEND
1. MANUALLY Sent from the Roost dashboard to all subscribers or to specific subscriber segments.
2. AUTOMATED Plugins Wordpress & Drupal available for free. APIs Built on Node.js Client Interface: JavaScript Server Interface: REST Other language bindings coming soon. RSS Feed-fed pushes can be sent to segments of subscribers.
3. SCHEDULED Use the dashboard or Roost API to schedule notifications to be sent later. API example:
curl -X POST -u "<API Key>:<API Secret>" \ -H "Content-Type: application/json" \ -d "{'alert':'Planetary Travel Posters', \ 'url':'http://bit.ly/1C4s5aW', \ 'schedule_for':'2015-01-11T18:57:00Z'}" \ "https://go.goroost.com/api/push"
CLICKED
UNCLICKED
Browser will direct the user to the URL specified in the notification.
Unclicked notifications are stored in the Notification Center.
NOTIFICATIONS
NOTIFICATIONS
(In a new tab of course)
(Chrome stores 100 or more, iOS stores 6.)
SENDING NOTIFICATIONS
USING THE REST API Basic REST send:
curl -X POST -u ":" \ -H "Content-Type: application/json" \ --data '{"alert":"I am Testing the Roost API","url":"mailmanstories.com"}' \ https://api.goroost.com/api/push
Send with targeting and scheduling parameters:
curl -X POST -u ":" \ -H "Content-Type: application/json" \ --data '{"alert" : "Dog Bites Mailman", \ "url":"http://mailmanstories.com", \ "device_tokens" : ["xyz"], \ "segments" : ["Stories"], \ "aliases" : ["user123"], \ "exclude_tokens" : ["abc"], \ "schedule_for" : "2015-05-01T08:00:00Z"}' \ https://api.goroost.com/api/push
ADVANCED FEATURES
CUSTOMIZATION & PERSONALIZATION
AUDIENCE SEGMENTATION Automated Segmentation by Geography and Language Based on browser IP and settings: Country, City, State, Zipcode Custom Segments Defined in Roost dashboard and on the fly using API. Send to Segments Via the Roost Dashboard, Wordpress plugin, or API.
MULTI OPTION SPLIT-TESTING Specify any number of alternate notification titles in the dashboard, API, and Wordpress. Multi Armed Bandit Progressive Algorithm Batches of 250 are tested in 30 second cycles. Winning notification auto-selected and sent to remaining subscribers.
PERSONALIZATION User Self Segmentation Users presented with list of segments which represent different categories or streams of information. Publisher then targets these segments when sending pushes.
IMPLICIT TARGETING (Coming Soon) Machine Learning Algorithm Tests subscriber interest and progressively improves the fit between notifications sent and subscriber interest. Machine generated subscriber segments are matched to notifications based on clicks, push frequency, and page views while on site.
CHROME
SAFARI
Chrome's push technology is based on the new ServiceWorker W3C standard architecture. Therefore, Chrome relies on SSL/HTTPS as its primary security mechanism, so your site needs to be served via HTTPS.
Safari Security: Apple security is fairly transparent, as they control both the browser and the OS. Read about Apple's trust mechanisms.
SECURITY
SECURITY
Learn more at goroost.com
NOTIFICATIONS
WEB PUSH DEFINED Visitors to a site subscribe to get notifications from that site.
SINGLE CLICK OPT-IN
PERSISTENT DELIVERY
Registers that browser/device with a persistent device token. (APNS or GCM)
Site can deliver notifications through that device persistently thereafter, even if cookies are cleared.
EASY UNSUBSCRIBE
CROSS-DEVICE
User can unsubscribe through the browser on which they subscribed, through browser preferences.
Chrome is providing the rudiments of cross-device persistence, others may follow.
GETTING STARTED
HOW TO INSTALL Place the Roost Javascript in your HEAD tag:
<script src='//cdn.goroost.com/roostjs/YOURID' async>
Three Chrome files go onto your server:
.html
.json
.js
roost.html Installs the service worker and handles notification clicks.
roost_manifest.json Identifies your site to Google and drives some of the backend push components.
roost_worker.js Receives the pushes, communicates with Roost, and shows the actual notifications.
THE NOTIFICATION
WHATS CUSTOMIZABLE?
CUSTOM BRANDING Your logo and site name appear on every message.
The Next Web https://thenextweb.com
Thanks for subscribing to web push from The Next Web!
TITLE Create custom titles or automate based on existing content.
URL Attached URL can be anything; web page, phone number, mail-to, etc.
SUBSCRIBER OPT-IN
CUSTOMIZING VIA JAVASCRIPT By default, subscribers opt-in for notifications on the first visit.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
//To opt-in on Xth visit: <script> var _roost = _roost || []; _roost.push(['autoprompt', false]); _roost.push(['minvisits', 3]); //To opt-in manually, first disable auto-prompting: <script> var _roost = _roost || []; _roost.push(['autoprompt', false]); //Then manually prompt for the subscription on an event: roost.prompt();
NOTIFICATION DELIVERY Subscribers receive notifications on the device on which they are registered.
ON DESKTOP Notification appears in the upper right corner on Mac and lower right corner on Windows. ON MOBILE Notification appears on the lockscreen or notification tray. Android stores 100 or more, iOS stores 6 notifications.
NOTIFICATIONS ARE DELIVERED THROUGH APNS OR GCM The Roost system takes a few seconds to process the notification, regardless of load. APNS and GCM may take up to a minute to pass the notification through to the device.
PUSH METHODS
3 WAYS TO SEND
1. MANUALLY Sent from the Roost dashboard to all subscribers or to specific subscriber segments.
2. AUTOMATED Plugins Wordpress & Drupal available for free. APIs Built on Node.js Client Interface: JavaScript Server Interface: REST Other language bindings coming soon. RSS Feed-fed pushes can be sent to segments of subscribers.
3. SCHEDULED Use the dashboard or Roost API to schedule notifications to be sent later. API example:
curl -X POST -u "<API Key>:<API Secret>" \ -H "Content-Type: application/json" \ -d "{'alert':'Planetary Travel Posters', \ 'url':'http://bit.ly/1C4s5aW', \ 'schedule_for':'2015-01-11T18:57:00Z'}" \ "https://go.goroost.com/api/push"
CLICKED
UNCLICKED
Browser will direct the user to the URL specified in the notification.
Unclicked notifications are stored in the Notification Center.
NOTIFICATIONS
NOTIFICATIONS
(In a new tab of course)
(Chrome stores 100 or more, iOS stores 6.)
SENDING NOTIFICATIONS
USING THE REST API Basic REST send:
curl -X POST -u ":" \ -H "Content-Type: application/json" \ --data '{"alert":"I am Testing the Roost API","url":"mailmanstories.com"}' \ https://api.goroost.com/api/push
Send with targeting and scheduling parameters:
curl -X POST -u ":" \ -H "Content-Type: application/json" \ --data '{"alert" : "Dog Bites Mailman", \ "url":"http://mailmanstories.com", \ "device_tokens" : ["xyz"], \ "segments" : ["Stories"], \ "aliases" : ["user123"], \ "exclude_tokens" : ["abc"], \ "schedule_for" : "2015-05-01T08:00:00Z"}' \ https://api.goroost.com/api/push
ADVANCED FEATURES
CUSTOMIZATION & PERSONALIZATION
AUDIENCE SEGMENTATION Automated Segmentation by Geography and Language Based on browser IP and settings: Country, City, State, Zipcode Custom Segments Defined in Roost dashboard and on the fly using API. Send to Segments Via the Roost Dashboard, Wordpress plugin, or API.
MULTI OPTION SPLIT-TESTING Specify any number of alternate notification titles in the dashboard, API, and Wordpress. Multi Armed Bandit Progressive Algorithm Batches of 250 are tested in 30 second cycles. Winning notification auto-selected and sent to remaining subscribers.
PERSONALIZATION User Self Segmentation Users presented with list of segments which represent different categories or streams of information. Publisher then targets these segments when sending pushes.
IMPLICIT TARGETING (Coming Soon) Machine Learning Algorithm Tests subscriber interest and progressively improves the fit between notifications sent and subscriber interest. Machine generated subscriber segments are matched to notifications based on clicks, push frequency, and page views while on site.
CHROME
SAFARI
Chrome's push technology is based on the new ServiceWorker W3C standard architecture. Therefore, Chrome relies on SSL/HTTPS as its primary security mechanism, so your site needs to be served via HTTPS.
Safari Security: Apple security is fairly transparent, as they control both the browser and the OS. Read about Apple's trust mechanisms.
SECURITY
SECURITY
Learn more at goroost.com
