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 fund...
#dfua
I FELT PRETTY CLEVER UNTIL I
REALIZED I’D INVENTED WEBPAGES.
INSTALLING THINGS HAS GOTTEN SO FAST AND PAINLESS.
WHY ...
#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": {
...
}
...
#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-...
#dfua
Safe
#dfua
RAIL performance model
Response
- respond in under 100 ms
Animation
- every 16 ms = 60 fps
Idle - maximize idle time...
#dfua
PRPL pattern
Push resources for initial route
Render the initial route ASAP
Pre-cache code for remaining routes
Lazy...
#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 progressi...
Jakub Škvára
@skvaros
+JakubSkvara
Questions?
Thank you!
Upcoming SlideShare
Loading in …5
×

Progressive web apps - prepare your web for 2017 (Devfest Ukraine 2016)

220 views

Published on

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." said Rahul Row-Chowdhury (Google’s product lead for chrome and the web platform) on stage at Google I/O 2016. - Progressive web apps use new capabilities to deliver an app-like user experience. In this talk we will take a look at push notifications, app shell, RAIL and other new technologies.

Published in: Software
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
220
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
2
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Progressive web apps - prepare your web for 2017 (Devfest Ukraine 2016)

  1. 1. Progressive web apps Jakub Škvára Frontend engineer @ Prague prepare your web for 2017
  2. 2. “ 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)
  3. 3. #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?
  4. 4. #dfua Progressive enhancement
  5. 5. #dfua if ('serviceWorker' in navigator) { ... } Progressive enhancement JavaScript
  6. 6. #dfua Responsive
  7. 7. #dfua CSS @media (min-width: 300px) and (max-width: 600px) { ... } Responsive
  8. 8. #dfua Offline
  9. 9. #dfua Service worker Service workers are to progressive web apps as XMLHttpRequest was to AJAX
  10. 10. #dfua App-Like: Application Shell Minimal user interface Instant loading
  11. 11. #dfua HTML <head> <style> .header { ... } </style> </head> Application Shell
  12. 12. #dfua Web app manifest Full-screen Splash screen Add to home screen Icons
  13. 13. #dfua manifest.json { "short_name": "My App", "name": "My Progressive Web App", "display": "standalone", "icons": { ... } } Web app manifest
  14. 14. #dfua Re-engageable: Push notifications Push API Works even if browser is closed Needs permission
  15. 15. #dfua JavaScript self.registration.showNotification('Title', { body: 'My Notification', icon: 'images/icon.png', tag: 'my-tag' }); Push notifications
  16. 16. #dfua Safe
  17. 17. #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
  18. 18. #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
  19. 19. #dfua Other Geolocation Camera + Microphone Battery Connection info Bluetooth - Physical web
  20. 20. #dfua Tools developers.google.com/web/tools/ Project Hoverboard
  21. 21. #dfua Examples pwa.rocks
  22. 22. #dfua Benefits Works offline Improves the load performance Increases conversion rate
  23. 23. “ Progressive web apps are our ticket out of the tab, if only we reach for it. “ “
  24. 24. #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
  25. 25. Jakub Škvára @skvaros +JakubSkvara Questions? Thank you!

×