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

  • 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

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

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

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

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

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

Launch mode

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

app.webmanifest

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

Windowing

  • Main window mode

  • Title bar options

  • Tabbed experience

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

CSS Variables

navigator.windowControlsOverlay.
  getBoundingClientRect()

navigator.windowControlsOverlay.visible

JavaScript API

Windowing

  • Main window mode

  • Title bar options

  • Tabbed experience

{
  "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

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

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

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

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

"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

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

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

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

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

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

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

Thank you!

@webmaxru

Let's stay connected

Questions?

@webmaxru

Maxim Salnikov

Where to host your native web app?

...and visit Microsoft booth :)

Learn about web frontend, get prizes

Made with Slides.com