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.

1. Push Notifications on the Open Web

2. Hello!
Ahmed Gamal Abd El haleem
Agamal.halem@gamil.com

3. 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.

4. “
If you ask a room of developers what mobile device
features are missing from the web, push notifications
are always high on the list.

5. Push Notifications on the open web
Your 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.

6. 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.

7. Implementing push messaging
for Chrome

8. 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

9. Service Workers
Service 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 ?!

10. 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.

11. You Can’t write code during sneeze.!
Java Script is multithread ?! Cont.

12. 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

13. 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

14. Server Worker is working in Background :
APP
Server
Web Site Tab Is
Opened (Online)
Web Site Tab Is
Not Opened
(Offline)
Service
worker
Service
worker

15. 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

16. Abstract View
Pushing Notifications Life Cycle

17. Push Life Cycle
Browser
Service
Workers
APIs
1 Register Service
Worker
2 Subscribe for
new blogs
4 Distribute Subscription
(only subscribes ids)
6 send subscriber id
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

18. 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.

19. 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;
}

20. Check Push APIs
// Check if push messaging is supported
if (!('PushManager' in window)) {
console.warn('Push messaging isn't supported.');
return;
}

21. 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/).

22. Push APIs
The 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.

23. Push APIs
Push 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 notifications
getSubscription: can use this to check if any subscription exists
already, i.e. is the user already subscribed
permissionState: returns the current push permission status, one of
granted, denied, prompt

24. Web Manifest
For 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>"
}

25. Thanks!
Any questions?