Maxim Salnikov

@webmaxru

Getting started with

Progressive Web Apps

Progressive Web Apps — what are the advantages

and how to get started

Maxim Salnikov

@webmaxru

PWA Summit co-organizer
PWA Oslo / PWA London meetups organizer
Google Dev Expert in Web Tech / Capabilities & Installability

Developer Audience Lead at Microsoft

PWA chapter of Web Almanac 2021

https://almanac.httparchive.org/en/2021/pwa

Useful: Feature-rich, leveraging all power of the platform
Available: Easy to find and return to
Pleasant: Performant, smooth user experience

We want to build an app

At least two development teams required to build and support
Gated by the app stores
Some stores are sensitive to the applications built with templates and constructors
Very few players share vast majority of income on this market

Option #1: Native apps

Option #2: Cross-platform frameworks

It's always a compromise
Is it a future-proof investment?
Is it really write once - run everywhere?

Available almost everywhere
Constantly improving performance of JavaScript engines
Access to devices hardware
APIs for authentication & payments
Streamlined and future-proof learning curve

Option #3: True web

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(s)
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

https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps

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

A useful design pattern, not a formalized standard.

works everywhere*

* but not everything**

natively

** use progressive enhancement strategy

Native-like experiences?

Smart networking + Offline

Proper app experience

Staying notified

Background tasks

whatpwacando.today

=

+

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!

Let's build an App shell

My App

Define assets
Put in the cache
Serve from the cache
Manage versions

}

Service worker

Logically

"Physically"

-file(s)

App

Service-worker

Browser/OS

Event-driven worker

Cache

fetch

push

sync

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

Lots of things to care about...

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!!!

https://developers.google.com/web/tools/workbox/

Define assets
Put in the cache
Serve from the cache
Manage versions

}

Is there a helper?

?

https://developers.google.com/web/tools/workbox/

Balanced abstraction level
Declarativeness where appropriate
Modularity and extensibility
Rich functionality out of the box
Powerful tooling

~30% of the service workers — are...

Open source, active maintenance and support

Workbox sample

// Setting up an application shell
precacheAndRoute(self.__WB_MANIFEST);

// Runtime caching API calls
registerRoute(
  ({ url }) => url.hostname.includes("/api/"),
  new StaleWhileRevalidate()
);

// Your own listeners
self.addEventListener("push", (event) => {});

workbox-service-worker.js

aka.ms/workbox6

Video and slides
Source code

Better platform integration

Installation & run
Windowing
Outbound & inbound bindings
Native notifications
Background tasks
Access to hardware

Installation & run

Installation
Uninstallation
Run on user login
Shortcuts

Service Worker with "fetch"

Web App Manifest

{

{
  "name": "My PWA",
  "start_url": "/",
  "icons": [{
    "src": "icons/512x512.png",
    "sizes": "512x512",
    "type": "image/png"
  }]
}

site.webmanifest

https://web.dev/install-criteria/

Installation & run

Installation
Uninstallation
Run on user login
Shortcuts

"shortcuts": [{
  "name": "Upload Audio File",
  "url": "/upload-mp3",
  "icons": [{
    "src": "/icon-mp3.png",
    "sizes": "192x192"
  }]
}]

site.webmanifest

https://web.dev/app-shortcuts/

Windowing

Main window mode
Title bar overlay
Tabbed experience

{
  "display":
    "fullscreen" |
    "standalone" |
    "minimal-ui" |
    "browser"
}

site.webmanifest

https://github.com/WICG/display-override/blob/main/explainer.md

Windowing

Main window mode
Title bar overlay
Tabbed experience

titlebar-area-x
titlebar-area-y
titlebar-area-width
titlebar-area-height

CSS Variables

https://github.com/WICG/window-controls-overlay/blob/main/explainer.md

{
  "display_override": "window-controls-overlay"
}

site.webmanifest

Windowing

Main window mode
Title bar overlay
Tabbed experience

https://github.com/w3c/manifest/issues/737

{
  "display_override": "tabbed"
}

site.webmanifest

Bindings

Inbound Outbound

Protocol handlers
Declarative Link Capturing
URL handlers
File type handlers
Share target API

Web Share API
Contact Picker API
File Access API

PWA Builder & PWA Studio

PWABuilder.com

Full-fledged application platform
Offline-ready mechanisms are in production
Web apps are real apps
User experience & security is the key

And this is just the beginning!

Web platform today

Continue your PWA learning journey

aka.ms/3 0DaysOfPWA

Thank you!

Maxim Salnikov

@webmaxru

Getting started with

Progressive Web Apps

and how to get started

Maxim Salnikov

@webmaxru

PWA Summit co-organizer

PWA Oslo / PWA London meetups organizer

Google Dev Expert in Web Tech / Capabilities & Installability

PWA chapter of Web Almanac 2021

Useful: Feature-rich, leveraging all power of the platform

Available: Easy to find and return to

Pleasant: Performant, smooth user experience

We want to build an app

At least two development teams required to build and support

Gated by the app stores

Some stores are sensitive to the applications built with templates and constructors

Very few players share vast majority of income on this market

Option #1: Native apps

Option #2: Cross-platform frameworks

It's always a compromise

Is it a future-proof investment?

Is it really write once - run everywhere?

Available almost everywhere

Constantly improving performance of JavaScript engines

Access to devices hardware

APIs for authentication & payments

Streamlined and future-proof learning curve

Option #3: True web

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(s)

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.

works everywhere*

natively

Native-like experiences?

Smart networking + Offline

Proper app experience

Staying notified

Background tasks

whatpwacando.today

=

+

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!

Let's build an App shell

Define assets

Put in the cache

Serve from the cache

Manage versions

}

Service worker

Logically

"Physically"

-file(s)

Own service worker

handmade-service-worker.js

Lots of things to care about...

Redirects?

Fallbacks?

Opaque response?