Maxim Salnikov

@webmaxru

The Phantom of the App: Background Services

What's available in browser's Background Services

And how to use this power for good

Maxim Salnikov

  • PWAConf igniter

  • PWA Oslo / PWA London meetups organizer

  • ngVikings / Mobile Era conferences organizer

  • Google Dev Expert in Web Technologies

Developer Audience Lead at Microsoft

What if we could have possibility to...

  • Keep app and its data always fresh when connected

  • Having notifications regardless of connection status

  • Automatically replay failed requests and have connection-resilient long fetches 

W/o bothering user

What is a Background Service?

  • Runs in a parallel thread

  • Has independent lifecycle

  • Initiated by particular events

Event types

  • Network connection state

  • Network operation status

  • Time-based

  • Invoked by the app backend

Service worker

Service

worker

OS

Browser

Internet

App

Event

Event

Event

Event

  • Message app

  • Launch the browser and app

  • Show notification

  • Run custom code

Message

  • Just-in-time server worker installation

  • Managing payment method UI

DevTools -> Application

  • One-off event for "offline-to-online"

  • To make sure the network operation will happen

DevTools -> Application

  • To detach data fetching process from the app lifespan

  • To make the request payload available in the app

DevTools -> Application

  • To run a custom code by the signal from the backend

  • Displaying a notification is obligatory

DevTools -> Application

  • Time-based activities

(Triggers)

DevTools -> Application

Periodic Background Sync API

Notification Triggers API

Timing

Interval-based

Time, one-off

Available actions

Custom code

Notification

Final decision and exact event time

User agent

Developer

Connection

Online only

Always

Prerequisites

Permission, installed app

Notification permission

Visibility

Transparent

Notification

Periodic background sync

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {

  registration.periodicSync.register('update-content', {
    
      // An interval of one day.
      minInterval: 24 * 60 * 60 * 1000
  })

}

main.js

Custom code - no notification

self.addEventListener('periodicsync', (event) => {
  if (event.tag === 'update-content') {
    
    // Think before you sync!
    event.waitUntil(updateContent());
  }
});

service-worker.js

  • Network connection type?

  • Data saver mode?

  • Available storage space?

Engagement Score Periodic Sync Interval (hours)
NONE Never
MINIMAL 36
LOW 24
MEDIUM 24
HIGH 12
MAX 12

Timing range in Chrome

Notification triggers

const registration = await navigator.serviceWorker.ready;
if ('showTrigger' in Notification.prototype) {
      
  // In 5 seconds from now
  const triggerTime =  Date.now() + 5 * 1000

  registration.showNotification('Notification Trigger Demo', {
    body: `Scheduled for ${new Date( triggerTime ).toLocaleTimeString()}`,
    showTrigger: new TimestampTrigger( triggerTime )
  });

}

main.js

Reminder about data sync

const registration = await navigator.serviceWorker.ready;
if ('showTrigger' in Notification.prototype) {

  registration.showNotification('Reminder', {
    tag: 'update-content',
    body: "Click to sync with the server",
      
    // Tomorrow, same time
    showTrigger: new TimestampTrigger(Date.now() + 24 * 60 * 60 * 1000)
  });

}

main.js

Custom code after the action

self.addEventListener('notificationclick', (event) => {
  if (event.notification.tag === 'update-content') {
    
    event.waitUntil(updateContentAndLaunchApp());
  }
});

service-worker.js

Availability & behavior

  • Platform and OS

  • Browser vendor and version

  • Browser settings and flags

  • Origin and install state

Long answer

Availability & behavior

Short answer

* Progressive = "Progressive Enhancement"

*

Summary

  • Goal: feature parity with the native code

  • User experience: features VS requirements

  • Developer experience: standards, tooling

It's just a beginning

  • 2000+ developers

  • Major browsers/frameworks/libs reps

Thank you!

Maxim Salnikov

@webmaxru

The Phantom of the App: Background Services

By Maxim Salnikov

The Phantom of the App: Background Services

Your user closes the browser tab and your excellent frontend app immediately disappears. But what if you want to build even better UX by keeping a portion of your app always alive - to send & receive events, to finish network operations, and to run some code even when a user does not have your website open? During my session, let's explore all the possibilities we have in the Service Worker-driven APIs to create true Phantoms of our apps. All for good: to keep the app itself and content always fresh, network operations - resilient, and user - notified This is a session about practical usage and the best practices of APIs forming Background Services of the modern browser: Background Fetch, Background Sync, Periodic Background Sync, Web Push. All in the context of Angular apps. First, I explain "why", then introduce the concept of "apps code running in the browsers' background" and then list exact possibilities: what's possible today and where, and what will be possible in the nearest future

  • 132
Loading comments...

More from Maxim Salnikov