Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Offline-first for Your Static Site

Offline-first for Your Static Site

Jeffrey Posnick

January 26, 2017
Tweet

More Decks by Jeffrey Posnick

Other Decks in Technology

Transcript

  1. Offline-first for Your Static Site
    @jeffposnick • Google Developer Relations
    January 2017 • the New Dynamic Meetup

    View full-size slide

  2. What's a static site?

    View full-size slide

  3. What's a static site?

    View full-size slide

  4. What's offline-first?

    View full-size slide

  5. What's offline-first?

    View full-size slide

  6. Why offline-first?

    View full-size slide

  7. Why offline first?

    View full-size slide

  8. What's a service worker?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. Option 1:
    Full-page caching

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. Option 2:
    App Shell

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. Option 3:
    Service worker templating

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide