We’ve previously written plenty about combining AMP & PWA, short for Progressive Web Apps. While the idea of preloading your PWA while the reader is reading your AMP page is fairly straightforward, the other combination pattern, where AMP is used as data-source to power your PWA, is less understood.
In my recent Google I/O talk, I claimed that you could get an AMP page to render within your PWA within a few minutes of writing code, and while that might be true, it doesn’t reflect all the work to be done in a production app. It was time to eat our own dogfood and build a production-ready PWAMP from scratch. Meet the Shadow Reader:
https://gfycat.com/SameAmusingInganue
Contrary to our simpler previously released React-based sample app, The ShadowReader demo app is is so-called ‘vanilla JS’ (with the exception of AMP, of course) – built from scratch to demonstrate all steps required to create the experience – and uses real-world feeds and AMP pages from The Guardian. You can experience it yourself on your phone (or via emulation) at https://amp.cards.
So what’s special about this app? For once, it demonstrates how quickly you can spin up a so-called “app shell” if you already have a corpus of AMP pages. Instead of a giant app that includes all templating logic to display articles, this app simply reads the Guardian’s RSS feeds, then delegates to AMP for rendering an existing AMP page inline when you click a card. This makes the engineering effort and app itself incredibly lightweight. More highlights:
- Pulling in real-world data means solving real-world challenges
- Weighs less than 10kb (~200kb if you include Guardian web fonts and AMP)
- Smooth card transitions and skeleton UI’s to further accelerate perceived performance
- Supports full URL-based navigation, sharing
If you’re a developer, dive through the source code and head over to my own blog to learn exactly how I’ve built each feature and element of the app, including the FLIP-based animations and the article views that seamlessly reconnect with lazy-loaded cards.
The Shadow Reader is half inspiration, half tutorial. Use it to evaluate whether the PWAMP route makes sense for your use-case, and don’t hesitate to reach out if you need help getting started. Now PWAMP all the things!
Paul Bakaus
AMP Developer Advocate, Google