PWAs Today
Ire Aderinokun Cofounder and VP Engineering @ Buycoins
Slide 1
Slide 2
Native Apps The Web in 2015
Slide 3
Websites were less capable Image from https://dribbble.com/shots/2518631-Notifications-Illustration-Animation
Slide 4
Websites had no offline support
Slide 5
Websites were harder to access
Slide 6
Image from h
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12
Slide 13
Slide 14
Slide 15
Slide 16
Slide 17
Slide 18
Slide 19
Slide 20
Slide 21
and installable PWA
Slide 22
In 2016, PWAs weren’t really “PWAs”
Slide 23
Slide 24
Slide 25
Slide 26
if (awesomeFeature in window) { // do awesome thing } else { // same old thing }
Slide 27
tt tt h ps://web.archive.org/web/20160116200128/h ps://jakearchibald.github.io/isserviceworkerready/
Slide 28
Slide 29
Slide 30
😩
Slide 31
Add to Homescreen !== Install
Slide 32
Requirements for “Add to Home Screen” 1. A manifest.json file 2. A service worker 3. Visit frequency heuristics 🤔
Slide 33
Slide 34
☹ Capable ☹ Reliable ☹ Installable
Slide 35
PWAs Today
Slide 36
Slide 37
~1,500,000 websites may be installable on mobile home screens, offering an app experience h
Slide 38
Slide 39
🧐 Reliable 🧐 Installable
Slide 40
How capable are PWAs today?
Slide 41
Slide 42
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
Slide 43
Slide 44
Slide 45
Slide 46
Slide 47
Web Notifications API new Notification(“Hello PWA Summit!”);
Slide 48
Push API self.addEventListener(‘push’, function(event) { event.waitUntil( self.registration.showNotification(‘Hello PWA Summit!’, { body: ‘Hi!’ }) ); });
Slide 49
Slide 50
😭
Slide 51
*⃣
Slide 52
Slide 53
Slide 54
App Badging API navigator.setAppBadge(2); navigator.clearAppBadge();
Slide 55
Slide 56
h
Slide 57
Slide 58
Slide 59
Web Share API title: “”, text: “”, url: “”, });
Slide 60
Slide 61
Web Share Target API “share_target”: { “action”: “compose/tweet”, “enctype”: “multipart/form-data”, “method”: “POST”, “params” },
Slide 62
Slide 63
Web Share Target API
Slide 64
PWAs today have real access to the device
Slide 65
Slide 66
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
PWAs today can work in the background
Slide 72
Slide 73
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’ },] });
Slide 74
Slide 75
Slide 76
Background Fetch API navigator.serviceWorker.ready.then(async (registration) { await registration.backgroundFetch.fetch( ‘video-fetch’, [‘/video.mp4’], { options );
= / * * / }); }
Slide 77
Slide 78
h
Slide 79
Slide 80
Slide 81
Slide 82
“We’ve launched 30+ features to make the web more capable” Developers: “New features you say?”
Slide 83
Developers: Doesn’t implement new features
Slide 84
h
Slide 85
Slide 86
❌ Platform parity ❌ Usage of features
Slide 87
How capable are PWAs today? 🙂 ✅ Close to feature parity with native applications ❌ Platform parity ❌ Usage of features
Slide 88
How reliable are PWAs today?
Slide 89
h
Slide 90
Slide 91
Slide 92
Slide 93
Slide 94
Slide 95
Cache JS & CSS import {StaleWhileRevalidate} from ‘workbox-strategies’; registerRoute( ({request}) request.destination ‘script’ || request.destination new StaleWhileRevalidate()
=
=
=
= ); ‘style’,
Slide 96
Offline Google Analytics import * as googleAnalytics from ‘workbox-google-analytics’; googleAnalytics.initialize();
Slide 97
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 }); }
= }) );
Slide 98
🤩
Slide 99
h
Slide 100
Slide 101
Slide 102
Slide 103
Slide 104
Slide 105
Slide 106
Slide 107
Slide 108
Local Storage & Session Storage Cache Storage
Slide 109
SESSION
Slide 110
PWAs today are fast
Slide 111
Image from h
Slide 112
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
Slide 113
Slide 114
65% increase in pages per session 75% increase in Tweets sent 20% decrease in bounce rate h
Slide 115
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
Slide 116
Slide 117
Slide 118
Slide 119
Slide 120
Slide 121
Slide 122
Slide 123
Slide 124
✅ PWAs are faster, more resilient, and more accessible
Slide 125
How reliable are PWAs today? 😁 ✅ Service worker, and it’s tooling, are well supported ✅ PWAs are faster, more resilient, and more accessible
Slide 126
How installable are PWAs today?
Slide 127
Slide 128
Slide 129
Requirements for “Add to Home Screen”
Slide 130
Requirements for “Add to Home Screen” 1. Web app manifest
Slide 131
Requirements for “Add to Home Screen” 1. Web app manifest 2. HTTPS
Slide 132
Requirements for “Add to Home Screen” 1. Web app manifest 2. HTTPS 3. Service worker (which returns a 200 response when offline)
Slide 133
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
Slide 134
More control over the install flow
Slide 135
Detect if a PWA can be installed window.addEventListener(‘beforeinstallprompt’, (e)
= }); {
Slide 136
Save install prompt for later let installPrompt; window.addEventListener(‘beforeinstallprompt’, (e) e.preventDefault(); installPrompt = e;
= }); {
Slide 137
Detect if a PWA has been installed window.addEventListener(‘appinstalled’, (e)
= }); {
Slide 138
Slide 139
Slide 140
More control over the launch experience
Slide 141
Slide 142
Splash Screen { “name”: “…”, “background_color”: “…”, “icons”: [“sizes”: “512x512”, “type”: “image/png”, “src”: “…”], }
Slide 143
Slide 144
App Shortcuts { “shortcuts”: [{ “name”: “New Tweet”, “url”: “/compose/tweet”, “icons”: [{ … }] / * * / } }]
Slide 145
Slide 146
Run on OS Login navigator.runOnOsLogin.set({ mode: “windowed” }).then(() // Permission approved
= }); {
Slide 147
SESSION
Slide 148
Add to Homescreen == Install
Slide 149
Slide 150
A WebAPK is an Android Application Package (APK) automatically generated from a PWA and installed to the device.
Slide 151
Benefits of WebAPK
Slide 152
Benefits of WebAPK ✅ In the app drawer
Slide 153
Benefits of WebAPK ✅ In the app drawer ✅ In app settings
Slide 154
Benefits of WebAPK ✅ In the app drawer ✅ In app settings ✅ Includes intent filters
Slide 155
Native Apps PWAs on App Stores
Slide 156
h
Slide 157
Slide 158
Slide 159
Slide 160
is a way to open your PWA from your Android app using a protocol based on Custom Tabs h
Slide 161
Slide 162
Slide 163
Slide 164
Slide 165
Slide 166
Slide 167
Slide 168
Slide 169
Slide 170
✅ More control over the install experience ✅ Deeper integration with the device ❌ Platform parity
Slide 171
How installable are PWAs today? 😁 ✅ “Add to Homescreen” is well supported ✅ More control over the install experience ✅ Deeper integration with the device ❌ Platform parity
Slide 172
PWAs Tomorrow
Slide 173
🤩 Capable 🤩 Reliable 🤩 Installable
Slide 174
All the APIs!
Slide 175
File Handling API (Origin Trial) h
Slide 176
(Developer Trial) h
Slide 177
(Under Consideration) h
Slide 178
Detecting orientation change events Widgets Detect/block screenshots Splash screen API Local font access
Slide 179
Almost 20% of page loads are controlled by Service Workers h
Slide 180
Slide 181
Slide 182
Slide 183
Slide 184
COO & VP Engineering of Buycoins Google Web Expert ireaderinokun.com bitsofco.de @ireaderinokun
