Demystifying progressive web apps
•
0 likes•201 views
What are Progressive Web Apps and should you build one? This presentation looks at the problems PWA is aiming to solve and shows you how to get started.
Report
Share
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Demystifying progressive web apps
Similar to Demystifying progressive web apps (20)
More from Marcus Hellberg
Recently uploaded
Recently uploaded (20)
Demystifying progressive web apps
- 1. D E M Y S T I F Y I N G P R O G R E S S I V E W E B A P P S @ M A R C U S H E L L B E R G 5 S T O R Y A N D P H I L O S O P H Y Software is eating the world and what most of us see of it is the user interface. The user interface has become the key component of how the users experience the business behind it. Competition is lost or won due to user experience. Simplicity is king and the users get frustrated by anything ugly, slow or not working on the device they happen to use at the time. We at Vaadin fight for simplicity and invite everyone to join this fight. Together we want to build a user interface that puts a smile on the user’s face. Vaadin is the technology that empowers developers to build the best web-apps for business purposes. Our priority over everything else is developer productivity because we believe that by simplifying the developer experience and saving the developer’s time, they are best able to focus on building great user interfaces. Our brand is what we want everyone to think about us. When everyone - both us and the people around us - have a consistent understanding of what Vaadin is and what we stand for, it enables that image to spread and amplify. This book defines what we want that image to be. It defines what the Vaadin brand is. I hope that You are as excited and proud of living and breathing the Vaadin brand as I am. You are the one who is shaping what everyone thinks about Vaadin - using this brand as a tool and a guideline every day. Let’s fight for simplicity for both the users and the developers! Joonas Lehtinen Founder & CEO Vaadin I N T R O D U C T I O N
- 3. A P P I N S TA L L S / M O N T H : 0
- 4. While we haven’t yet reached ‘Peak App’ the market is definitely tightening, and app publishers need to rethink how to break through to the consumer’s screen. comScore 2016 US Mobile App report comscore.com/Insights/Presentations-and-Whitepapers/2016/The-2016-US-Mobile-App-Report
- 5. Despite significant investment and hopes for positive ROI, mobile applications are not paying off for many brands. Compelling alternatives such as progressive web apps mean the branded app economy is poised for change. gartner.com/smarterwithgartner/gartner-predicts-2017-marketers-expect-the-unexpected GARTNER: 20% WILL ABANDON THEIR MOBILE APPS BY 2019
- 6. T H E P R O B L E M I S F R I C T I O N
- 7. open the app store80 find your app in the store64 tap install51 accept permission requests41 find the app on their home screen33 26 will open the app O U T O F 1 0 0 I N T E R E S T E D P E O P L E
- 9. tap install80 accept permission requests64 find the app on their home screen51 41will open the app S T I L L , O N L Y . . .
- 10. C O S T P E R I N S TA L L $ 1 . 5 0 + fiksu.com/resources/fiksu-indexes
- 11. Users spend almost 90% of time in their top 5 apps. Source: comScore 2016 report
- 12. W H AT A B O U T M O B I L E W E B ?
- 14. 80 will open the app O U T O F 1 0 0 I N T E R E S T E D P E O P L E
- 15. Source: comScore 2016 report 0 3 6 9 12 # Visitors (MM) 0 50 100 150 200 Minutes 3x 20x Native apps Mobile web Top 1000 Mobile Apps vs. Top 1000 Mobile Web Properties
- 16. H O W A B O U T H Y B R I D , T H E N ?
- 17. WHAT'S HOLDING BACK THE MOBILE WEB?
- 18. 1 . B A D U S E R E X P E R I E N C E
- 21. 2 . P O O R R E - E N G A G E M E N T
- 24. 3 . P E R F O R M A N C E
- 25. P R O G R E S S I V E W E B A P P S
- 26. 1. Reliable 2. Fast 3. Engaging
- 27. T R Y B E F O R E Y O U B U Y
- 29. H O W D O Y O U B U I L D A P W A ?
- 30. P W A C H E C K L I S T : Site is served over HTTPS Responsive layouts, works on mobile First load is fast even on 3G Site works cross-browser Page transitions don't feel like they block on network Each page has a URL Metadata is provided for Add to Home screen developers.google.com/web/progressive-web-apps/checklist
- 31. D O Y O U N E E D T O S TA R T F R O M S C R AT C H ? N O .
- 32. 1 . A D D A N A P P M A N I F E S T
- 33. { "name": "Todo App", "icons": [{ "src": "todo.png", "sizes": "192x192", "type": "image/png" }], "start_url": "/index.html", "display": "standalone", "orientation": "portrait" } https://developer.mozilla.org/en-US/docs/Web/Manifest W E B A P P M A N I F E S T
- 35. 2 . D E F I N E A S E R V I C E W O R K E R
- 36. Service worker S E R V I C E W O R K E R
- 37. if ('serviceWorker' in navigator) { }
- 38. if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js'); }); }
- 39. let CACHE_NAME = 'cache-v1'; let urlsToCache = ['/', '/styles/main.css', '/script/main.js']; /sw.js
- 40. let CACHE_NAME = 'cache-v1'; let urlsToCache = ['/', '/styles/main.css', '/script/main.js']; self.addEventListener('install', event => { });
- 41. let CACHE_NAME = 'cache-v1'; let urlsToCache = ['/', '/styles/main.css', '/script/main.js']; self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME)); });
- 42. let CACHE_NAME = 'cache-v1'; let urlsToCache = ['/', '/styles/main.css', '/script/main.js']; self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME) .then(cache => cache.addAll(urlsToCache)); ); });
- 43. self.addEventListener('fetch', event => { });
- 44. self.addEventListener('fetch', event => { event.respondWith( ); });
- 45. self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) ); });
- 46. self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(response => { if (response) { return response; } return fetch(event.request); } ) ); });
- 48. 3 . A D D P U S H , B A C K G R O U N D S Y N C ( I F Y O U W A N T T O )
- 50. Lighthouse
- 51. T H E B A D N E W S
- 52. N O I O S S U P P O R T (YET)
- 53. T H E G O O D N E W S
- 54. G R E AT A N D R O I D S U P P O R T (88% MARKET SHARE)
- 55. A N D D E S K T O P O F C O U R S E
- 56. T H E Y A R E A P R O G R E S S I V E E N H A N C E M E N T
- 57. C A N B E U S E D W I T H A N Y F R A M E W O R K P A R T O F T H E W E B P L AT F O R M
- 60. Help developers build web apps that users ♡
- 61. T H A N K Y O U ! @ M A R C U S H E L L B E R G 5 S T O R Y A N D P H I L O S O P H Y Software is eating the world and what most of us see of it is the user interface. The user interface has become the key component of how the users experience the business behind it. Competition is lost or won due to user experience. Simplicity is king and the users get frustrated by anything ugly, slow or not working on the device they happen to use at the time. We at Vaadin fight for simplicity and invite everyone to join this fight. Together we want to build a user interface that puts a smile on the user’s face. Vaadin is the technology that empowers developers to build the best web-apps for business purposes. Our priority over everything else is developer productivity because we believe that by simplifying the developer experience and saving the developer’s time, they are best able to focus on building great user interfaces. Our brand is what we want everyone to think about us. When everyone - both us and the people around us - have a consistent understanding of what Vaadin is and what we stand for, it enables that image to spread and amplify. This book defines what we want that image to be. It defines what the Vaadin brand is. I hope that You are as excited and proud of living and breathing the Vaadin brand as I am. You are the one who is shaping what everyone thinks about Vaadin - using this brand as a tool and a guideline every day. Let’s fight for simplicity for both the users and the developers! Joonas Lehtinen Founder & CEO Vaadin I N T R O D U C T I O N