1 of 33

Progressive Web Apps

State of the Union

Dominick Ng

TL, Web Apps Platform

@dominickng

2 of 33

Agenda

A brief history of Progressive Web Apps
Now and the future

User Interface
Capabilities

3 of 33

A brief history of PWAs

4 of 33

Web for content, not creation

Web	Native
Runs on any device	Platform-specific
Reading / watching / buying	Creative / working / gaming
Tabbed browser	Standalone window
Works online	Works offline
Search + navigate	Search + download + install

The web found success on desktop, where it provided a simple, uniform way to distribute content in a landscape where native development required vastly different tooling per each platform. With search, the web also offered a straightforward discovery story.
The launch of powerful web apps such as Gmail illustrated that the web could support applications with equivalent functionality to native.
However, it quickly became obvious that there were use cases that the web wasn't well suited to. Tasks such as photo and video editing and triple-A gaming require user file system access, native-equivalent performance, and robust offline support beyond what the web could offer.
Google Docs, Sheets, and Slides really pushed the boundaries of the web as a productivity platform, but still lacked key native integrations that stymied uptake in many industries

5 of 33

Demand for building apps on web tech

Chrome Apps

Proprietary APIs :(

Electron

Shipping entire browsers :(

6 of 33

Mobile saw users flock to apps

Capabilities
UX treatment

Home screen icon
Standalone window

7 of 33

PWAs: the best of both worlds

Web sites that can become apps

Linkable and indexable
Opens in a standalone window from launcher
Works offline
Native OS integration

8 of 33

PWA ingredients - Web app manifest

{

"name": "Squoosh",

"start_url": "/",

"scope": "/",

"display": "standalone",

"background_color": "#fff",

"theme_color": "#f78f21",

"icons": [ ... ]

}

9 of 33

PWA ingredients - Web app manifest

{

"name": "Squoosh",

"start_url": "/",

"scope": "/",

"display": "standalone",

"background_color": "#fff",

"theme_color": "#f78f21",

"icons": [ ... ]

}

10 of 33

PWA ingredients - Web app manifest

{

"name": "Squoosh",

"start_url": "/",

"scope": "/",

"display": "standalone",

"background_color": "#fff",

"theme_color": "#f78f21",

"icons": [ ... ]

}

11 of 33

PWA ingredients - Web app manifest

{

"name": "Squoosh",

"start_url": "/",

"scope": "/",

"display": "standalone",

"background_color": "#fff",

"theme_color": "#f78f21",

"icons": [ ... ]

}

12 of 33

PWA ingredients - Service Worker

// main.js

if 'serviceWorker' in navigator {

navigator.serviceWorker.register(

'/service-worker.js', { scope: '/'});

}

13 of 33

PWA ingredients - Service Worker

// service-worker.js

self.addEventListener('install', function(event) {

event.waitUntil(

caches.open('cache-v1')

.then(function(cache) {

return cache.addAll(['/offline.html']);

})

);

});

14 of 33

PWA ingredients - Service Worker

self.addEventListener('fetch', function(event) {

event.respondWith(

fetch(event.request)

.catch(() => {

return caches.open('cache-v1')

.then((cache) => {

return cache.match('offline.html');

});

}));

});

15 of 33

Web for content and creation

Web
Consumable and interactive content
Reading / watching / buying / creative / working / gaming
Tabbed browser / standalone window
Works online and offline
Search + navigate OR install

This brings us full circle. We initially focused on delivering this vision on mobile, seeing great success with partners all over the world who revamped their mobile web offerings to create compelling user experiences.
More recently, new desktop alternatives such as Chrome OS have emerged where the web really is the native platform
We've now brought our focus back to desktop. We have a new goal of enabling desktop capabilities and content creation through the web platform.
PWAs now give web sites on all platforms access to native-like UI without losing the advantages of being on the web, and we're hard at work on expanding the capabilities of the web platform to fill that surface, to allow it to be a universal, powerful platform, not only for content consumption, but also creation, productivity, gaming, and more, on mobile and desktop.

16 of 33

PWA User Interface - Now and the future

17 of 33

PWA installation is fully shipped

18 of 33

Android

19 of 33

Chrome OS

20 of 33

Windows

21 of 33

Linux

22 of 33

macOS

23 of 33

Custom Tab for Out of Scope Links

24 of 33

Custom Tab for Out of Scope Links

25 of 33

26 of 33

Tabbed application mode - early mock

27 of 33

PWA Capabilities - Now and the future

28 of 33

Empowering the web platform safely

Fugu project: new capabilities for the whole web
Specs + web platform tests
Working closely with security and privacy
Capabilities may not be gated on installation

The Fugu project is focused on finishing the mission of Chrome Apps, but in the right way: standardising new APIs that are safe for the whole web platform. Here's what computing can do - we want to bring the web there. Put another way, if we were creating a new platform, there are certain capabiltilies we would have to have. Fugu is really about closing that gap.
Important to this effort is following the right process - writing explainers, specs, and web platform tests. Getting feedback from other browser vendors. Going through W3C TAG Review, running origin trials to get developer feedback, and working closely with security and privacy teams to make sure we don't lose the guarantees we've worked so hard to codify - keeping users in control and aware of their information and what is using it.
A particular tenet we're trying to follow is that new APIs shouldn't be gated on whether or not a site is installed on the users device. We don't want to fragment the web into an installed web and a not-installed web. Instead, we need to put in the work to make capabilities safe and appropriate for the web platform as a whole, and not rely on installation as a crutch to skip that work.
With new capabilities, we don't want to lose the universality of the web. We accept that we're pushing the existing boundaries of the web with Fugu, but we're focused on ensuring that we're doing so in a way that doesn't create fragmentation, or prevent other browsers from being able to follow.

29 of 33

Tentative launch cal for in-flight APIs

M75

M76

M77

M78

M79

2019

Q1

Q2

Q3

Q4

M73

MIME-type Handlers

M72

M74

Image Clipboard Support

M75

M79

M76

M77

M78

Local Font Access

Web Serial / Web HID

Unlimited Quota

Scheduled Notifications

Native File System Access

Phone Number Signup

So what are we working on? I went to the bug tracker and picked out some of the top priority APIs that are currently under development, and listed out the tentative ship-to-stable dates for them on the slide here. Everything on the slide is - fingers crossed - going to ship this year, in the version of Chrome marked on the bottom, though I have to point out these dates are tentative and subject to slippage if we need more time to get things right.
I'll highlight just a couple of them. Firstly, image clipboard support is the most starred bug on crbug, with over 1800 stars. We're aiming to ship that in M75 along with shape detection and Web Share Target for files on Android. App icon badging is now in origin trial and will ship to stable in M76, allowing installed PWAs to show a numeric badge on their launcher icon.
We're working on a contact picker to help bootstrap social applications. There are particular privacy and security challenges on this one, but with luck, we'll be able to resolve those for a launch in M76.
M78 is slated to be a huge release, with native file system access - the most used Chrome App API - targeted for release in that milestone. This API is one of the most significant, exciting, and challenging ones we've tried to ship to the web, and it's really key to unlocking so many native-class applications. We're also targeting phone number signup - very important in many emerging markets - quota improvements, scheduled notification triggers, and Web Serial/HID APIs as well.
And finally, local font access - important for many creative applications - and MIME-type registration to allow PWAs to become default handlers of files opened on the device - are both tentatively targeted at M79.

30 of 33

There's much more to hear

Desiloing Files on the Web

Tuesday, Breakout 3, Room 315

The Offline Web

Tuesday, Breakout 4, Room 105

Fugu: Bringing New Capabilities to the Web

Wednesday, Breakout 5, Main Stage

31 of 33

PWAs are a vehicle for all of you

Broaden the utility of the web platform
Make a powerful, compelling app platform
Show off the work everyone here does

32 of 33

We need you

Distribution is a challenge
New capabilities, but laying the path for interoperability
Please get involved via crbug.com

component UI>Browser>WebAppInstalls (PWAs)
label Proj=Fugu (Capabilities)

33 of 33

Thanks!

dominickn@chromium.org

@dominickng