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?