Lighthouse shows Does not respond with a 200 when offline in pwa but offline mode works - laravel-5

Question

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

Answer 1

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.