I'm in the process of turning a, what was called, "PWA" into an actual PWA. I have successfully gotten a serviceworker attached to the application and now I wanna know how to precache the entire application so that internet connection is "never" needed to open the application if it has already been cached in the browser.

To my mind the StaleWhileRevalidate strategy SHOULD be the best option here, but I have been bested by, either, my own ability to read documentation or workbox-webpack's horrible attempt at documentation (it's most likely the former, rather than the latter)

I have my webpack.common.js file which is my general webpack config entry point for all types of builds.

'use strict';

const helpers = require('./helpers');
const path = require('path');

const VueLoaderPlugin = require('vue-loader/lib/plugin')
const WorkboxPlugin = require('workbox-webpack-plugin')

module.exports = {
    entry: {
        polyfill: '@babel/polyfill',
        main: path.resolve(__dirname, '../src/main.js'),
        vendor: path.resolve(__dirname, '../src/vendor.js')
    },
    module: {
        rules: [{
                test: /\.(vue|Vue)$/,
                loader: 'vue-loader',
                include: [helpers.root('src')]
            },
            {
                test: /\.html$/,
                use: [
                   {
                    loader: 'html-loader',
                   }
                ]
            },
            {
                test: /\.ico$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[hash].[ext]',
                        outputPath: 'assets/img/icons'
                    }
                }
            },
            {
                test: /\.svg$/,
                use: [{
                        loader: 'svg-sprite-loader',
                        options: {
                            spriteFilename: 'sprites.svg',
                            runtimeCompat: true
                        }
                    },
                    {
                        loader: 'svgo-loader',
                        options: {
                            removeTitle: true,
                            removeUselessStrokeAndFill: true
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new WorkboxPlugin.GenerateSW({
            exclude: ['./static/1pixel.png'],
            maximumFileSizeToCacheInBytes: 6291456,
            clientsClaim: true,
            skipWaiting: true,
            runtimeCaching: [
                {
                    handler: 'CacheFirst',
                    urlPattern: /\.(?:js|css|html)$/,
                    options: {
                        cacheName: 'static-assets-cache',
                        cacheableResponse: {
                            statuses: [200]
                        }
                    }
                }
            ]
        })
    ]
};

so far I have gotten to the point where I can exclude an image file from the cache, but that's about as far as I have gotten. I want to achieve the following:

I open the application WITH internet connection. Get everything loaded, cached and ready to go. I then close the tab the application was loaded in, but my phone in my pocket and go about my business. I then later want to open the application again, but now WITHOUT internet connection. This should be possible since the application should live in the cache. However. I can see in my applications cache all of my fonts, image assets, polyfill and stores (js) have been cached, but not the index.html file. And I guess that is why my application refuses to load after a tab in the browser is disposed.

TL;DR - How do I precache the index.html so that the application will load even after a browsertab has been disposed or the browser timed out the session that my PWA lives in?

CodePudding user response：

My current solution was to add:

{
    handler: 'CacheFirst',
    urlPattern: './index.html',
    options: {
        cacheName: 'index-assets-cache',
        cacheableResponse: {
            statuses: [200]
        }
    }
}

To my runtimeCaching object. I also fixed my manifest.json config to comply with the standards defined by Chrome and Safari. This way I can install the PWA as an app on the phone, which fixes my problem when the app is installed on the phone.

The problem still persists in a normal browser on a phone. After login and load of all files and precaching I cannot close the tab and open it again from an offline state. So this is not a complete answer.