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
-
Angular Oslo, Mobile Meetup Oslo, Framsia, PWA Oslo 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
DevTools -> Application
-
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