AMP & PWA Initiatives

Transcript

1. AMP and PWA Initiatives in Microservices Bukalapak.com

2. • Slow Internet • Offline State • Expensive The Problem:

   Elephant(s) in the Room

3. The Big Picture

4. • AMP as one of primary funnel ◦ Golang •

   PWA initiatives ◦ Javascript stack (Node, Webpack, Vuejs) What We Did?

5. • Product Detail ◦ Search page ◦ Add to cart

   ◦ Product Detail page • Category Page • Tag Page AMP Pages

6. • Amp-analytics (all amp pages) • Amp-sidebar (all amp pages)

   • Amp-carousel (all amp pages) • Amp-install-serviceworker (all amp pages) • Amp-lightbox (product detail) • Amp-accordion (product detail) • Amp-bind (product detail) • Amp-selector (product detail) AMP Pages: Components

7. PWA: Service Worker • Sw-precache • sw-toolbox

8. PWA: Service Worker

9. Insights - (PWA)

10. Insights - (Performance)

11. Offline Mode

12. Offline Mode

13. Thank You.