Progressive web apps - prepare your web for 2017 (Devfest Ukraine 2016)
Transcript of Progressive web apps - prepare your web for 2017 (Devfest Ukraine 2016)
“Remember back when AJAX
completely changed what was
possible in the desktop web?
Progressive web apps are that
same fundamental shift for the
mobile web.
““
-Rahul Row-Chowdhury
(Google’s product lead for Chrome and the Web platform)
#dfuaI FELT PRETTY CLEVER UNTIL I REALIZED I’D INVENTED WEBPAGES.
INSTALLING THINGS HAS GOTTEN SO FAST AND PAINLESS.WHY NOT SKIP IT ENTIRELY, AND MAKE A PHONE THAT HAS EVERY APP “INSTALLED” ALREADY AND JUST DOWNLOADS AND RUNS THEM ON THE FLY?
#dfua
manifest.json
{
"short_name": "My App",
"name": "My Progressive Web App",
"display": "standalone",
"icons": {
...
}
}
Web app manifest
#dfua
JavaScript
self.registration.showNotification('Title', {
body: 'My Notification',
icon: 'images/icon.png',
tag: 'my-tag'
});
Push notifications
#dfua
RAIL performance model
Response
- respond in under 100 ms
Animation
- every 16 ms = 60 fps
Idle - maximize idle time - 50 ms chunks
Load - deliver content under 1000 ms
#dfua
PRPL pattern
Push resources for initial route
Render the initial route ASAP
Pre-cache code for remaining routes
Lazy-load & create next routes on-demand
#dfua
Do you want to know more?
Build a Progressive Web App with Firebase and Polymer
Friday 14:00
Offline-first progressive web apps Saturday 10:00
Going offline with Service Worker Friday 16:50