
Writing a Service Worker - kayfloriven
https://www.hacklabo.com/your-first-service-worker/
======
thrownblown
I always get all stoked on service workers until I remember that half my users
are on safari. Then I get bummed.

~~~
akulbe
What's the difference with Safari? (not a JS dev, so this is not familiar
territory)

~~~
csharpminor
It's not just a safari problem, last I checked Chrome on iOS also does not
support service workers, so you're just helping Android users.

Apple has a vested interest in pushing users towards their walled garden for
apps, while Google and Mozilla are trying to bring app-like experiences to the
browser. There are hints of Safari supporting serviceworkers but I'm not
holding my breath.

Highly recommend Alex Russel's talk on progressive web apps as background:
[https://m.youtube.com/watch?v=x7cfLDFVyHo](https://m.youtube.com/watch?v=x7cfLDFVyHo)

I happen to agree that offline-readiness (via service workers) is at the core
of whether the open web will continue to be a relevant medium.

~~~
BHSPitMonkey
> you're just helping Android users

And desktop users of Chrome, Firefox, and soon Edge (which has support
implemented behind a flag).

~~~
csharpminor
While true, the most compelling use-case for serviceworkers is still on
mobile. Serviceworkers solve the problem of intermittent connectivity. They
can patch the gap when a user drops a connection for less than a few minutes
(e.g. when a user is mobile).

Laptops and desktops still benefit, but less so because generally if you sit
down to use one of those devices in an area of poor connectivity, you're going
to run out of things you can do with your serviceworker's cached content
pretty quickly. If you're developing a serviceworker, the improved experience
will be most felt by mobile users.

~~~
azernik
That depends on the application. Some applications will run out of stuff to do
after a few minutes offline, but others (especially where individual tasks are
pretty independent, like Google Docs) can still be very useful for long
periods, and can benefit from increased control of caching strategies.

------
antoaravinth
Service workers are really cool. I love them in using it in react project. In
fact, create-react-app does inject a service worker for you to cache all the
static files in production environment.

------
CamelCaseName
What does the "Got it!" button do? Just let the author know that I understood
the guide?

I really like that button. I don't know, it just drives home the point that
you care that I understood your guide -- which was clear and easy to read.

~~~
fiveseven_
Isn't that button for acknowledging the fact that the site will use cookies?

~~~
usmannk
Yeah, but the color of that dialog should probably be changed. On a quick
glance it blends in.

------
resca79
Why don't use HTML5 application cache with the manifest? At first look it do
the same that you need:

* Cache css, js and images file

* Defined cached entries page ex index.html, show.html etc..

* Fallback Entries

and it is really simple to use. [https://developer.mozilla.org/en-
US/docs/Web/HTML/Using_the_...](https://developer.mozilla.org/en-
US/docs/Web/HTML/Using_the_application_cache)

~~~
dlbucci
For one, it's deprecated. I've also found (at least during development) that
it seems to cache too aggressively. Plus it lets you do weird things, like
cache your appcache file. Combine that with caching the HTML, and you won't
even be able to update your site until you clear the browser cache. I do
appreciate the surface simplicity, but the complexity under the surface makes
it painful to use.

------
nannal
I imagine this comes with massive overheads in regards to data and ram usage,
both of which are precious commodities on mobile platforms.

~~~
onli
At least when following this example the site should work just fine when JS is
disabled, which was the main issue I had when I tried following google's (?)
tutorial on how to use service workers to make webapps work offline. That one
revamped the whole site into a JS app powered by service workers, with a blank
white page remaining without JS. Not the case here.

I don't think this approach here should cost much performance. It is just a
thread checking a cache (that will be on disk) on page load.

------
franciscop
Ah this is really nice but still feels quite verbose (+the web standards are
know for their bad documentation for end devs). A small library with good
documentation making things easier could kill it, similarly to localstorage,
cookies, etc.

~~~
davideast
I highly recommend using Workbox:
[https://workboxjs.org/](https://workboxjs.org/).

One of the more gnarly parts of ServiceWorker is having to clean up old caches
during a version change. The workbox-build module generates revision hashes
for your pre-cached assets and handles any cache clean ups for you.

------
bluesign
Best use case of this I guess, is some kind of flight mode for web apps.
Before going in to metro or flight, you click a button, and for example HN
caches front page for you.

~~~
krallja
Caching cross-origin resources is problematic because you can't check the
response code:
[https://stackoverflow.com/q/35626269](https://stackoverflow.com/q/35626269)

~~~
tuxracer
You can still cache the response you just don't get to see what the response
was. For those types of resources it's best to only fallback to using them if
the user is offline.

------
danellis
I was going to say, "Isn't this what the application cache is for?" then I
looked and saw it has been removed from the standards.

~~~
hdhzy
AppCache looks like a poor hack if you want offline site that is more complex
than just a static blog post. There are numerous edge cases that you can
easily handle in SW's JavaScript vs AppCache's limited declarative language.
For example navigation requests can be special cased. Or you can decide
yourself when to make a network request vs cache lookup. AppCache used some
weird rules (e.g requests with query parameters never use cache).

------
fiatjaf
Here's the simple service worker ever. It just caches some URLs and load them
from the cache:

[https://github.com/fiatjaf/personal-
graphs/blob/6182f5a40fec...](https://github.com/fiatjaf/personal-
graphs/blob/6182f5a40fec155365238531532efc0c7b15d49b/service-worker.js)

------
shinzui
The author must not have been to Tokyo because I've never had bad connectivity
underground there.

------
Zyst
>This is, unfortunately, a familiar scene for everyone, whether you are in
Tokyo, Milan or New York.

Damn it, if I'm going to have the song stuck in my head all day so should all
of you!

[https://www.youtube.com/watch?v=P5mtclwloEQ](https://www.youtube.com/watch?v=P5mtclwloEQ)

------
XCSme
How large can the cache get at max?

~~~
untog
From my understanding, the cache, IndexedDB and other storage are all bundled
together. But I think the actual max changes according to device.

------
stephengillie
Could this be used to optionally reduce bandwidth use? For instance, could
someone use this before going into Airplane Mode, even though they are in the
middle of a city, but do not want to use wireless data?

~~~
untog
Yep - that's one of the great things about service workers, IMO. The caching
is pretty guaranteed, unlike the standard mobile caching which empties out far
more often than you expect.

------
withholding
Why the little story at the beginning? Annoying and silly.

------
FreeHugs
No demo?

------
eugenekolo2
20 lines of JS top on HN. Slow news day I guess...

------
Bakary
I interpreted the title to be a story from a programmer creating software that
would replace a human employee in the service industry.

------
aequitas720
I thought this was going to be about AI replacing workers in the service
industry.

------
Eun
What borders me, is that you need an valid SSL cert for an service worker,
however there is a develop/test cert here:
[https://github.com/Eun/test.bi](https://github.com/Eun/test.bi)

~~~
icebraining
I don't get it, how is one supposed to use that, if the domains point to your
IP addresses?

~~~
vaviloff
It's evidently for local work, /etc/hosts file is included in the repo.

