我们以前写过很多关于结合 AMP 和 PWA，即渐进式 Web 应用程序。虽然在读者阅读您的 AMP 页面时预加载您的 PWA的想法非常简单，但另一种组合模式，即AMP 用作数据源来为您的 PWA 提供支持，则鲜为人知。
在我最近的 Google I/O 演讲中，我声称您可以在几分钟内在您的 PWA 中呈现一个 AMP 页面，虽然这可能是真的，但这并不能反映在生产应用程序中要完成的所有工作。是时候吃我们的狗粮并从头开始构建一个可用于生产的 PWAMP。认识 Shadow Reader：
https://gfycat.com/SameAmusingInganue
与我们之前发布的更简单的基于 React 的示例应用程序相反，ShadowReader 演示应用程序是所谓的“纯 JS”（当然 AMP 除外）——从头开始构建以演示创建体验所需的所有步骤——并使用来自卫报的真实世界提要和 AMP 页面。您可以在您的手机（或通过模拟）在https://amp.cards上亲自体验。
那么这款应用有什么特别之处？首先，它展示了如果你已经有一组 AMP 页面，那么你可以多么快速地启动一个所谓的“应用外壳”。这款应用没有包含显示文章的所有模板逻辑的庞大应用，它只是读取卫报的 RSS 源，然后在你点击卡片时委托 AMP 内联呈现现有的 AMP 页面。这使得工程工作和应用本身都非常轻量级。更多亮点
- 引入真实世界数据意味着解决真实世界挑战
- 重量不到 10kb（如果你包含卫报网络字体和 AMP，则约为 200kb）
- 流畅的卡片过渡和骨架 UI，进一步加速感知性能
- 支持基于 URL 的完整导航、共享
如果您是开发者，请深入了解 源代码和 前往我的博客，了解我如何构建应用的每个功能和元素，包括基于 FLIP 的动画和与延迟加载卡片无缝重新连接的文章视图。
Shadow Reader 一半是灵感，一半是教程。使用它来评估 PWAMP 路线是否适合你的用例，如果你需要帮助入门，请不要犹豫 联系我们。现在 PWAMP 所有内容！
Paul Bakaus
AMP 开发者倡导者，Google