PWA Cheat Sheet 2023

App built with web technologies
It works fast while online or offline
It can be installed on different platforms

Idealforallthoseappsthat
consumewebcontentorweb
services

Web App
Web App
Service Worker

Web App
Web App
Web App
Service Worker
Distribution

Web App
Web App
Web App
No Service Worker
Distribution

3
Responsive Web Design
Progressive Enhancement Everything First
Web Performance
Web App Foundations

PWA Support - Desktop
Win 7 / 8.x
Linux

PWA Support
Offline Support within a browser: 96%
App Experience with Icon installation: 92%

webview
webview
No Installation Support

Basic PWA support
Service Worker (Optional)
Web App Manifest
Web Performance
App Experience
Platform Integration
Installation Experience

1.1 Custom Install UI

Render infobar or
banner (cancellable)
Add a badge Create a desktop
menu item and
Android with
WebAPK
my.app
Add this App to Home screen
my.app + Install
Allow developer to
provide a custom
install button
my.app
Install App
my.app
Install this App
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Installation Availability Will...

my.app
Install App
Create a Custom Install Promotion
my.app
Install
lorem ipsum
lorem ipsum
lorem ipsum
my.app
Install this App in your device

beforeinstallprompt
Event
It was part of Web App Manifest spec
Now implemented by Chromium only
Event is fired when:
- - Current URL passes the PWA criteria
- - The PWA is not already installed

Promote Install through a Custom UI
window.addEventListener('beforeinstallprompt', event => {
});
script.js
Available only on Chromium-based browser

// we prevent a banner or infobar to appear
event.preventDefault();
});
script.js

// we save the prompt event in a global variable
let installPromptEvent;
});
script.js

// we save the event for later usage
installPromptEvent = event
});
script.js

installButton.addEventListener('click', event => {
});
script.js

installButton.addEventListener('click', event => {
if (installPromptEvent) {
installPromptEvent.prompt();
} else {
// Prompt not available: Display fallback instructions
}
});
script.js

1.2 Enhanced Dialog

Installation Installation Banner

Improved
Installation
Banner
Available on Android
Coming soon to desktop
"Add to Homescreen" to "Install"
It includes: app's icon, name, description
and screenshots
You need to provide in your manifest:
- Description
- Screenshots (array of images)

1.3 Identi
fi
cation

PWA Identification
Originally, we didn't have any way to identify
a PWA
Is it the origin?
Is it the start_url?
Is it the manifest url?
On every OS is different
Why is it important?

New id member
{
"id": "pwa-id"
"start_url" :/"
}
app.webmanifest
Used only on Chromium on desktop as of today

id member
If you deployed your app before 2021, use
Chrome DevTools and use
Computed App Id defined in Manifest section
If you are deploying the PWA now, define the
id property of your own
Any string that will be unique within your
origin

Basic PWA support
Web App Manifest
Web Performance
Custom Install UI
Enhanced Android Dialog
App Identi
fi
cation

App Experience
2.1 App Icons & Splash Screens

A maskable icon will solve
the problem; it's still a square
icon but with enough
discardable padding content
out of a safe area

Safe Area on Maskable Icons
Radius 40%

