Pro Yearly is on sale from $80 to $50! »

Offline-first for Your Static Site

Offline-first for Your Static Site

6fd3d2d77a1bb4cad9d07741dac08c9f?s=128

Jeffrey Posnick

January 26, 2017
Tweet

Transcript

  1. Offline-first for Your Static Site @jeffposnick • Google Developer Relations

    January 2017 • the New Dynamic Meetup
  2. What's a static site?

  3. What's a static site?

  4. What's offline-first?

  5. What's offline-first?

  6. Why offline-first?

  7. Why offline first?

  8. What's a service worker?

  9. What's a service worker? A network proxy, written in JavaScript,

    running in your browser.
  10. What are my options for making a static site offline-first?

  11. Option 1: Full-page caching

  12. Full-page caching Real-world example https://paul.kinlan.me

  13. Full-page caching Benefits • Service worker simplicity. • Minimal deployment

    overhead. • No content duplication. • Works well with multiple layouts.
  14. Full-page caching Drawbacks • Cache overhead. • Messy updates.

  15. Option 2: App Shell

  16. App Shell Real-world example https://ifixit-pwa.appspot.com

  17. App Shell Benefits • Clean updates. • Low-overhead precaching.

  18. App Shell Drawbacks • Routing logic in your service worker.

    • Duplication of content and routes.
  19. Option 3: Service worker templating

  20. Service worker templating Real-world example https://jeffy.info

  21. Service worker templating Benefits • Clean updates. • Low-overhead precaching.

    • No Single Page App (SPA) required.
  22. Service worker templating Drawbacks • Requires a JavaScript-friendly templating system.

    • Heavyweight service worker code. • Routing logic in your service worker. • Duplication of content and routes.
  23. Thanks! @jeffposnick https://jeffy.info