Service Worker not running when offline and deployed

[leafoflegend]

So the service worker works perfectly in a localhost environment, and seems to install in the deployed environment as well.

My configuration for this the OfflinePlugin is:

new OfflinePlugin({
    caches: {
        main: [
            'index.html',
        ],
        additional: [
            ':rest:',
        ],
    },
    ServiceWorker: {
        events: true,
        navigateFallbackURL: `/${feature.name}`,
        prefetchRequest: { credentials: 'include' },
    },
    safeToUseOptionalCaches: true,
}),

The files are served at a subdirectory of an S3 bucket e.g. somesite.com/${feature}.

The Service Worker is showing that it is running and storing all files, but when I turn my connection off and reload the page - nothing initiates. Chrome also shows no Service Worker is there when I reload while offline.

I am unable to replicate this when I am using localhost (and still serving from a subdirectory statically). Any ideas here? Is this related to headers? We are routing through nginx - but I dont think that should have any implications here, as the subdirectory route at each end is the same.

[NekR]

Can you show me production generated ServiceWorker file? Not whole file, there is JSON metadata in the beginning.

[NekR]

You also may compare it if you development ServiceWorker metadata, maybe there are any significant differences.

[leafoflegend]

Thanks for taking a look at this.

var __wpo = {
  "assets": {
    "main": [
      "/pay/"
    ],
    "additional": [
      "/pay/a37b0c01c0baf1888ca812cc0508f6e2.ttf",
      "/pay/chunk.34b48b1eae3f4ac8ef74eaa8b8db592ce130cd6c.92af6e296ca833ed23f5.js",
      "/pay/chunk.5f1e67d8c1ddf61923660ac94806128420227fca.d7622441084ff953f0e9.js",
      "/pay/chunk.68badce326dd812a1fcef6f7522596715afe25c9.642db068483b0e3e0eed.js",
      "/pay/chunk.7801d5bcec7674dfc26f144265c468c34086c652.83dcbee521921d2b0bdc.js",
      "/pay/chunk.96a00f1e9e5c020b350844c0ce65865477f031fc.566fba33a98747c5e4a7.js",
      "/pay/chunk.a79e8d5762660ad6ea069b6ad06fe48c51a3de87.66601c67fe8999b4cc9b.js",
      "/pay/chunk.dee0b3be1a3346c5cbba5eec3584331aaeb28541.183dfe021cac18abad21.js",
      "/pay/main.d7bca715e79d32b23213.js",
      "/pay/runtime.9fadef04238415a3f950.js",
      "/pay/vendor.38399b85dc8b880b2159.js",
      "/pay/manifest.69efc2a0b3cd5929f939bef970c15424.json",
      "/pay/icon_512x512.c31beaab489a503332b513a8a4a91f50.svg",
      "/pay/icon_384x384.c31beaab489a503332b513a8a4a91f50.svg",
      "/pay/icon_256x256.c31beaab489a503332b513a8a4a91f50.svg",
      "/pay/icon_192x192.c31beaab489a503332b513a8a4a91f50.svg",
      "/pay/icon_128x128.c31beaab489a503332b513a8a4a91f50.svg",
      "/pay/icon_96x96.c31beaab489a503332b513a8a4a91f50.svg",
      "/pay/wpmani.json"
    ],
    "optional": []
  },
  "externals": [],
  "hashesMap": {
    "fc05de31234e0090f7ddc28ce1b23af4026cb1da": "/pay/a37b0c01c0baf1888ca812cc0508f6e2.ttf",
    "fceae8a575721e18227bc8efac6674c3e1c9a538": "/pay/chunk.34b48b1eae3f4ac8ef74eaa8b8db592ce130cd6c.92af6e296ca833ed23f5.js",
    "39312694daf4f584e1610562ca1d19ff1b9792d4": "/pay/chunk.5f1e67d8c1ddf61923660ac94806128420227fca.d7622441084ff953f0e9.js",
    "8c5a6e7c89b14feac74ea2a53b89085f886ac5d3": "/pay/chunk.68badce326dd812a1fcef6f7522596715afe25c9.642db068483b0e3e0eed.js",
    "f75963644df0ca7c6ba87d8c83fa0603d37143c9": "/pay/chunk.7801d5bcec7674dfc26f144265c468c34086c652.83dcbee521921d2b0bdc.js",
    "66f9681887c6451a96389c787d40ab2fdf0efeed": "/pay/chunk.96a00f1e9e5c020b350844c0ce65865477f031fc.566fba33a98747c5e4a7.js",
    "9d473b901ae4005e91ac38065726f01e8122d974": "/pay/chunk.a79e8d5762660ad6ea069b6ad06fe48c51a3de87.66601c67fe8999b4cc9b.js",
    "48e6cc5ba3ec19ddb7d92a4a77d0ff8d78349f35": "/pay/chunk.dee0b3be1a3346c5cbba5eec3584331aaeb28541.183dfe021cac18abad21.js",
    "548fba0d064e466c8532ebcf242603265670c884": "/pay/main.d7bca715e79d32b23213.js",
    "6c3a3260f68c6c5e28624a51c4960c10b81ec262": "/pay/runtime.9fadef04238415a3f950.js",
    "2d6c4cf545a30fd7a4939ab229fa5f3b3cd17d5f": "/pay/vendor.38399b85dc8b880b2159.js",
    "b9603dba120743b9989868f52ca5d5e06d168e7e": "/pay/manifest.69efc2a0b3cd5929f939bef970c15424.json",
    "a215f45facd1390acb49a25fc60193f245288798": "/pay/icon_96x96.c31beaab489a503332b513a8a4a91f50.svg",
    "ac8300068eea32f979f4f91daacd7a99aa0741e3": "/pay/",
    "475149811120effeca4f853d79f9a6dd855e8c65": "/pay/wpmani.json"
  },
  "navigateFallbackURL": "/pay",
  "navigateFallbackForRedirects": true,
  "strategy": "changed",
  "responseStrategy": "cache-first",
  "version": "2018-4-13 17:31:30",
  "name": "webpack-offline",
  "pluginVersion": "4.9.0",
  "relativePaths": false,
  "prefetchRequest": {
    "credentials": "include",
    "mode": "cors"
  }
};

There doesn't seem to be a significant difference between the development metadata and production. I purposefully do my best to simulate prod locally when I develop.

[NekR]

All looks good. Maybe it simply download all the files for installation? e.g. some of them result with an error.

[leafoflegend]

I'm not seeing any errors in the service worker when online - and when offline - it seems as though nothing is there.

Is this something where leaning on the AppCache might help?

[NekR]

@leafoflegend not sure. It would be good if I could check out live version and look at what's wrong it with. If you do not want to share it publicly, you may send it to my email (it's on the GitHub profile page).

[cosmini357]

Hi @leafoflegend , I'm having the same issue, locally all works fine when 'offline' is checked but when is deployed this stop working. I'm also using a CDN for getting assets and I've specified a path for the service worker. How did you solve your problem?

this is my config

    new OfflinePlugin({
      rewrites: function(asset) {
        if (asset.endsWith('html')) {
          return 'https://cosmin.dev.zippie.org/' + asset
        } else {
          return cdnPath + '/' + asset
        }
      },
      excludes: ['**/*.map'],
      autoUpdate: true,
      externals: ['/'],
      ServiceWorker: {
        events: true,
        entry: './CustomSw.js',
        publicPath: '/sw.js',
      },
    }),