Offline-first for Your Static Site

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

What's a static site?

Slide 3

Slide 3 text

What's a static site?

Slide 4

Slide 4 text

What's offline-first?

Slide 5

Slide 5 text

What's offline-first?

Slide 6

Slide 6 text

Why offline-first?

Slide 7

Slide 7 text

Why offline first?

Slide 8

Slide 8 text

What's a service worker?

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Option 1: Full-page caching

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Option 2: App Shell

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Option 3: Service worker templating

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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.

Slide 23

Slide 23 text

Thanks! @jeffposnick https://jeffy.info