No assets being cached.

[TheoMer]

OS: Windows 10 Pro Webpack: 3.10.0

So I'm running an SPA, which according to Lighthouse (chrome PWA plugin), is not caching any assets, either internal or external.

When I run an Lighthouise diagnostic on my test site, https://learn-redux.firebaseapp.com, I get the following report:

My webpack config file reads as:

const path = require('path');
const webpack = require('webpack');
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
const Dotenv = require('dotenv-webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const OfflinePlugin = require('offline-plugin');

module.exports = {
  devtool: 'source-map',
  context: __dirname,
  entry: {
    main: path.resolve(__dirname, './client/index'),
    vendor: [
      'react',
      'react-dom'
    ]
  },
  plugins: [
    new Dotenv({
      path: './.env',
      safe: true
    }),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': "'production'"
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false
      }
    }),
    new CleanWebpackPlugin(['public']), //Cleans webpack folder before new build
    new HtmlWebpackPlugin({
      title: 'Flamingo City',
      filename: 'index.html',
      template: './index_template.ejs',
    }),
    // See section on 'Extracting Boilerplate: https://webpack.js.org/guides/caching/
    new webpack.HashedModuleIdsPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor'
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest'
    }),
    new CopyWebpackPlugin([
      { from: '404.html' },
      { from: 'manifest.json' },
      { from: 'images', to: 'images' },
    ]),
    new OfflinePlugin({
      publicPath: '/',
      safeToUseOptionalCaches: true,
      caches: {
        main: [
          'main-*.js',
          'vendor-*.js',
          'manifest-*.js',
          'index.html',
          'images/*.png'
        ],
        additional: [
          ':externals:'
        ],
        optional: [
          ':rest:'
        ]
      },
      externals: [
        '/',
        'https://scontent.cdninstagram.com',
        'https://rawgit.com'
      ],
      ServiceWorker: {
        navigateFallbackURL: '/',
        events: true
      },
      AppCache: {
        FALLBACK: {
          '/': '/offline-page.html'
        },
        events: true
      }
    })
  ],
  output: {
    path: path.join(__dirname, '/public'),
    filename: '[name]-[chunkhash].js',
    publicPath: '/'
  },
  module: {
    rules: [
    // js
    {
      test: /\.js$/,
      use: ['babel-loader'],
      include: path.join(__dirname, 'client')
    },
    // CSS
    { 
      test: /\.styl$/, 
      include: path.join(__dirname, 'client'),
      use: [
        'style-loader',
        'css-loader',
        'stylus-loader'
      ]
    },
    // sCSS
    { 
      test: /\.scss$/, 
      include: path.join(__dirname, 'client'),
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ]
    }
    ]
  }
};

and my build file structure is as follows:

and images structure:

What am I overlooking here?

[TheoMer]

On further inspection, the following errors are being generated in console:

How do I address this?

[NekR]

'https://scontent.cdninstagram.com', 'https://rawgit.com'

It doesn't handle dynamic URLs, it accepts exact URLs. In your case you're trying to cache 'https://rawgit.com' main page and 'https://scontent.cdninstagram.com' main page.

[TheoMer]

@NekR Even when I specify an exact url, as follows:

      externals: [
        '/',
        'https://rawgit.com/milktronics/beaglegr.am/master/public/fonts/billabong-webfont.woff'
      ],

still Lighthouse indicates that the object has not been cached.

[NekR]

Those URLs you're trying to cache should have CORS headers implemented, otherwise it won't be cached (an error would happen as on your screenshot).

[TheoMer]

@NekR

It doesn't handle dynamic URLs

Are there any plans to implement this?

[NekR]

Well, there are plans, but no time for it.