Web Push NotificationHuseyin BABAL

Full-Stack Software EngineerGittiGidiyor / eBay Turkey

Push Notifications allows you to let your visitors subscribe events on your website in order to send them targeted notifications

Push Notifications on Web ???

Why Web Push?

Problem

● Insufficient rate of e-mail reading● Disturbing SMS● Users do not want to use Mobile

Applications

Our aim

In GittiGidiyor, we have lots of visitors comes from mobile web via mobile phone, and we aim to reach them via native notifications

Result

We have developed Notifyer.io which is Web Push As a Service

More Technical

Table of Contents

● What is Service Worker?● What is Promise?● Google Cloud Message Account Setup● Sending Push Notification to Chrome● Demo

What is Service Worker

Background Sync

Offline Geofence

Push Notification

Service Worker

● JS worker● Has no DOM access● Programmable network proxy● Extensive use of promises● HTTPS is required● Domain specific

What is A Promise?

Represents eventual result of an

asynchronous operation

The states

● Pending

● Fulfilled

● Rejected

var messagePromise = new Promise(function(resolve, reject) {

fetch(“/messages”).then(function(response) {

response.ok? resolve(response.json()): reject(“Error occurred”)

});

});

messagePromise.then(function(result) {

console.log(“Success”);

}, function(err) {

console.log(“Error”);

})

messages.js

Google Cloud Message Account Setup

FCM is the new version of GCM. Firebase

currently does not have API for Web Push

Notifications, but you can use

VAPID(Voluntary APplication server

IDentification for push message) to send

messages through FCM.

Go to https://console.developers.google.com/

Dashboard

New Project

Overview

Enable API

Credentials

Credential Type

Browser Key

Browser Key Create

API Key

Project ID will be used in manifest.json

{

"name": "Push Notification Lab",

"gcm_sender_id": "XXXXXXXXXX"

}

manifest.json

Sending Push Notifications to Chrome

curl --header "Authorization: key=<API_KEY>"

--header Content-Type:"application/json"

https://android.googleapis.com/gcm/send -d

"{\"registration_ids\":[\"<SUBSCRIPTION_ID>\

"]}"

Handle Notifications on Client Side

Show Time!

https://www.github.com/huseyinbabal/pwa-push

Thank you!Questions?

http://bit.ly/pwa-push