Comments on: Making a Simple Site Work Offline with ServiceWorker

By: AJ

AJ — Mon, 16 Nov 2015 11:08:36 +0000

In reply to Johnny. Hey, for what it's worth, the tutorial here works, just not the demo site. :)

By: AJ

AJ — Fri, 13 Nov 2015 12:14:43 +0000

In reply to Johnny.

Hi Chris,

I too can’t seem to make it work. Having the same problem as Johnny. I tried it on Chrome 46.0.2490.86 (64-bit) and Chrome 48.0.2563.0 canary (64-bit).

I’m not sure what other details to give, but let me know and I’ll gladly give more info. :)

Thanks!

By: Jeffrey Sweeney

Jeffrey Sweeney — Wed, 11 Nov 2015 22:28:19 +0000

Safari’s lack of “enthusiasm” is the only thing preventing me from further experimenting with Service Workers.
From Apple’s POV, it makes sense to not shoot themselves in the foot by allowing easy offline-capable webapps, possibly among other reasons I’m sure. It just sucks for web developers.

However, seeing that even Internet Explorer is considering to support Service Workers, it might be time to move forward without Safari.

By: Chris Coyier

Chris Coyier — Wed, 11 Nov 2015 17:51:16 +0000

In reply to Agop. @Šime: width: -moz-max-content! cool! Way better than a magic number. Plus I guess it would only do it if if it needed to get wider.

By: Šime Vidas

Šime Vidas — Wed, 11 Nov 2015 03:58:28 +0000

In reply to Agop.

CSS-Tricks can make code blocks expandable on hover with a few CSS styles: https://www.youtube.com/watch?v=w79Uze8sTrU

By: Nicolas Bevacqua

Nicolas Bevacqua — Tue, 10 Nov 2015 23:41:02 +0000

In reply to Benjamin Knight. That's about how long it takes to implement ServiceWorker without any libraries, and you get to implement it everywhere once you learn the basics (not just sites using Polymer)

By: Luke

Luke — Tue, 10 Nov 2015 22:51:51 +0000

In reply to Agop. Hi Chris, What about a toggle that allows us to 100% the main content to view larger code blocks like this. Dev-tooling is fine, but having it as part of your site function would be great.

By: Benjamin Knight

Benjamin Knight — Tue, 10 Nov 2015 19:41:38 +0000

In reply to Benjamin Knight. the <platinum-sw-register> element*

By: Benjamin Knight

Benjamin Knight — Tue, 10 Nov 2015 19:40:46 +0000

Polymer makes this use case incredibly easy with the element. Took me about 5 minutes to have a 100% offline simple site.

By: Chris Coyier

Chris Coyier — Tue, 10 Nov 2015 17:33:13 +0000

In reply to Johnny. This is what I'm getting: But I've seen kinda inconsistent results sometimes and different results when hard-refreshing rather than normal refreshing.

By: Chris Coyier

Chris Coyier — Tue, 10 Nov 2015 17:28:22 +0000

In reply to Agop. @Neal That's the kinda CAN DO attitude I love!

By: Neal G

Neal G — Tue, 10 Nov 2015 17:24:09 +0000

In reply to Agop.

I was thinking the same thing as I was reading this. I used the Stylish browser plugin to hide Chris’ sidebar –

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain(“css-tricks.com”) {
.entry-unrelated { display: none !important; }
.blog-posts.grid-2-3 { width: 100% !important; }
}

By: Johnny

Johnny — Tue, 10 Nov 2015 17:14:14 +0000

I can’t seem to get the service worker to deliver the offline site on Chrome 47.0.2526.49 beta (64-bit) when I turn network throttling to Offline. The worker is registered, and upon inspection, it seems to be running, but Chrome just returns a “Unable to connect to the Internet” message.

By: Agop

Agop — Tue, 10 Nov 2015 16:42:26 +0000

Slightly off topic, but the code in this article is very lengthy and impossible to read in the provided code views due to how narrow they are.

As for the technology itself? Absolutely awesome. Being able to write what is essentially a client-side proxy server is incredibly useful.