Downloaded 41 times
![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);
})
);
});](https://image.slidesharecdn.com/12-180219140831/75/E-commerce-Berlin-Expo-2018-From-AMP-to-PWA-A-Modern-Web-User-Journey-38-2048.jpg)
![<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"
}](https://image.slidesharecdn.com/12-180219140831/75/E-commerce-Berlin-Expo-2018-From-AMP-to-PWA-A-Modern-Web-User-Journey-42-2048.jpg)
![<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"
}](https://image.slidesharecdn.com/12-180219140831/75/E-commerce-Berlin-Expo-2018-From-AMP-to-PWA-A-Modern-Web-User-Journey-43-2048.jpg)
Uploaded byE-Commerce Berlin EXPO
E-commerce Berlin Expo 2018 - From AMP to PWA: A Modern Web User Journey
The document discusses the importance of Accelerated Mobile Pages (AMP) and Progressive Web Apps (PWA) in improving mobile web experiences, detailing their features and benefits. It highlights statistics on mobile page performance, user retention, and offers resources for developers to implement these technologies. The content also touches on using AMP to enhance engagement and site performance while encouraging users to explore AMP and PWA resources.
More Related Content
Similar to E-commerce Berlin Expo 2018 - From AMP to PWA: A Modern Web User Journey
E-commerce Berlin Expo 2018 - From AMP to PWA: A Modern Web User Journey
- 2. From AMP toPWA Rowan Merewood, Google
- 3. If we runout of time ➔ @rowan_m on Twitter ➔ +RowanMerewood on Google+ ➔ rowan-m on GitHub
- 4. If we runout of time ➔ @rowan_m on Twitter ➔ +RowanMerewood on Google+ ➔ rowan-m on GitHub - When
- 5. “The planets”, PaulMatthers, 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 mobilepage:
- 10. The average mobilepage: 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 MobilePages PWA: Progressive Web Apps
- 12. PWA as aterm allows us to quantifiably define a good, modern web experience.
- 13. PWA as aterm allows us to quantifiably define a good, modern web experience. Developers ->
- 14. PWA as aterm allows you to raise your expectations for a good, modern web experience.
- 15. PWA as aterm allows you to raise your expectations for a good, modern web experience. As a user ->
- 16.
- 17.
- 18.
- 19.
- 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 sitewith Lighthouse https://developers.google.com /web/tools/lighthouse/
- 23.
- 24. $✔<> Fast Easy to implement Mobile friendly Embrace the openweb Enable monetization
- 25. “Car race”, mikegreen1985,CC BY-SA 2.0, https://flic.kr/p/fM9Qrw
- 26. ✔ ✘ AMP Average mobile web Handtuned site
- 27. AMP HTML AMP JS GoogleAMP Cache
- 28. Sweet branding dotcom Nav Nav Nav Navi Hey Hey Listen! Content...?
- 29. Curated artisanal catpictures
- 30. Curated artisanal catpictures WUT ABOUT DOGS?
- 31.
- 32. Ad LogoHeader Responsive hero image Headline ImageArticletext Some more text
- 33.
- 34. AMP and PWA AMP Instantdelivery Optimised discovery No user scripts Static content PWA Advanced platform features Highly dynamic Slower first delivery Not easily embedded
- 35. AMP to thePWA
- 36. AMP to thePWA
- 37.
- 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 thePWA
- 40. AMP as thePWA
- 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, GreenDoor”, yortw, CC BY-NC 2.0, https://flic.kr/p/gM4KJy
- 45.
- 53. So, what shouldyou do?
- 54.
- 56. Make it realwith ampbyexample.com
- 58.
- 63. The end Thank you! @rowan_m| +RowanMerewood https://goo.gl/oQnpfx