When trying offline mode, No Internet Connection even though assets are cached

[IonutQo2]

Hello,

I have been having issues when trying to run the PWA in offline mode. I receive no error when running the "yarn encore dev --watch". When checking the assets cached I can see that everything seems in place. I am using symfony 4.2 if that helps with encore and webpack

App.js file has the follwing code: require('offline-plugin/runtime').install();

Webpack.config.js has the following:

Encore
  .setOutputPath("public/build/")
  // public path used by the web server to access the output path
  .setPublicPath("/build")
  // only needed for CDN's or sub-directory deploy
  //.setManifestKeyPrefix('build/')

  .addEntry("app", "./assets/js/app.js")
  .addEntry("home", "./assets/js/ocrMain.js")
  .addEntry("collection", "./assets/js/collection.js")
  .addEntry("snippet", "./assets/js/snippet.js")
  .addEntry("label", "./assets/js/label.js")
  .addEntry("snippet-list", "./assets/js/snippetList.js")


  // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
  .splitEntryChunks()

  // will require an extra script tag for runtime.js
  // but, you probably want this, unless you're building a single-page app
  .enableSingleRuntimeChunk()

  .cleanupOutputBeforeBuild()
  .enableBuildNotifications()
  .enableSourceMaps(!Encore.isProduction())
  // enables hashed filenames (e.g. app.abc123.css)
  .enableVersioning(Encore.isProduction())

  // enables @babel/preset-env polyfills
  .configureBabel(() => { }, {
    useBuiltIns: "usage",
    corejs: 3
  })

  .addPlugin(new CopyWebpackPlugin([
    { from: './assets/img', to: 'img' }
  ]))

  .addPlugin(new OfflinePlugin({
    ServiceWorker: {
      start_url: "./",
      externals: ['./'],
    }
  }))

  // uncomment if you're having problems with a jQuery plugin
  .autoProvidejQuery();

module.exports = Encore.getWebpackConfig();

Inside the sw.js I got at the beginning the following:

var __wpo = {
  "assets": {
    "main": [
      "/build/app.css",
      "/build/app.js",
      "/build/collection.js",
      "/build/home.js",
      "/build/label.js",
      "/build/runtime.js",
      "/build/snippet.js",
      "/build/snippet-list.js",
      "/build/vendors~app.css",
      "/build/vendors~app.js",
      "/build/vendors~app~collection~home~label~snippet~snippet-list.js",
      "/build/vendors~home.js",
      "/build/img/icons/icon-128x128.png",
      "/build/img/icons/favicon-128.png",
      "/build/img/icons/favicon-192.png",
      "/build/img/icons/icon-152x152.png",
      "/build/img/icons/icon-192x192.png",
      "/build/img/icons/icon-144x144.png",
      "/build/img/icons/icon-256x256.png",
      "/build/img/icons/logo.png",
      "/build/img/icons/icon-512x512.png",
      "/build/img/sky_loader_39_42.GIF",
      "/build/img/main.jpg"
    ],
    "additional": [],
    "optional": []
  },
  "externals": [],
  "hashesMap": {
    "bdf5e337196dfbfda4f79cdb532ae96afbe67bc2": "/build/app.css",
    "e648b8b948a8df311f37cdc15dfb50f577ce7ba0": "/build/app.js",
    "28816cac30deab3ebe7df7c4ce2c7d55062ab25f": "/build/collection.js",
    "edac3dcd9a3959dbee2300002e1057d2b0a3c5f0": "/build/home.js",
    "ab6ad3de0e63ef66404a4ab9405f79713519ae10": "/build/label.js",
    "4c245e0f951b0807eacbd9a15ed5405958d58d97": "/build/runtime.js",
    "ec5b791c50853401eb959776b315e83522500b17": "/build/snippet.js",
    "3bda66b23c8de88fc987e87eafe04b22fd8987ec": "/build/snippet-list.js",
    "884a98f9a3aedc99afaf4197b2ab1f744c174010": "/build/vendors~app.css",
    "9c69c7ac5649bdaf7885f189bc21cad0726822cd": "/build/vendors~app.js",
    "386f36318e1693aadfe9aec8b0415ef88fd714a7": "/build/vendors~app~collection~home~label~snippet~snippet-list.js",
    "a919b7bb788b46a54619076106dbecb73d1ab5be": "/build/vendors~home.js",
    "c4174cf73a0433bdf8e96e0160b2e48ad875c857": "/build/img/icons/favicon-128.png",
    "9e53f4ae19a3ad293c89593619795052fa9418f7": "/build/img/icons/icon-192x192.png",
    "45f99d99f3f770dc9e787db374f28b991879bd65": "/build/img/icons/icon-152x152.png",
    "7ffd0665e7c7cc3616a517d2c57e83e036b1a899": "/build/img/icons/icon-144x144.png",
    "ed8879d12c59171e53ee2076e64be43503e2271c": "/build/img/icons/icon-256x256.png",
    "b4ac573717102b770d8d9bbcb29f75d791f142e4": "/build/img/icons/logo.png",
    "bb520c114d5d878fa9cf8d6ea4cede5f76ddf6d6": "/build/img/icons/icon-512x512.png",
    "7c0edfd7ba269458a5d72134c319415432652157": "/build/img/sky_loader_39_42.GIF",
    "8232cb54d2d63c980ee13dbcdffc367bba0f01aa": "/build/img/main.jpg"
  },
  "strategy": "changed",
  "responseStrategy": "cache-first",
  "version": "7/21/2019, 9:05:28 PM",
  "name": "webpack-offline",
  "pluginVersion": "5.0.7",
  "relativePaths": false
};

The browser attached images:

From this I can see that the assets are cached:

Also I can see in the manifest tab that it says: "No matching service worker detected" if that means anything.

I have also tried to leave plugin setup without any configuration with the same result: .addPlugin(new OfflinePlugin())

I am trying this using a docker container andthe localhost host. Can someone help? I have stayed all day trying to debug and find related issues but with no success.

[IonutQo2]

Any ideas? I haven't been able to solve this

[GGAlanSmithee]

@IonutQo2

It could be the case that your index.html file is note being being exlcuded properly. This could be if webpack is responsible for generating it via for example htmlwebpackplugin. (see, amongst other, issue #229)

This could be fixed by excluding your root. Depending on how this is served (I am not familiar with symfony), it could be as easy as adding it to externals:

externals: [
    '/'
]

Also, please see the troubleshooting docs for additional info.