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
   

   View Slide

2. What's a static site?
   

   View Slide

3. What's a static site?
   

   View Slide

4. What's offline-first?
   

   View Slide

5. What's offline-first?
   

   View Slide

6. Why offline-first?
   

   View Slide

7. Why offline first?
   

   View Slide

8. What's a service worker?
   

   View Slide

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

   View Slide

10. What are my options for making a
    static site offline-first?
    

    View Slide

11. Option 1:
    Full-page caching
    

    View Slide

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

    View Slide

13. Full-page caching
    Benefits
    ● Service worker simplicity.
    ● Minimal deployment overhead.
    ● No content duplication.
    ● Works well with multiple layouts.
    

    View Slide

14. Full-page caching
    Drawbacks
    ● Cache overhead.
    ● Messy updates.
    

    View Slide

15. Option 2:
    App Shell
    

    View Slide

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

    View Slide

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

    View Slide

18. App Shell
    Drawbacks
    ● Routing logic in your service worker.
    ● Duplication of content and routes.
    

    View Slide

19. Option 3:
    Service worker templating
    

    View Slide

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

    View Slide

21. Service worker templating
    Benefits
    ● Clean updates.
    ● Low-overhead precaching.
    ● No Single Page App (SPA) required.
    

    View Slide

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.
    

    View Slide

23. Thanks! @jeffposnick
    https://jeffy.info
    

    View Slide