E-commerce Berlin Expo 2018 - From AMP to PWA: A Modern Web User Journey
•
0 likes•399 views
Rowan Merewood Developer Advocate Google Accelerated Mobile Pages (AMP) HTML delivers outstanding page-load performance for users browsing content on the mobile web, which is hugely important on limited or flaky networks. Progressive Web Apps deliver reliable performance for re-visits to sites thanks to Service Workers and allows unprecedented engagement via push notifications and Add To Homescreen. AMP gets content in front of users fast – PWAs enable rich experiences and engagement. What if I told you there’s a way to utilize the unique power of both? To build a web experience that loads in an instant and upgrades you to maximum interactivity and engagement? We’re making it happen. Come to learn how.
Report
Share
More Related Content
What's hot
What's hot (20)
Similar to E-commerce Berlin Expo 2018 - From AMP to PWA: A Modern Web User Journey
Similar to E-commerce Berlin Expo 2018 - From AMP to PWA: A Modern Web User Journey (20)
More from E-Commerce Berlin EXPO
More from E-Commerce Berlin EXPO (20)
Recently uploaded
Recently uploaded (20)
E-commerce Berlin Expo 2018 - From AMP to PWA: A Modern Web User Journey
- 2. From AMP to PWA Rowan Merewood, Google
- 3. If we run out of time ➔ @rowan_m on Twitter ➔ +RowanMerewood on Google+ ➔ rowan-m on GitHub
- 4. If we run out of time ➔ @rowan_m on Twitter ➔ +RowanMerewood on Google+ ➔ rowan-m on GitHub - When
- 5. “The planets”, Paul Matthers, CC BY-SA 2.0, https://flic.kr/p/8GrRNE
- 8. “Snail”, Rob Patrick, CC BY-NC-SA 2.0, https://flic.kr/p/upm9Z
- 9. The average mobile page:
- 10. The average mobile page: 214 requests, 107 ad-related requests 19 seconds average load time, 77% over 10 seconds 53% of visits abandoned if the load is over 3 seconds https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
- 11. AMP: Accelerated Mobile Pages PWA: Progressive Web Apps
- 12. PWA as a term allows us to quantifiably define a good, modern web experience.
- 13. PWA as a term allows us to quantifiably define a good, modern web experience. Developers ->
- 14. PWA as a term allows you to raise your expectations for a good, modern web experience.
- 15. PWA as a term allows you to raise your expectations for a good, modern web experience. As a user ->
- 18. What are PWAs?
- 20. app.starbucks.com ➔ Auto sign-in ➔ Order ahead ➔ Pay with barcode
- 21. trivago.com Offline resilience ➔ 67% of users who are interrupted by a period of offline come back to browse ➔ 97% increase in conversion
- 22. Audit your site with Lighthouse https://developers.google.com /web/tools/lighthouse/
- 23. What is AMP?
- 24. $✔<> Fast Easy to implement Mobile friendly Embrace the open web Enable monetization
- 25. “Car race”, mikegreen1985, CC BY-SA 2.0, https://flic.kr/p/fM9Qrw
- 26. ✔ ✘ AMP Average mobile web Hand tuned site
- 27. AMP HTML AMP JS Google AMP Cache
- 28. Sweet branding dot com Nav Nav Nav Navi Hey Hey Listen! Content...?
- 29. Curated artisanal cat pictures
- 30. Curated artisanal cat pictures WUT ABOUT DOGS?
- 31. SUP LOL
- 32. Ad LogoHeader Responsive hero image Headline ImageArticle text Some more text
- 34. AMP and PWA AMP Instant delivery Optimised discovery No user scripts Static content PWA Advanced platform features Highly dynamic Slower first delivery Not easily embedded
- 35. AMP to the PWA
- 36. AMP to the PWA
- 38. var CACHE_NAME = 'my-site-cache-v1'; var urlsToCache = [ '/', '/styles/main.css', '/script/main.js' ]; self.addEventListener('install', function(event) { // Perform install steps event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { console.log('Opened cache'); return cache.addAll(urlsToCache); }) ); });
- 39. AMP as the PWA
- 40. AMP as the PWA
- 42. <link rel="manifest" href="/manifest.json"> { "short_name": "ABE", "name": "AMPByExample", "icons": [ { "src": "launcher-icon-1x.png", "type": "image/png", "sizes": "48x48" }, { "src": "launcher-icon-2x.png", "type": "image/png", "sizes": "96x96" }, { "src": "launcher-icon-4x.png", "type": "image/png", "sizes": "192x192" } ], "start_url": "index.html?launcher=true" }
- 43. <link rel="manifest" href="/manifest.json"> { "short_name": "ABE", "name": "AMPByExample", "icons": [ { "src": "launcher-icon-1x.png", "type": "image/png", "sizes": "48x48" }, { "src": "launcher-icon-2x.png", "type": "image/png", "sizes": "96x96" }, { "src": "launcher-icon-4x.png", "type": "image/png", "sizes": "192x192" } ], "start_url": "index.html?launcher=true" }
- 44. “Hobbit Hole, Green Door”, yortw, CC BY-NC 2.0, https://flic.kr/p/gM4KJy
- 45. Snapdeal
- 53. So, what should you do?
- 56. Make it real with ampbyexample.com
- 63. The end Thank you! @rowan_m | +RowanMerewood https://goo.gl/oQnpfx