PWAmps for the mobile web

Transcript

1. Progressive Web AMPs for the mobile web
2. Software Engineer GDG Ajah Co-Organizer Women Techmakers Ajah Ambassador FSD Lagos Co-Organizer Blogger, adorahack.com Twitter, @theadoranwodo GitHub, @adoranwodo Hi, I’m Adora 2
3. 3 INTRODUCTION
4. 4 2009 2019
6. 6 Old New 600 kb 3 mb
8. 8 Progressive Web Apps & Accelerated Mobile Pages Individually
9. Progressive Web Apps Progressive web apps combine the flexibility of the web with the experience of mobile applications. 9
10. Progressive Web Apps Reliable Fast Engaging 10
11. Accelerated Mobile Pages Accelerated Mobile Pages solve the problem of slow-loading mobile pages. 11
12. Accelerated Mobile Pages 12 Web page speed improves user experience Maintain flexibility and control and reduce code complexity Easy to get started!
13. 13 <amp-img alt="A view of the sea" src="images/sea.jpg" width="900" height="675" layout="responsive"> </amp-img> AMP tags <amp-accordion disable-session-states> <section> <h2>Section 1</h2> <p>Content in section 1.</p> </section> <section> <h2>Section 2</h2> <div>Content in section 2.</div> </section> <section expanded> <h2>Section 3</h2> <amp-img src="images/squirrel.jpg" width="320" height="256"></amp-img> </section> </amp-accordion> <amp-image-lightbox id="lightbox1" layout="nodisplay"> </amp-image-lightbox>
14. 14 Image from https://instapage.com/blog/pwa-vs-amp
15. 15 PWA + AMP
16. Main element of a PWA? The service worker 16
17. 17 Service workers are great, but they don’t help your first page run fast.
18. AMP up Background bootstrapping of PWA shell while the user interacts with the AMP (first) page using <amp-install-serviceworker>. PWA + AMP AMP down Using AMP pages as a data source for PWAs. 18
19. 19 Fetch cached PWA shell instead of cached AMP page to prevent XHR to find AMP doc. AMP down contd.
21. 21 MORE ON PWAMPs
22. ◉ Your website has a lot of static content on individual pages ◉ To reduce infrastructure complexity ◉ If your content monetizes and works fine within the AMP ecosystem 22 When to use PWAMPs
23. ◉ Discovery on Search engines (Google & Bing) ◉ Fast first impression ◉ Fast page navigation ◉ Rich interactions and features ◉ Easy re-entry 23 PWAMP Benefits
24. 24 PWAMP RESOURCES
25. https://codelabs.developers.google.com/codelabs/amp-pwa-workbox/#3 https://amp.dev/documentation/guides-and-tutorials/learn/combine-amp-pwa 25
27. ◉ Blog: adorahack.com ◉ Website: adoranwodo.com ◉ Twitter: @theadoranwodo ◉ GitHub: @adoranwodo Thanks! 27