Maxim Salnikov

@webmaxru

A hidden life of your web application:

Background Services

What's available in browser's Background Services

And how to use this power for good

Maxim Salnikov

@webmaxru

  • PWA Summit 2021 (Oct 6-7) co-organizer

  • PWA Oslo / PWA London meetups organizer

  • Google Dev Expert in Web Tech / Capabilities & Installability

Developer Audience Lead at Microsoft

What web [frontend] can do now

  • Keep app and its data always fresh while online

  • Having notifications regardless of connection status

  • Automatically replay failed requests

  • Run connection-resilient long fetches 

In the background

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

DevTools -> Application

  • Just-in-time server worker installation

  • Managing payment method UI

DevTools -> Application

  • One-off event for "proper time to sync"

  • 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

https://web.dev/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

https://web.dev/periodic-background-sync/

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

chrome://site-engagement/

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: `Show at ${new Date( triggerTime ).toLocaleTimeString()}`,
    showTrigger: new TimestampTrigger( triggerTime )
  });

}

main.js

Availability & behavior

  • Platform and OS

  • Browser vendor and version

  • Browser settings and flags

  • Origin and install state

Long answer

https://whatwebcando.today

https://web-confluence.appspot.com

http://caniuse.com

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

https://goo.gle/fugu-api-tracker

aka.ms/pwa-slack

  • 2000+ developers

  • Major browsers/frameworks/libs reps

Thank you!

Maxim Salnikov

@webmaxru

Made with Slides.com