Maxim Salnikov

@webmaxru

Push Notifications

My App

Maxim Salnikov

  • PWA Slack organizer

  • PWA Oslo / PWA London meetups organizer

  • PWA speaker and trainer

  • Google Dev Expert in Web Technologies

Azure Developer Technical Lead at Microsoft

Why is this important?

For user:

timely updates from websites you use

For publisher:

effectively re-engage users with customized, relevant content

Current support

Involved parties & flow

Feature detection

if (!('serviceWorker' in navigator)) {
  // Service Worker isn't supported on this browser
  // Disable or hide UI.
  return;
}

if (!('PushManager' in window)) {
  // Push isn't supported on this browser
  // Disable or hide UI.
  return;
}

Requesting permission

Notification.requestPermission().then(function(result) {
  if (result === 'denied') {
    console.log('Permission wasn\'t granted');
    return;
  }
  if (result === 'default') {
    console.log('The permission request was dismissed');
    return;
  }
  // Do something with the granted permission
  // result === 'granted' in this case
});

UX patterns

  • Ask to subscribe at a time when the benefit is obvious

  • Antipattern: to show the permission dialog to users as soon as they land on your site

  • Consider how a user should unsubscribe or opt out of push messaging.

Allow users to unsubscribe.

Otherwise they'll block!

Subscribing

navigator.serviceWorker.register('/service-worker.js')
  .then(function(registration) {
    const subscribeOptions = {
      userVisibleOnly: true,
      applicationServerKey: 'key...'
    };

    return registration.pushManager.subscribe(subscribeOptions);
  })
  .then(function(pushSubscription) {
    console.log(JSON.stringify(pushSubscription));
    return pushSubscription;
  });
{
  "endpoint": "https://particular-push-service.com/long-unique-id/",
  "keys": {
    "p256dh": "BNcRdreALRFXTkOOUHK1EtK2wtaz5Ry4YfYCA=",
    "auth": "tBHItJI5svbpez7KI4CCXg=="
  }
}

Push event

self.addEventListener('push', function(event) {

  notification = event.data.json()

  event.waitUntil(
    self.registration.showNotification(
      notification.title, notification.options
    )
  )

})

Notification UX

const title = 'Something Has Happened'
const options = {
  message: 'Something you might want to check out',
  icon: '/assets/images/logo.png'
}
self.registration.showNotification(title, options)

MyAirline

Online check in is available

MyAirline

myairline.com

Flight

DY1043

Depart

21.09 13:45

OSL -> LAX

Click here to check in now

myairline.com

  • Do not Repeat Yourself

  • Provide actual information instead of notifying about it

  • Give a call to action

Notification actions

self.addEventListener('notificationclose', function(event) {
  const dismissedNotification = event.notification

  event.waitUntil( triggerAnalytics( dismissedNotification ) )
})

self.addEventListener('notificationclick', function(event) {
  const clickedNotification = event.notification
  clickedNotification.close()

  event.waitUntil( performAction( clickedNotification ) );
});
  • Open a window

  • Focus an existing window

  • Message a page from a push event

Thank you!

Maxim Salnikov

@webmaxru

Questions?

Maxim Salnikov

@webmaxru