PWAs Today

Ire Aderinokun Cofounder and VP Engineering @ Buycoins

Native Apps The Web in 2015

Websites were less capable Image from https://dribbble.com/shots/2518631-Notifications-Illustration-Animation

Websites had no offline support

Websites were harder to access

Image from h

and installable PWA

In 2016, PWAs weren’t really “PWAs”

if (awesomeFeature in window) { // do awesome thing } else { // same old thing }

tt tt h ps://web.archive.org/web/20160116200128/h ps://jakearchibald.github.io/isserviceworkerready/

😩

Add to Homescreen !== Install

Requirements for “Add to Home Screen” 1. A manifest.json file 2. A service worker 3. Visit frequency heuristics 🤔

☹ Capable ☹ Reliable ☹ Installable

PWAs Today

~1,500,000 websites may be installable on mobile home screens, offering an app experience h

🧐 Reliable 🧐 Installable

How capable are PWAs today?

Project Fugu is an effort to close gaps in the web’s capabilities by enabling new classes of applications to run on the web h

Web Notifications API new Notification(“Hello PWA Summit!”);

Push API self.addEventListener(‘push’, function(event) { event.waitUntil( self.registration.showNotification(‘Hello PWA Summit!’, { body: ‘Hi!’ }) ); });

😭

*⃣

App Badging API navigator.setAppBadge(2); navigator.clearAppBadge();

h

Web Share API title: “”, text: “”, url: “”, });

Web Share Target API “share_target”: { “action”: “compose/tweet”, “enctype”: “multipart/form-data”, “method”: “POST”, “params” },

Web Share Target API

PWAs today have real access to the device

PWAs today can work in the background

Media Session API navigator.mediaSession.metadata = new MediaMetadata({ title: ‘Champagne Poetry’, artist: ‘Drake’, album: ‘Certified Lover Boy’, artwork: [{ src: ‘…/512’, sizes: ‘512x512’, type: ‘image/png’ },] });

Background Fetch API navigator.serviceWorker.ready.then(async (registration) { await registration.backgroundFetch.fetch( ‘video-fetch’, [‘/video.mp4’], { options );

= / * * / }); }

h

“We’ve launched 30+ features to make the web more capable” Developers: “New features you say?”

Developers: Doesn’t implement new features

h

❌ Platform parity ❌ Usage of features

How capable are PWAs today? 🙂 ✅ Close to feature parity with native applications ❌ Platform parity ❌ Usage of features

How reliable are PWAs today?

h

Cache JS & CSS import {StaleWhileRevalidate} from ‘workbox-strategies’; registerRoute( ({request}) request.destination ‘script’ || request.destination new StaleWhileRevalidate()

=

= ); ‘style’,

Offline Google Analytics import * as googleAnalytics from ‘workbox-google-analytics’; googleAnalytics.initialize();

Service Offline Page const networkOnly = new NetworkOnly(); registerRoute( new NavigationRoute(async (params) { try { return await networkOnly.handle(params); } catch (error) { return caches.match(FALLBACK_HTML_URL, { cacheName: CACHE_NAME }); }

= }) );

🤩

h

Local Storage & Session Storage Cache Storage

SESSION

PWAs today are fast

Image from h

instant, reliably good performance to users on repeat visits. This means the application shell is not loaded from the network every time the user visits. Only the necessary content is needed from the network. h

65% increase in pages per session 75% increase in Tweets sent 20% decrease in bounce rate h

The web app rivals the performance of our native apps but requires less than 3% of the device storage space compared to Twitter for Android. h

✅ PWAs are faster, more resilient, and more accessible

How reliable are PWAs today? 😁 ✅ Service worker, and it’s tooling, are well supported ✅ PWAs are faster, more resilient, and more accessible

How installable are PWAs today?

Requirements for “Add to Home Screen”

Requirements for “Add to Home Screen” 1. Web app manifest

Requirements for “Add to Home Screen” 1. Web app manifest 2. HTTPS

Requirements for “Add to Home Screen” 1. Web app manifest 2. HTTPS 3. Service worker (which returns a 200 response when offline)

Requirements for “Add to Home Screen” 1. Web app manifest 2. HTTPS 3. Service worker (which returns a 200 response when offline) 4. User engagement heuristic

More control over the install flow

Detect if a PWA can be installed window.addEventListener(‘beforeinstallprompt’, (e)

= }); {

Save install prompt for later let installPrompt; window.addEventListener(‘beforeinstallprompt’, (e) e.preventDefault(); installPrompt = e;

= }); {

Detect if a PWA has been installed window.addEventListener(‘appinstalled’, (e)

= }); {

More control over the launch experience

Splash Screen { “name”: “…”, “background_color”: “…”, “icons”: [“sizes”: “512x512”, “type”: “image/png”, “src”: “…”], }

App Shortcuts { “shortcuts”: [{ “name”: “New Tweet”, “url”: “/compose/tweet”, “icons”: [{ … }] / * * / } }]

Run on OS Login navigator.runOnOsLogin.set({ mode: “windowed” }).then(() // Permission approved

= }); {

SESSION

Add to Homescreen == Install

A WebAPK is an Android Application Package (APK) automatically generated from a PWA and installed to the device.

Benefits of WebAPK

Benefits of WebAPK ✅ In the app drawer

Benefits of WebAPK ✅ In the app drawer ✅ In app settings

Benefits of WebAPK ✅ In the app drawer ✅ In app settings ✅ Includes intent filters

Native Apps PWAs on App Stores

h

is a way to open your PWA from your Android app using a protocol based on Custom Tabs h

✅ More control over the install experience ✅ Deeper integration with the device ❌ Platform parity

How installable are PWAs today? 😁 ✅ “Add to Homescreen” is well supported ✅ More control over the install experience ✅ Deeper integration with the device ❌ Platform parity

PWAs Tomorrow

🤩 Capable 🤩 Reliable 🤩 Installable

All the APIs!

File Handling API (Origin Trial) h

(Developer Trial) h

(Under Consideration) h

Detecting orientation change events Widgets Detect/block screenshots Splash screen API Local font access

Almost 20% of page loads are controlled by Service Workers h

COO & VP Engineering of Buycoins Google Web Expert ireaderinokun.com bitsofco.de @ireaderinokun

PWAs Today Ire Aderinokun Cofounder and VP Engineering @ Buycoins