Offline page?

[vlados]

Chrome Dev Tools

Site cannot be installed: Page does not work offline. Starting in Chrome 93, the installability criteria is changing, and this site will not be installable. See https://goo.gle/improved-pwa-offline-detection for more information.

Question What is the correct way to make PWA to work offline with the package?

For example in silviolleite/laravelpwa is like this:

self.addEventListener("fetch", event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                return response || fetch(event.request);
            })
            .catch(() => {
                return caches.match('offline');
            })
    )
});

[vlados]

So my solution to the problem is:

webpack.mix.js:

mix.generateSW({
        swDest: path.join(`${__dirname}/public`, 'service-worker.js'),
        cacheId: 'ver_'+skipHash.trim(),
        directoryIndex: '/',
        clientsClaim: true,
        skipWaiting: true,
        additionalManifestEntries: [
          "/offline"
        ],
        runtimeCaching: [
            {
                urlPattern: new RegExp(`${process.env.APP_URL}`),
                handler: 'NetworkOnly',
                options: {
                    cacheName: `${process.env.APP_NAME}-${process.env.APP_ENV}-${process.env.MIX_HASH}`,
                    cacheableResponse: {statuses: [200]},
                    precacheFallback: {
                        fallbackURL: "/offline",
                    }
                }
            },
            {
                urlPattern: new RegExp('https://fonts.(googleapis|gstatic).com'),
                handler: 'CacheFirst',
                options: {
                    cacheName: 'google-fonts'
                }
            },
            {
                urlPattern: /images\/.*\.(?:png|jpg|jpeg|svg)$/,
                handler: 'CacheFirst',
                options: {
                    cacheName: 'images'
                }
            },
            {
                urlPattern: /^\/css\/\.css$/,
                handler: 'CacheFirst',
                options: {
                    cacheName: 'assets-css'
                }
            },
            {
                urlPattern: /^\/js\/\.js$/,
                handler: 'CacheFirst',
                options: {
                    cacheName: 'assets-js'
                }
            }
        ]
    })

[therajumandapati]

@vlados what is skipHash.trim()?

[vlados]

@vlados what is skipHash.trim()?

git hash of last commit