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.

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

16. PWA-ness
User
happiness

17. Baseline
->
Exemplary
->
PWA-ness
User
happiness

18. What are PWAs?

19. Fast EngagingReliableIntegrated

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

33. https://mobile.twitter.com/lgarron/status/806955394488643584

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

37. <amp-install-serviceworker
src="https://www.your-domain.com/serviceworker.js"
layout="nodisplay">
</amp-install-serviceworker>

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?

54. Start with
ampstart.com

56. Make it real with
ampbyexample.com

58. Advanced interactivity with
<amp-bind>

63. The end
Thank you!
@rowan_m | +RowanMerewood
https://goo.gl/oQnpfx