search

googlearchive / workbox-microsite

Workbox Microsite
Apache License 2.0
24 stars 13 forks source link

Docs don't mention registering the Service Worker #109

Closed johnnyreilly closed 6 years ago

johnnyreilly commented 6 years ago

Hey!

Thanks for your work on workbox! I'm just attempting to get up and running and, whilst the site looks really inviting, there doesn't appear to be much in the way of webpack examples.

I'm one of the maintainers of ts-loader and I'm trying to get up and running with workbox with webpack. It's not clear to me from the docs how that all fits together. Things I am pondering:

I don't know where this belongs:

if ('serviceWorker' in navigator) {

That is to say; I know I need to register a service worker but I'm not too clear where that fits in with webpack. Do I include that code in my entry file? Or is this something I should be putting in a script tag in my app template; i.e. OUTSIDE my application code?

For context I'm writing a super simple react app; a SPA. For the code I'm hoping to amend see here: https://github.com/johnnyreilly/reactspike

It feels the docs should say something about this but don't. It would also be nice to see a webpack / workbox example in the docs. FWIW I have found this: https://github.com/insin/react-hn However, it's not a specifically webpack example. More nwb with webpack....

Thanks again for all you do!

jeffposnick commented 6 years ago

Hello John!

Yes, that's something that we don't explain in in great detail in the project's documentation.

The service worker that Workbox generates (whether via the Webpack plugin, workbox-cli, or some other build integration) can be registered using the best practices that apply to other service workers. The best documentation for that is https://developers.google.com/web/fundamentals/primers/service-workers/registration (and we've started linking to that in the service worker template used in v3).

The example registration in that article needs to execute within the context of your web application, but in terms of "where" the code needs to live, that's up to you. If you're looking for examples to follow could be what create-react-app is doing.

We do also have a rewritten Webpack getting started guide that will be published in the near future; CC: @kaycebasques to double-check that we talk enough about registration (I'm almost certain that the demo does).

johnnyreilly commented 6 years ago

Thanks for the comments @jeffposnick. I think I'm beginning to get up and running. I'm very keen on PWAs and as part of that I want the barrier to entry to be as low as possible. Workbox certainly helps with that which is wonderful. I feel that not being able to work out how to get up and running directly from the documentation is a missed opportunity. So I wanted to highlight that.

Thanks again for your work and I did enjoy your talk on workbox. (Was watching it earlier on)