vuejs-templates / pwa

PWA template for vue-cli based on the webpack template
MIT License
3.04k stars 506 forks source link

importScripts not loading #186

Open brunosc opened 6 years ago

brunosc commented 6 years ago

Hi folks,

I'm adding sync task to my service worker but it's doesn't work.

adm-webapp/build/webpack.prod.conf.js

new SWPrecacheWebpackPlugin({
      cacheId: 'adm-webapp',
      filename: 'service-worker.js',
      staticFileGlobs: ['dist/**/*.{js,html,css}'],
      minify: true,
      stripPrefix: 'dist/',
      importScripts: [
        { fileName: utils.assetsPath('js/custom-sw.js') }
      ]
     ...

adm-webapp/static/js/custom-sw.js

self.addEventListener('sync', function(event) {
    console.log('[Service Worker] Background syncing', event);
    console.log(event.tag);
})

If I look "source" tab on Chrome, the custom-sw.js is not loaded

So I added this import script but still not working

adm-webapp/index.html <script type="text/javascript" src="<%= htmlWebpackPlugin.files.publicPath %>static/js/custom-sw.js"></script>

What's wrong?

eeerrrttty commented 6 years ago

please, someone give us a light!

eeerrrttty commented 6 years ago

I loaded my custom-service worker with the following:

        new CopyWebpackPlugin([
          {
            from: path.resolve(__dirname, '../static'),
            to: config.build.assetsSubDirectory,
            ignore: ['.*']
          },
          {
            // copy custom service worker
            from: path.resolve(__dirname, '../src/firebase-messaging-sw.js'),
            to: config.build.assetsRoot + '/[name].js',
            transform: (content, path) => {
              // and transpile it while copying
              return babel.transformFileSync(path).code
            }
          }
        ]),
        // service worker caching
        new SWPrecacheWebpackPlugin({
            cacheId: 'teste',
            importScripts: [
              {
                // transformed custom-service-worker (es6 -> js)
                filename: 'firebase-messaging-sw.js'
              }
            ],
            filename: 'service-worker.js',
            staticFileGlobs: ['dist/**/*.*'],
            minify: true,
            stripPrefix: 'dist/'
        })