Maxim Salnikov

@webmaxru

Native Web Apps:

Are We There Yet?

How do we want web apps to feel like

and what tools do we have to achieve it

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

1989

A “web” of “hypertext documents” could be viewed by “browsers”

https://home.cern/science/computing/birth-web/short-history-web

2023

Historically depends on the "connection status"
Works within the browser context, not underlying platform

Evergreen browsers
Excellent tooling
Huge community

https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/

Web Almanac 2022

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

Requirements

Security & privacy
Performance
Persistence
Nativeness

Native-like...

Installation, configuration, launch
Windowing
Outbound integrations
Inbound integrations
Notifications
Background tasks
Access to hardware

Demo app

https://bpmtech.no

Link to GitHub repo with source code
Many extra and extended features
How to host in the cloud for free

edge://flags

https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/experimental-features/

We want to install, uninstall, configure app and launch it in different ways

Installation prompts
App hubs
Metadata update dialogues

Installation

Launch

Run on user login
Shortcuts
Launch mode

Installation criteria

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"
  }]
}

app.webmanifest

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

Shortcuts

"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" }]
  }
]

app.webmanifest

https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/shortcuts

Launch mode

"launch_handler": {
  "client_mode": "auto" | "navigate-new" | "navigate-existing" | "focus-existing"
}

app.webmanifest

https://github.com/WICG/sw-launch/blob/main/launch_handler.md

launchQueue.setConsumer(launchParams => {
  const url = launchParams.targetURL;
});

main.js

We want to follow UX principles of the platform and have control over every pixel

Windowing

Main window mode
Title bar options
Tabbed experience

{
  "display": "fullscreen" | "standalone" |
    "minimal-ui" | "browser",
  "display_override": ["window-control-overlay",
    "minimal-ui"],
}

app.webmanifest

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

Windowing

Main window mode
Title bar options
Tabbed experience

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

CSS Variables

https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/window-controls-overlay

navigator.windowControlsOverlay.
  getBoundingClientRect()

navigator.windowControlsOverlay.visible

JavaScript API

Windowing

Main window mode
Title bar options
Tabbed experience

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

{
  "display_override": "tabbed"
}

app.webmanifest

We want to use all available interfaces of the platform

Outbound integrations

Web Share API
Contact Picker API
File Access API

https://web.dev/web-share/

if (navigator.share) {
  navigator.share({
    title: 'BPM Techno',
    text: 'Check out BPMTech.no',
    url: 'https://bpmtech.no',
  })
    .then(() => console.log('Successful share'))
    .catch((err) => console.error(err));
}

main.js

Outbound integrations

Web Share API
Contact Picker API
File Access API

https://web.dev/web-share/

const props = ['name', 'email', 'tel'];
const opts = {multiple: true};

try {
  const contacts =
    await navigator.contacts.select(props, opts);
  handleResults(contacts);
} catch (err) {
  console.error(err));
}

main.js

Outbound integrations

Web Share API
Contact Picker API
File Access API

https://web.dev/file-system-access/

let openFileHandle;
btnOpen.addEventListener('click', async () => {
  [openFileHandle] =
    await window.showOpenFilePicker();
  const file = await fileHandle.getFile();
  const contents = await file.text();
});

main.js

const saveFileHandle =
  await window.showSaveFilePicker();
const directoryHandle = 
  await window.showDirectoryPicker();

https://vscode.dev

We want to platform to invoke the app in different ways

Inbound integrations

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

"url_handlers": [
  {
    "origin": "https://bpmtech.no"
  },
  {
    "origin": "https://partnerapp.com"
  }
]

app.webmanifest

https://github.com/WICG/pwa-url-handler/blob/main/explainer.md

"web_apps": [
  {
    "manifest": "https://partnerapp.com/manifest.json",
    "details": {
      "paths": [
        "/public/data/*"
      ]
    }
  }
]

.well-known/web-app-origin-association

Inbound integrations

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