"icons": [
{
"src": "icon.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "maskable.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
• Maskable Icon
• Recommended size: 512x512
• purpose: "maskable"
Web app manifest

Online Tool for Maskable Icons

Safari ignores icons with
maskable in App Manifest

App Manifest Icons on iOS and iPadOS

If one icon for all will be
provided, it should be a
180x180 PNG

SVG Icons
Chromium on desktop
Chrome on Android coming!

Icon
Recommendation
One 512x512 non-maskable icon
One 512x512 maskable icon
One 180x180 iOS/iPadOS icon
One SVG icon

Splash Screens on Android
Automatically generated
by the browser
You can't create your own
images

My Great PWA
Splash Screens on Android
theme_color
background_color
icon (512x512 preferred)
name

The problem on Safari is that
it needs the image with the
exact size of the device's
screen

Differences over Android Solution
Full Customization Dark mode Needs lot of work

Providing Startup Images for iOS and iPadOS
Manually Static generator Client-side library Server-side
library

Static Generator: pwa-asset-generator

Theme Color Web App Manifest
{
"theme_color": "pink"
}
app.webmanifest

Theme Color Meta Tag
<meta name="theme-color" content="pink">
index.html

Dynamic Theme Color Meta Tag
document.querySelector("meta[name=theme-color]")
.content = "pink"
index.html

CSS Accent Color (new)
input {
accent-color: pink
}
styles.css

Theme Color Meta Tag
<meta name="theme-color"
media="(prefers-color-scheme: light)"
content="pink">
<meta name="theme-color"
media="(prefers-color-scheme: dark)"
content="salmon">
index.html

CSS Accent Color (new)
:root {
color-scheme: light dark;
}
input {
accent-color: pink
}
@media (prefers-color-scheme: dark) {
input {
accent-color: salmon
}
}
styles.css

App Experience
2.3 Desktop Enhancements

86
(A) <title>
(B) Controlling Windows
(C) New APIs
Desktop Enhancements

The new life of
<title>
Not for SEO anymore
OS window's title
Use your exact app's name in the string

Controlling Desktop Windows
window.moveTo(16, 16);
window.resizeTo(800, 600);
window.open("", "_blank", "");
Script
Nostalgia time

Multi-Screen Windows Placement API
const screenDetails = await window.getScreenDetails();
screenDetails.addEventListener('screenschange', e() => {
}
Script
Advanced Screen Management

Windows Controls Overlay
{
"display": "standalone",
"display_override": ["window-controls-overlay"]
}
app.webmanifest
Let us render content in the title bar

Basic PWA support
Web App Manifest
Web Performance
App Experience
App
Th
eming
App Icons and Splash Screens
Custom Install UI
App Identi
fi
cation

3.1 Modern Authentication

98
(A) Web Authn
(B) Passkeys
(C) Bye Captcha!
Modern Authentication

Web Authentication
FIDO
Authentication agnostic
Biometrics
Security Keys
New ideas
Password+WebAuthn
Passwordless

•FaceID and TouchID on macOS, iOS and iPadOS

3.2 Background execution

107
(A) Background Sync
(B) Periodic Sync
(C) Web Push
Background Execution

Background
Sync
PWA defers a sync action until the device has
a stable connection to the server
A 'sync' event will be fired in the Service
Worker to handle a pending sync:
•Immediately if network is stable
•Later, when network go back to stable
•If battery is in good level
We access the network and fulfill
the sync or leave it pending
Execution happens in the background

Step 1: Register a Background Sync Action
script.js
Available from the window or service worker's contexts

Step 1: Register a Background Sync Action
if ('SyncManager' in window) {
const registration = await navigator.serviceWorker.ready;
registration.sync.register("tag-name");
}
script.js
Available from the window or service worker's contexts

Step 2: Handle the Sync Action
serviceworker.js
This happens in the service worker's context at any moment

Step 2: Handle the Sync Action
self.addEventListener('sync', event => {
if (event.tag == 'tag-name') {
event.waitUntil(syncOperation());
}
});
serviceworker.js
This happens in the service worker's context at any moment

Periodic
Background
Sync
PWA asks user for permission to periodically
execute code in the background
A 'periodicsync' event will be fired in
the Service Worker:
•On a synchronization time interval
•If battery and network conditions are met
We typically access the network on each
execution, but it's not mandatory
Execution happens in the background

Execution frequency will be
honored based on a Site
Engagement Score defined
by the browser

Step 1: Ask for Periodic Sync Permission
script.js
Permission will be granted based on Site Engagement Score

Step 1: Ask for Periodic Sync Permission
const permissionStatus = await navigator.permissions.query({
name: 'periodic-background-sync',
});
script.js
Permission will be granted based on Site Engagement Score

Step 2: Register a Background Sync Operation
script.js
It requires a tag and a synchronization interval in milliseconds

await registration.periodicSync.register('sync-tag', {
minInterval: 24 * 60 * 60 * 1000 // One day
});
}
script.js

if ('periodicSync' in registration) {
try {
await registration.periodicSync.register('sync-tag', {
minInterval: 24 * 60 * 60 * 1000 // One day
});
} catch (error) { }
}
script.js

Step 3: Handle the Periodic Sync Operation
serviceworker.js
It will be executed in the Service Worker

Step 3: Handle the Periodic Sync Operation
self.addEventListener('periodicsync', (event) => {
if (event.tag === 'sync-tag') {
event.waitUntil(doPeriodicSyncOperation());
}
});
serviceworker.js
It will be executed in the Service Worker

Web Push
Notifications
PWA asks permission to send notifications
to the user
If granted, now the service worker can create
a notification from the background
Also, the PWA can subscribe the user to Push
A 'push' event will be fired in the Service
Worker to handle a push
Firefox, Chrome, Edge, Samsung Internet
Safari?

Safari will support Web Push
on macOS Ventura
iOS and iPadOS
coming in 2023 👏

3.3 OS Integration

125
(A) File and Protocol
Handling
(B) Web Share Target
(C) Media Session
OS Integration

File Handling
{
"file_handlers": [
{
"action": "/readcsv",
"accept": {
"text/csv": [".csv"]
},
"icons": [
// ...
],
"launch_type": "single-client"
},
}
app.webmanifest

Protocol Handling
{
"protocol_handlers": [
{
"protocol": "web+devfest",
"url": "/conference?argument=%s"
},
}
app.webmanifest
Reading web+developerweek:// protocol

Web Share Target
{
"share_target": {
"action": "/receiving-share/",
"method": "GET",
"params": {
"id": "id",
"text": "contents",
}
}
}
app.webmanifest
Receive Share Actions

Media Session
navigator.mediaSession.metadata = new MediaMetadata({
title: 'Best Song',
artist: 'Max Firtman',
album: 'Progressive Web Apps',
artwork: [ /* ... */ ]
});
// actions: play, pause, stop, previous track, nexttrack, ...
navigator.mediaSession.setActionHandler(action, e => {});
script.js
Receive Share Actions

Basic PWA support
Web App Manifest
Web Performance
App Experience
App
Th
eming
App Icons and Splash Screens
Modern Authentication
Background Execution
OS Integration
Custom Install UI
App Identi
fi
cation

134
The Web evolves frequently
Stay on top of new capabilities
Progressive Enhancement!

PWA Cheat Sheet 2023

More Related Content

What's hot (20)

Similar to PWA Cheat Sheet 2023 (20)

More from Maximiliano Firtman (20)

Recently uploaded (20)

PWA Cheat Sheet 2023