Atsushi Yamamoto
@jumbosushi
Atsushi Yamamoto
@jumbosushi
Photo by Noah Silliman on Unsplash
PWA
Progressive Web App
Progressly Enhanced Website
"Progressive Enhancement (PE) is the principle of starting with a rock-solid foundation and then adding enhancements to it if you know certain visiting user-agents can handle the improved experience."
Sam Dwyer from "Progressive Enhancement: What It Is, And How To Use It?"
Cake drawings by Tiffany Tse from What is Progressive Enhancement and Why Should You Care?
<!--[if lt IE 9]>
HTML + CSS + JS
CSS Grid +
Service Worker + ...
Cake drawings by Tiffany Tse from What is Progressive Enhancement and Why Should You Care?
PWA
www.konga.com
PWA
- Site is served over HTTPS
- Pages are responsive on tablets & mobile devices
- The start URL (at least) loads while offline
- Add to Home screen
- First load fast even on 3G
- Page transitions don't feel like they block on the network
- Each page has a URL
- Content doesn't jump as the page loads
...
WHY PWA?
Cake drawings by Tiffany Tse from What is Progressive Enhancement and Why Should You Care?
The 2016 Mobile Web Report by comScore (slide 19)
PWA
{
"short_name": "CakeOntheWeb.io",
"name": "Joe's CakeOntheWeb.io",
"icons": [
{
"src": "launcher-icon-2x.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "launcher-icon-3x.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "launcher-icon-4x.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "/index.html",
"theme_color": "#2196F3",
"background_color": "#2196F3",
"display": "standalone",
"orientation": "landscape"
}
<!-- inside head -->
<link rel="manifest" href="/manifest.json">
4X higher interaction rate from Add to Homescreen
The 2016 Mobile Web Report by comScore (slide 15)
"Mobile web audiences
are almost 3x the size
and growing 2x as fast
as app audiences."
PWA
Every step lose 20% of potential users
People intrigued
1000
Load Store
800
Find the app
640
Click install
512
Accept Permissions
410
Download + wait
328
Users
262
Native Mobile App
People intrigued
1000
Users
800
PWA
"We've reviewed the application, and we've
decided not to publish the application"
Source of app discovery:
2015 Mobile Marketing Insights (slide 10)
PWA
Pull to refresh by Regy Perlera on Dribble
- Network or Cache w/ timeout
- Cache Only
- Cache & Update
- Push Subscription
- Background Sync
Hardware Support
HTTPS
PWA
Recap
- Same engagement level as mobile
- No need to go through app stores
- Good performance
Lighthouse
What's the initial score?
1. Add manifest.json
2. Add Service Worker
3. Add more to Service Worker
{
"name": "Web Application Manifest Sample",
"short_name": "PWA Sample",
"icons": [
{
"src": "launcher-icon-1x.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "launcher-icon-2x.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "launcher-icon-3x.png",
"sizes": "144x144",
"type": "image/png"
}
],
"theme_color": "#9E9E9E",
"background_color": "#9E9E9E",
"start_url": "/",
"display": "standalone",
"orientation": "landscape"
}
1. Add manifest.json
2. Add Service Worker
3. Add more to Service Worker
1. Add manifest.json
Web Worker
No Access to DOM
Programmable Networking Proxy
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ',
registration.scope);
}).catch(function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
} else {
console.log('Service Worker is not supported :/');
}
1. Add manifest.json
2. Add Service Worker
3. Add more to Service Worker
2. Add Service Worker
localStorage
sessionStorage
Web SQL
File Systems API
AppCache
Synchronous
Depreciated
Only for Chrome
Depreciated
IndexedDB
Async (event-based)
Available in Chrome, Firefox, Opera
Wrappers available (PouchDB, Promise)
Cache API
Async (Promise-based)
key = Request
value = Response
Works well with Service Worker
Cache API
URL accessible resource
IndexedDB
Other resource resource
if('caches' in window) {
caches.open('test-cache').then(cache => {
cache.addAll(['/', '/images/example.png'])
.then(() => {
// Cached!
});
});
}
Adding to Cache
caches.open('test-cache').then(cache => {
cache.match('/image/example.png').then(matchedResponse => {
console.log(matchedResponse);
});
});
Using Cache
1. Add manifest.json
2. Add Service Worker
3. Add more to Service Worker
3. Add more to Service Worker
PWA
No iOS support?
That's it
I'm done
Just Kidding
PWA is still awesome
@jumbosushi
The emerging world of PWA @ DevTeach Montreal
By Atsushi Yamamoto
The emerging world of PWA @ DevTeach Montreal
- 1,861