Wsrtjtyk

Quick question:

While the browser identifies my application as a valid PWA, as well as shows the install popup on the mobile browser. When it is audited in lighthouse, it shows Does not respond with a 200 when offline. I have validated that my app shell is cached from application(screenshots attached).

Details and Background:
I have built PWA on laravel using js and jquery. For asset compiling, I am using laravel mix and for PWA framework, I am using workbox. Also just to be clear I am not using any SPA framework/library .

In short I have built a custom spa using simpler components.

For PWA part this I am using workbox along with laravel mix.
Here are my service worker, manifest.json and mix file. note that I use sw.js and generate prod-sw.js using laravel-mix. This prod-sw.js is used in production

webpack.mix.js

require('laravel-mix-versionhash');

const mix = require('laravel-mix');



const workboxPlugin = require('workbox-webpack-plugin');

mix.webpackConfig({

    output: {

        filename: '[name].[contenthash].js',

        publicPath: ''

    }, 

    plugins: [

        new workboxPlugin.InjectManifest({

            swSrc: 'sw.js', // more control over the caching

            swDest: 'prod-sw.js', // the service-worker file name

            importsDirectory: 'service-worker', // have a dedicated folder for sw files

            exclude: [/.map$/, /mix-manifest.json$/, /mix..*.js$/, /manifest.json$/, /service-worker.js$/, /OneSignalSDKWorker.js$/],

            include: [/template..*.html$/, /.js$/, /app..*.css$/, /logo.png$/],

            templatedUrls: {

              '/pwa': 'version-' + process.env.MIX_APP_VERSION,

            },

        })

    ],

})



mix.sass('resources/assets/sass/homepage.scss', 'public/css/')

    .sass('resources/assets/sass/amp.scss', 'public/css/')

    .sass('resources/assets/sass/app.scss','public/css/');



if (mix.inProduction()){

    mix.versionHash();

}else{

    mix.sourceMaps();

}

sw.js

var version = 123;



workbox.core.setLogLevel(workbox.core.LOG_LEVELS.silent);

workbox.skipWaiting();

workbox.clientsClaim();



const precacheController = new workbox.precaching.PrecacheController();





// Cache all scripts and stylesheets using an extension whitelist

workbox.routing.registerRoute(new RegExp('.(?:css|html|ico)$'),

    workbox.strategies.staleWhileRevalidate({

        cacheName: 'static-resources',

        /* plugins: [

        new workbox.expiration.Plugin({

            maxEntries: 35,

            maxAgeSeconds:1*24*60*60,

        }),

        ], */

    })

);



workbox.routing.registerRoute(new RegExp('.*(?:pwa.|vendors.).*.js$'),

    workbox.strategies.cacheFirst({

        cacheName: 'js-cache-' + version,

        plugins: [

        new workbox.expiration.Plugin({

            maxAgeSeconds: 8*24*60*60,

        }),

        ], 

    })

);



workbox.routing.registerRoute('/pwa',

    workbox.strategies.cacheFirst({

        cacheName: 'html-cache-' + version,

    })

);





workbox.precaching.precacheAndRoute(self.__precacheManifest);

manifest.json

{

    "short_name": "Example",

    "name": "Example",

    "description": "Example App Description",

    "gcm_sender_id": "1234567890",

    "start_url" : "/pwa",

    "display": "standalone",

    "orientation": "portrait",

    "theme_color": "#FFFFFF",

    "background_color": "#FFFFFF",

    "icons": [

        {

            "src": "https://cdn.example.com/assets/icons/icon-48x48.png",

            "sizes": "48x48",

            "type": "image/png"

        }

    ]

}

A snapshot of manifest file, cache storage and lighthouse report is attached for your reference. Manifest.json, Cache Storage and Lighthouse

I have the same issue but without providing templateUrl property.
It works offline for me just in devTools but not fully offline and lighthouse has given the same results as yours.