Progressive Web Apps
What are they?
- Web apps on the home screen
- Launched as standalone (full-screen) apps
- Hook into push notifications
- Better offline experience
- Resilient to connection issues
Requirements
- Has a manifest file
- Served over HTTPS
- Have a registered service worker
Manifest file
{
"short_name": "BBC News",
"name": "BBC News",
"icons": [
{
"src": "launcher-icon-2x.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "launcher-icon-3x.png",
"sizes": "144x144",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"orientation": "landscape"
}
<link rel="manifest" href="/manifest.json">
Service workers
- Responds to events including network requests
- Run in the background, separate from page
- Only wakes up long enough to process events
- Intercept & cache network requests
- Construct arbitrary responses
- Handle push notifications
this.addEventListener('install', event => {
event.waitUntil(
caches.open('v1').then(cache => {
return cache.addAll([
'/news/blogs-news-from-elsewhere-36586189',
'/news/blogs-news-from-elsewhere-36561197',
'/news/world-us-canada-36541261',
'/styles/core.css',
'/styles/enhanced.css',
'/js/main.js'
])
})
)
})
this.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
)
})
this.addEventListener('push', event => {
console.log('Look mum, push notifications!', event)
event.waitUntil(
this.registration.showNotification('BREAKING NEWS: Sheep', {
body: 'BBC News is receiving reports of sheep.',
icon: '/images/notifications/emergency-sheep.png',
tag: 'you-can-tag-notifications'
})
)
})
But we have a native app!
Native apps are an investment
- Find the app
- Decide you like it
- Download it
- Open it
- Put it on your home screen
PWAs are an upsell
- You're already on the site
- Decide you like it
- Put it on your home screen
Offline experience
Resilience
Performance
Spamming push notifications
Better serving the user
(Gently) improving engagement
Progressive Web Apps
By Joseph Wynn