Maxim Salnikov
@webmaxru
Progressive Web App — a modern definition
Developer Audience Lead at Microsoft
A useful design pattern, not a formalized standard.
* but not everything**
** use progressive enhancement strategy
Capabilities
Offline-readyness
Installability
Name, icons, start URL
...
...
My App
Service
worker
OS
Browser
Internet
App
Event
Event
Event
Event
Message
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
})Reach
"Nativeness"
Native
Web
Web applications can reach anyone, anywhere, on any device with a single codebase.
Nativeness = Number & depth of integrations with the platform
Web App Manifest
Service Worker with "fetch"
{
{
"name": "BPM Techno",
"short_name": "BPM Techno Counter",
"start_url": "?utm_source=homescreen",
"display": "standalone",
"background_color": "#fff",
"description": "A free online BPM counter",
"icons": [{
"src": "images/touch/48x48.png",
"sizes": "48x48",
"type": "image/png"
}]
}
"shortcuts": [
{
"name": "Upload MP3 File",
"short_name": "Upload MP3r",
"description": "Count BPM of the uploaded file",
"url": "/upload-mp3?utm_source=homescreen",
"icons": [{ "src": "/icon-mp3.png", "sizes": "192x192" }]
}
]
"launch_handler": {
"route_to": "new-client" | "existing-client" |
"auto",
"navigate_existing_client": "always" | "never",
}launchQueue.setConsumer(launchParams => {
const url = launchParams.targetURL;
});{
"display": "fullscreen" | "standalone" |
"minimal-ui" | "browser",
"display_override": ["window-control-overlay",
"minimal-ui"],
}titlebar-area-x
titlebar-area-y
titlebar-area-width
titlebar-area-height
navigator.windowControlsOverlay.
getBoundingClientRect()
navigator.windowControlsOverlay.visibleTabbed experience
{
"display_override": "tabbed"
}Maxim Salnikov
@webmaxru
By sportstartua
This beginner-friendly session will cover the basics of Progressive Web Applications (PWA). You’ll learn about why this concept is great for building app-like, cross-platform projects, the advantages they bring to developers, users, and businesses, and how to start building your PWAs.
