[Jakub Škvára] Progressive web apps - prepare your web for 2017

Progressive web apps Jakub Škvára Frontend engineer @ Prague prepare
your web for 2017

“ 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)

#dfua I 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 Progressive enhancement

#dfua if ('serviceWorker' in navigator) { ... } Progressive enhancement
JavaScript

#dfua Responsive

#dfua CSS @media (min-width: 300px) and (max-width: 600px) { ...
} Responsive

#dfua Offline

#dfua Service worker Service workers are to progressive web apps
as XMLHttpRequest was to AJAX

#dfua App-Like: Application Shell Minimal user interface Instant loading

#dfua HTML <head> <style> .header { ... } </style> </head>
Application Shell

#dfua Web app manifest Full-screen Splash screen Add to home
screen Icons

#dfua manifest.json { "short_name": "My App", "name": "My Progressive Web
App", "display": "standalone", "icons": { ... } } Web app manifest

#dfua Re-engageable: Push notifications Push API Works even if browser
is closed Needs permission

#dfua JavaScript self.registration.showNotification('Title', { body: 'My Notification', icon: 'images/icon.png', tag:
'my-tag' }); Push notifications

#dfua Safe

#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 Other Geolocation Camera + Microphone Battery Connection info Bluetooth
- Physical web

#dfua Tools developers.google.com/web/tools/ Project Hoverboard

#dfua Examples pwa.rocks

#dfua Benefits Works offline Improves the load performance Increases conversion
rate

“ Progressive web apps are our ticket out of the
tab, if only we reach for it. “ “

#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

Jakub Škvára @skvaros +JakubSkvara Questions? Thank you!

[Jakub Škvára] Progressive web apps - prepare y...

[Jakub Škvára] Progressive web apps - prepare your web for 2017

Google Developers Group Lviv

More Decks by Google Developers Group Lviv

Other Decks in Technology

Featured

Transcript

Progressive web apps Jakub Škvára Frontend engineer @ Prague prepare

“ Remember back when AJAX completely changed what was possible

#dfua I FELT PRETTY CLEVER UNTIL I REALIZED I’D INVENTED

#dfua Progressive enhancement

#dfua if ('serviceWorker' in navigator) { ... } Progressive enhancement

#dfua Responsive

#dfua CSS @media (min-width: 300px) and (max-width: 600px) { ...

#dfua Offline

#dfua Service worker Service workers are to progressive web apps

#dfua App-Like: Application Shell Minimal user interface Instant loading

#dfua HTML <head> <style> .header { ... } </style> </head>

#dfua Web app manifest Full-screen Splash screen Add to home

#dfua manifest.json { "short_name": "My App", "name": "My Progressive Web

#dfua Re-engageable: Push notifications Push API Works even if browser

#dfua JavaScript self.registration.showNotification('Title', { body: 'My Notification', icon: 'images/icon.png', tag:

#dfua Safe

#dfua RAIL performance model Response - respond in under 100

#dfua PRPL pattern Push resources for initial route Render the

#dfua Other Geolocation Camera + Microphone Battery Connection info Bluetooth

#dfua Tools developers.google.com/web/tools/ Project Hoverboard

#dfua Examples pwa.rocks

#dfua Benefits Works offline Improves the load performance Increases conversion

“ Progressive web apps are our ticket out of the

#dfua Do you want to know more? Build a Progressive

Jakub Škvára @skvaros +JakubSkvara Questions? Thank you!