The Current State of
Progressive Web App

Presented by:

Trần Trọng Thanh

int3ractive.com - : @trongthanh

12/2019

Re-introduction
to Progressive Web App

PWA are Web Apps that make use of latest Web capabilities with progressive enhancement as backbone model.

They features:

  • Connectivity independent
  • App-like
  • Fresh
  • Safe
  • Discoverable
  • Re-engageable
  • Installable
  • Linkable

MINIMUM TECH SPECS
to be called Progressive Web App

  • https: safe, fresh
  • SPA: app-like, linkable
  • manifest.json: installable, discoverable

Community approved PWA logo

index.html 

	<link rel="manifest" href="/manifest.json">
	<meta name="theme-color" content="#00796b">
manifest.json 

	{
	  "short_name": "Vue Shop",
	  "name": "Vue Shop - Mobile Shopping",
	  "icons": [
	    {
	      "src": "assets/logo.png",
	      "type": "image/png",
	      "sizes": "192x192"
	    }
	  ],
	  "start_url": "index.html",
	  "theme_color": "#00796b",
	  "background_color": "#b2dfdb",
	  "display": "standalone",
	  "orientation": "portrait"
	}
Android home screen Vue shop splash screen

MINIMUM TECH SPECS
to be called Progressive Web App

  • https: safe, fresh
  • SPA: app-like, linkable
  • manifest.json: installable, discoverable
  • service worker: connectivity independent, re-engageable

Community approved PWA logo

Service Worker and Cache

Web capabilities we'll explore:

  • Installable
  • Working offline
  • Push notification
  • Background sync
  • Web Share API
  • Credential Management API
  • Web Authentication API
  • Payment Request API

State of PWA 2019:
Browser Support

PWAs are enabled by browsers. Let's see how's the Web capabilities supported by most popular browsers

Most popular browsers in Vietnam

Mobile - Android

  • Chrome browser
    Chrome 78
  • Samsung Internet browser
    Samsung Internet 10.1

Mobile - iOS

  • Safari browser
    Safari 13.2

Desktop

  • Chrome browser
    Chrome 78
  • Coccoc browser
    Coc Coc 83 (Chrome 77)
  • Safari browser
    Safari 13
  • Firefox browser
    Firefox 70

Installable

Android

  • Fully support manifest.json
  • Native Install banner
  • Multi-tasking and intents
  • Share local storage and browser data

PWA vs. Web App

  • Web apps will not receive install banner
  • Browser emblem next to launcher icon
  • No launcher icon in app drawer

iOS 13

  • First SW support in Safari 11.3
  • Not support all manifest.json
  • No native install banner
  • "Add to home screen" is hidden below the share popup
  • Standalone and in-browser not sharing data

Desktop

From Chrome-based browsers, PWA can be installed like desktop apps.

Working offline
(Service worker Cache API)

  • Service worker and Cache API are well supported as of today
  • For Safari, caches that do not get opened after a few weeks will be removed

Push notification (Web Push API)

Safari / Webkit is the only browser doesn't support push notification yet

Service Worker Background Sync API

  • Background Sync schedules data sending in the background, even when tab / app is closed.
  • Only Chrome-based browsers support it for now

Web Share API

Android

  • Only Chrome on Android support Web Share API
  • The overlay share panel is native and provided by the OS

iOS

  • iOS Safari support Web Share api since 12.2

Desktop

Only Safari on macOS support this feature.

Credential Management API

  • Users can choose an account in a native account chooser
  • User's credentials can be sync with different devices
  • Auto sign in user even if their session has expired

Web Authentication API

  • WebAuthn is an extension of Credential Management API
  • The API allows servers to register and authenticate users using public key cryptography instead of a password.
  • Currently, desktop browsers only support authentication with USB key

Payment Request API

Chrome & Chrome-based browser

  • Support for credit card
  • Support Android pay where it is available

Safari (iOS & macOS)

  • Safari only support Apple Pay right now.

What's Next For

PWA?

Introducing

TWA

Trusted Web Activity

An Android app is a collection of activities (or screen)

Android Studio activity selector
  • To display web contents inside an Android app, developer can use WebView or the new Chrome Custom Tab activity
  • Chrome Custom Tab share browser data with Chrome
  • TWA is your PWA inside a full-screen Chrome Custom Tab activity
  • Your PWA domain must be verified by CCT via Digital Asset Links

                TWA                     vs.             Hybrid / Native Apps

  • Hosted at trusted domain
  • Always fresh
  • Just web app with Web API
  • Can be extended by native activity
  • Bundled inside app's apk
  • Update via app store or code push
  • Has access to native OS API
  • Load web content via WebView

Why TWA the App Store?

  • Better discovery via the web store
  • Monetize the app
  • App Shortcuts and other deep integrations with the OS
  • Be re-installed after restore on new phone
  • Instant app with web content
  • Your PWA are now available everywhere

References:

Links to some PWA seen in the slides

PWA resources and articles:

The End

Thank You