Maxim Salnikov

@webmaxru

  • What are Progressive Web Apps (PWA)

  • The service worker API is the backbone of PWA functionality

Maxim Salnikov

  • PWAdvocate: speaker, trainer, tech blogger on PWA & Modern Web topics

  • Google Developer Expert in Web Tech

  • Mobile-/Web-/PWA-meetups organizer

  • Mobile Era & ngVikings conferences organizer

Developer Engagement Lead at Microsoft

Web as an app platform

  • Historically depends on the "connection status"

  • Historically limited to work in the browser, not a platform context

  • Evergreen browsers

  • Versatile language

  • Performant JS engines

  • Excellent tooling

  • Huge community

What is PWA at all?

Progressive Web Apps are web apps that use emerging web browser APIs and features along with traditional progressive enhancement strategy

to bring a native app-like user experience to cross-platform web applications.

A useful design pattern, not a formalized standard.

Controlled by service workers

Pages

0.9%

mobile

1%

desktops

Controlled by service workers

Page loads

18.2%

Service worker API

Networking

Caching

  • Capabilities

  • Installability

whatwebcando.today

APIs actively used in PWAs

  • Service Worker API

  • Cache API

  • IndexedDB

  • Fetch

  • Clients API

  • Broadcast Channel API

  • Push API

  • Notifications API

  • Local Storage

  • Session Storage

  • XMLHttpRequest

  • DOM

Not available in service worker:

works everywhere*

* but not everything**

natively

** use progressive enhancement strategy

Platforms / browsers support

Latest updates

Privacy

Functionality

Was web forked?

  • Standards

  • Progressive enhancement

}

Native-like experiences?

Smart networking + Offline

Proper app experience

Staying notified

Other cool things

}

Service Worker API

Web App Manifest

=

+

Service worker

Web App Manifest

Served via HTTPS

Proper offline-ready web app

  • App itself

  • Online runtime data

  • Offline runtime data

  • Connection failures

  • Updates

  • Platform features

  • Always available

  • Thoughtfully collected

  • Safely preserved

  • Do not break the flow

  • Both explicit and implicit

  • For the win!

While keeping its web nature!

Let's build an App shell

My App

  • Define assets

  • Put in the cache

  • Serve from the cache

  • Manage versions

}

Service worker

Service Worker

Logically

Physically

-file(s)

App

Service-worker

Browser/OS

Event-driven worker

Cache

fetch
push
sync

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

Lifecycle

'install'

Parsed

Installing

Activating

Redundant

'activate'

Waiting

Active

Own service worker

self.addEventListener('install', event => {
    // Use Cache API to cache html/js/css
})

self.addEventListener('activate', event => {
    // Clean the cache from the obsolete versions
})

self.addEventListener('fetch', event => {
    // Serve assets from cache or network
})

handmade-service-worker.js

Joke from 2019

Because...

Redirects?

Fallbacks?

Opaque response?

Versioning?

Cache invalidation?

Spec updates?

Cache storage space?

Variable asset names?

Feature detection?

Minimal required cache update?

Caching strategies?

Routing?

Fine-grained settings?

Kill switch?

I see the old version!!!

  • Define assets

  • Put in the cache

  • Serve from the cache

  • Manage versions

}

Is there a helper?

While having our own service worker

  • Let's start a practical part!

More platform tools

Even more capable web

  • Periodic Background Sync API

  • WebHID API

  • Scheduled Task / Notification API

  • Web Share Target API

  • Wake Lock API

  • Cookie Store API

  • User Idle Detection API

  • ...

Native File System API

Badging API

Contact Picker API

More than 100 new APIs

  • Full-fledged application platform

  • Offline-ready mechanisms are in production

  • Awesome tools are available

  • User experience & security is the key

And this is just the beginning!

Web platform today

  • 2000+ developers

  • Major browsers/frameworks/libs reps

Thank you!

Maxim Salnikov

@webmaxru

What are Progressive Web Apps (PWA)

By Maxim Salnikov

What are Progressive Web Apps (PWA)

Putting aside the marketing component of this popular term, let's look at the technical details: what exactly makes an application progressive, and why PWA can be a new era in the development of the web.

  • 290
Loading comments...

More from Maxim Salnikov