Offline-first for Your Static Site

Slides accompanying my presentatation at https://www.meetup.com/The-New-Dynamic/events/236530076/

For more information, see https://jeffy.info/2017/01/24/offline-first-for-your-templated-site-part-2.html

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