PWA + AMP = Easy for Users and Developers Alike

on YouTube ↗29m

" summary

Combines validated AMP pages into a PWA by fetching AMP HTML (XMLHttpRequest.responseXML), stripping headers, then injecting a full AMP document into a Shadow DOM using the shadow runtime (shadow-v0.js / AMP.attachShadowDoc) loaded async; uses a service worker with Workbox for offline caching, a manifest.json for add-to-home-screen, and an app-shell for fast initial load. Example Shadow Reader reuses Guardian/La Repubblica AMP articles with no JS frameworks, yields instant transitions, and preserves original pages’ delivery via the AMP cache.

AI-written summary · about

" chapters (13)

1. 0:00Introduction
2. 0:57The Web App Dilemma
3. 3:21Native vs Web Apps
4. 5:10PWA and AMP Explained
5. 7:12AMP Component Overview
6. 8:55AMP as Rich Content
7. 13:11Implementing Shadow DOM
8. 15:51Shadow Reader Demo
9. 17:49Building the PWA
10. 21:21Offline and Features
11. 23:41Validation and UX
12. 25:19Versatile Applications
13. 27:41Conclusion

" related talks

• 55mFuture of WebAnuvrat Rao · FOSSASIA Summit 2017
• 55mPWA Fundamentals: websites with superpowersRowdy Raubow · JS Fest 2019 Autumn
• 30mPWA with PWFIgnacio Anaya · FrontEnd Con 2018
• 09mAdvanced PWA patternsDemian Renzulli · web.dev LIVE 2020
• 44mPWA - Welcome to the FutureDavid Müllerchen · code.talks 2017
• 31mMany frameworks, one PWA solutionMaxim Salnikov · Framework Summit 2018
• 52mMany Frameworks – One PWA SolutionMaxim Salnikov · GDG DevFest Gorky 2018
• 39mPWA & Front-end FrameworksMajid Hajian · Mobile Era 2017