PWAs Today
A presentation at PWA Summit by Ire Aderinokun
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
When the concept of Progressive Web Apps was introduced in 2015, the world of frontend development seemed changed forever. Websites could be “installed” to devices and, better yet, they could be available offline! Six years later, what started as a simple way to get websites onto home screens has grown into a full set of features to build modern apps on the web. Today, PWAs are truly installable, reliable, and capable.
for free. You
can too.
Video
Buzz and feedback
Here’s what was said about this presentation on social media.
