push notification to the open web
Post on 16-Apr-2017
142 Views
Preview:
TRANSCRIPT
Push Notifications on the Open Web
Hello!
Ahmed Gamal Abd El haleemAgamal.halem@gamil.com
Why Pushing Notification?Push notifications allow your users to opt-in to timely updates from sites they love and allow you to effectively re-engage them with customized, engaging content.
“If you ask a room of developers what mobile device features are missing from the web, push notifications are always high on the list.
Push Notifications on the open webYour favorite websites can now send notifications to Chrome on Android & Desktop . When visiting a site that supports notifications, you will receive a prompt asking you if you'd like to turn them on. When you do, that website can send you push notifications whether you have the browser open or not. You can manage those notifications in a settings screen within Chrome — unfortunately, the site-by-site settings live there, not inside the usual spot for notifications settings in Android.
Push Notifications on the open web cont.
The Push API in Chrome relies on a few different pieces of technology, including Web App Manifests and Service Workers. In this presentation we’ll look at each of these technologies, to get push messaging up and running and get a better understanding of some of the other features of manifests and the offline capabilities of service workers.
Implementing push messaging for Chrome
Used APIs for pushing messaging for chrome :◇ Service Workers API : handles the push message when it arrives in the
background◇ Push API : enables users to subscribe, unsubscribe and receive push
messages◇ Notifications API : handles notification display.◇ Web app manifest specification : configures meta information about a
web-app
Service WorkersService workers are a key part of getting push notifications up and running. They offer offline capabilities by providing a way for a web page to run scripts in the background without having the page open. This makes it possible to build rich offline experiences previously only possible with native apps. For a good tutorial on service workers.
How it Can Work In Back Ground ?!
Java Script is multithread ?!JavaScript is single threaded, meaning that two bits of script cannot run at the same time, they have to run one after another. In browsers, JavaScript shares a thread with a load of other stuff. What that stuff is differs from browser to browser.
You Can’t write code during sneeze.!
Java Script is multithread ?! Cont.
JavaScript is usually considered to have a single thread of execution visible to scripts(*), so that when your inline script, event listener or timeout is entered, you remain completely in control until you return from the end of your block or function.
Events and timeout !
Java script sheets are being loaded sequentially
highlighting text when mouse-over event fired
JavaScript is usually considered to have a single thread of execution visible to scripts(*), so that when your inline script, event listener or timeout is entered, you remain completely in control until you return from the end of your block or function.
Promises And Callback
Server Worker is working in Background :
APP Server
Web Site Tab Is Opened (Online)
Web Site Tab Is Not Opened
(Offline)
Push new Notification
Push new Notification
Service worker
Service worker
Show Notification
Show
Notification
IndexedDB and other Examples of Client Side browser Databases.Use Case :You can shopping an ecommerce web site and add your products to card and check out without having network connection . Yes ! You Can.
Limitations : IndexedDB has no hard storage limits on it’s own. However, browser vendors have soft limits. Firefox will ask for permission to store blobs bigger than 50 MB. Google Chrome has various limits for different use cases, for more information about Chrome limits see https://developers.google.com/chrome/whitepapers/storage
Java Script Community Are doing Well ! .
Offline Experience Use Case
Abstract ViewPushing Notifications Life Cycle
Push Life Cycle
Browser
Service Workers
APIs
1 Register ServiceWorker
2 Subscribe for new blogs
4 Distribute Subscription(only subscribes ids)
5 push notification forSubscribed clients
(Tell Clients that there is
a new content on the server)6 send subscriber id
Https R
eques
thttp
s Res
ponse Clie
nt
Side(Js,h
tml,c
ss)
Cloud Messaging Server (GCM)
Push APIs
7 fetch new content from app server
App server
Web app
New Content
Subscribers ids in DB or
File
Register Service Worker 1-Register Service Worker :To register a service worker, first check for support, then call the register() method.
Now we have a service worker that we can use. The service worker code will be in the sw.js file in this case. This file will be validated when the service worker is first registered. We’ll come back to this file later.
Register Worker Service Cont.
// Once the service worker is registered set the initial state function initialiseState() { // Are Notifications supported in the service worker? if (!('showNotification' in ServiceWorkerRegistration.prototype)) { console.warn('Notifications aren\'t supported.'); return; } // Check the current Notification permission. // If its denied, it's a permanent block until the // user changes the permission if (Notification.permission === 'denied') { console.warn('The user has blocked notifications.'); return; }
Check Push APIs
// Check if push messaging is supported if (!('PushManager' in window)) { console.warn('Push messaging isn\'t supported.'); return; }
Notes On Service Worker
During development you'll be able to use service worker through localhost, but to deploy it on a site you'll need to have HTTPS setup on your server.
Using service worker you can hijack connections, fabricate, and filter responses. Powerful stuff. While you would use these powers for good, a man-in-the-middle might not
One subtlety with the register method is the location of the service worker file. You'll notice in this case that the service worker file is at the root of the domain. This means that the service worker's scope will be the entire origin. In other words, this service worker will receive fetch events for everything on this domain. If we register the service worker file at /example/sw.js, then the service worker would only see fetch events for pages whose URL starts with /example/ (i.e. /example/page1/, /example/page2/).
Push APIsThe Push API enables sending of a push message to a webapp via a push service. An application server can send a push message at any time, even when a webapp or user agent is inactive.
Service Workers
Push Service Push Subscription Context EP
throw webpush-protocol.
Push APIsPush Service :The term push service refers to a system that allows application servers to send push messages to a webapp. A push service serves the push endpoint or endpoints for the push subscriptions it serves throw webpush-protocol.
A push subscription is a message delivery context established between the user agent and the push service on behalf of a webapp. Each push subscription is associated with a service worker registration and a service worker registration has at most one push subscription.
The Push API defines the PushManager interface, which has a few methods that we’re interested in:
subscribe/unsubscribe: used to subscribe/unsubscribe a user to receive notificationsgetSubscription: can use this to check if any subscription exists already, i.e. is the user already subscribedpermissionState: returns the current push permission status, one of granted, denied, prompt
Web ManifestFor push, we need to add a manifest file with a gcm_sender_id field, to get the push subscription to succeed. This parameter is only required by Chrome to use GCM.
{ "name": "Push Demo", "short_name": "Push Demo", "icons": [{ "src": "images/icon-192x192.png", "sizes": "192x192", "type": "image/png" }], "start_url": "/index.html?homescreen=1", "display": "standalone", "gcm_sender_id": "<Your GCM Project ID Without the Hash>"}
Thanks!Any questions?
top related