Push Notifications on Google ChromeGbolahan Alli@purple_heart_me

Google Developer Group, Ibadan

January, 2016

Google Chrome Browser

● Google Chrome is a freeware web browser[1] developed by Google.

● As of December 2015, StatCounter estimates that Google Chrome has a 58% worldwide usage share of web browsers as a desktop browser

● Also the most popular browser for smartphones, and combined across all platforms at about 45%

● Google Chrome is a port of Chromium

Download Google Chrome from https://www.google.com/chrome/

Push Notification … What is Push Notification all about ?

Push notifications allow your users to opt-in to timely updates from your web apps which would include using customized, engaging

content.●Available on Chrome 42 and above via the Push and Notification API’s

●Two sides to it

○ Client Side

■ Service Workers

■ Web App Manifests

○ Server Side

A server that sends out messages to the registered client.

Service Workers… What is this ?

●It is a type of web worker

●It is totally event-driven●It can outlive a user session

● It is a script that is generic

● It runs only at origin

Check out chrome://serviceworker-internals/ in your browser

Web App Manifests… What is this ?

●It is a type of JSON document ●Gives you control over how your

app appears to users●Allows you engage with your user

by adding your app to their homescreen

●It is lightweight●Provides information like app

name, author, icon and description

Codelabs !!! Codelabs !!! Codelabs !!!

1. Create a github page. e.g https://gdgibadan.github.io2. Open up your editor3. Create a simple project of your choice and let’s make it

implement Push notification

Client Side

● Installable web apps from Google Developers - https://goo.gl/RrL4XE

● Web Workers on W3School - http://goo.gl/1DKfS7 ● Service Worker API on Mozilla Developer Network -

https://goo.gl/qor35n ● W3C Web Manifest Working Draft - http://goo.gl/mxhoob ● Push Notifications on Open Web codelab from Google Developers -

https://goo.gl/kou8JT

Further reading

Catch with GDG Ibadan activities on social media

F : www.facebook.com/gdgibadanT : www.twitter.com/gdgibadanF Groups : www.facebook.com/groups/gdgibadan G+ : www.bit.ly/gdgibadanplus