sync

[Garito]

Hi!
I'm trying to understand the service worker in this template but I'm struggling with two things:
1.- Is the dev service worker doing anything at all? (I can't see it in the chrome devtools)
2.- Where must I put the code for the sync event (both prod & dev)?

What I'm trying to do is to sync the client's data with the rest api

Thanks!

PS: it's ok for me if you point me to a tutorial/how to/example. I haven't understand the articles I've read so far (mostly how to translate the official pwa docs with this webpack template)

[anubhav7495]

Hi @Garito

1. The dev service worker is essentially a no-op that resets any previous service worker registered for same host:port combination.
2. This template uses sw-precache for generating the service worker, which best to my knowledge doesn't cover a background sync use case. You can checkout Workbox and replace sw-precache with that to support your use case.

Thanks.

[Garito]

Thanks!
Now I understand several things then...
I hope this template will implement a full service worker flow soon

[Garito]

Only for the record:
if you wanna add some custom code to the generated service worker add your script as a importScripts like:

new SWPrecacheWebpackPlugin({
      cacheId: 'your-app-name',
      filename: 'service-worker.js',
      staticFileGlobs: [
        'dist/**/*.{js,html,css}',
        'dist/**/**.{eot,ttf,woff,woff2}',
        'dist/**/*.{svg,png,gif}'
      ],
      importScripts: [
        { filename: utils.assetsPath('js/service-worker.js') }
      ],
      minify: false,
      stripPrefix: 'dist/',
      runtimeCaching: [
        {
          urlPattern: /api/,
          handler: 'networkFirst'
        }
      ]
    })

In this case, you must place your script in you static folder under js (/static/js/service-worker.js)

[Garito]

Rereading my comment before closing this issue, i've realized that this explanation was not precise at all:
1.- The customization of the service worker has been explained in my previous comment
2.- The fact that the service worker doesn't work is because the content of service-worker.dev.js. No one could stop you to use it by copying the content of the prod version at all

So this template already has all its needed to implement a full service worker (my hopes are already fullfilled)

For instance if you wanna implement google analytics, you must place its script in the importScripts list and initialize in your custom script