"capture_links":
  "none" | "new-client" |
    "existing-client-navigate"

app.webmanifest

https://web.dev/declarative-link-capturing/

Inbound integrations

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

"protocol_handlers": [
  {
    "protocol": "web+bpm",
    "url": "index.html?bpm=%s"
  }
]

app.webmanifest

https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/handle-protocols

web+bpm://bpm=120

Inbound integrations

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

"file_handlers": [
  {
    "action": "/open-mp3",
    "accept": { "audio/mpeg": [".mp3"] },
    "icons": [
      {
        "src": "./images/mp3-file.png",
        "sizes": "144x144"
      }
    ]
  }
]

app.webmanifest

https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/handle-files

window.launchQueue.setConsumer(launchParams => {
  const fileHandle = launchParams.files[0];
});

main.js

Inbound integrations

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

"share_target": {
  "action": "/share",
  "method": "GET",
  "params": {
    "title": "title",
    "text": "text",
    "url": "url"
  }
}

app.webmanifest

https://web.dev/web-share-target/

window.addEventListener('DOMContentLoaded', ()=> {
  const parsedUrl = new URL(window.location);
  const url = parsedUrl.searchParams.get('url');
});

main.js

We want to keep user always updated

Badging

https://microsoft.github.io/win-student-devs/#/30DaysOfPWA/advanced-capabilities/07

navigator.setAppBadge(42).catch((err) => {
  console.error(err)
});

navigator.clearAppBadge().catch((err) => {
  console.error(err)
});

main.js

#30DaysOfPWA

Web Push

Is coming to iOS / iPadOS devices this year!

We want to run some parts of the app in the background

Background tasks

https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/javascript/background-services

Background Sync
Periodic BG Sync
Background Fetch
Payment Handler

We want to have direct access to the hardware

Access to hardware

Audio & Video Capture
Geolocation
Web Bluetooth
Web MIDI API
Magnetometer API
Web NFC API
Device Memory API
Network Information API

https://whatwebcando.today

Battery Status API
Ambient Light Sensor
Proximity Sensor
WebHID
Serial API
Web USB
User Idle Detection

Where to follow?

🐡

How to experiment at scale?

Native Web: Are We There?

Installation, configuration, launch
Windowing
Outbound integrations
Inbound integrations
Notifications
Background tasks
Access to hardware

Native Web Apps:

Are We There Yet?

and what tools do we have to achieve it

Maxim Salnikov

@webmaxru

PWA Summit co-organizer

PWA Oslo / PWA London meetups organizer

Google Dev Expert in Web Tech / Capabilities & Installability

1989

A “web” of “hypertext documents” could be viewed by “browsers”

2023

Historically depends on the "connection status"

Works within the browser context, not underlying platform

Evergreen browsers

Excellent tooling

Huge community

Web Almanac 2022

Requirements

Security & privacy

Performance

Persistence

Nativeness

Native-like...

Installation, configuration, launch

Windowing

Outbound integrations

Inbound integrations

Notifications

Background tasks

Access to hardware

Demo app

https://bpmtech.no

edge://flags

We want to install, uninstall, configure app and launch it in different ways

Installation prompts

App hubs

Metadata update dialogues

Installation

Launch

Run on user login

Shortcuts

Launch mode

Installation criteria

app.webmanifest

Shortcuts

app.webmanifest

Launch mode

app.webmanifest

main.js

We want to follow UX principles of the platform and have control over every pixel

Windowing

Main window mode

Title bar options

Tabbed experience

app.webmanifest

Windowing

Main window mode

Title bar options

Tabbed experience

CSS Variables

JavaScript API

Windowing

Main window mode

Title bar options

Tabbed experience

app.webmanifest

We want to use all available interfaces of the platform

Outbound integrations

Web Share API

Contact Picker API

File Access API

main.js

Outbound integrations

Web Share API

Contact Picker API

File Access API

main.js

Outbound integrations

Web Share API

Contact Picker API