Lighthouse显示在pwa中离线时不会以200回应，但离线模式可以工作

Question

快速问题：

浏览器将我的应用程序识别为有效的PWA，并在移动浏览器上显示安装弹出窗口。当它在灯塔中被审计时，它显示离线时不会以200回应。我已经验证了我的应用程序外壳是从应用程序中缓存的(附屏幕截图(。

详细信息和背景：我使用js和jquery在laravel上构建了PWA。对于资产编译，我使用laravel混合，对于PWA框架，我使用workbox。同样需要明确的是，我没有使用任何SPA框架/库。

简而言之，我用更简单的组件建造了一个定制的水疗中心。

对于PWA部分，我使用工作簿和laravel混合。这是我的服务人员manifest.json和mix文件。注意，我使用sw.js，并使用laravel-mix生成prod-sw.js。该产品用于生产

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"
}
]
}

随附清单文件、缓存和灯塔报告的快照供您参考。Manifest.json，缓存和灯塔

Answer 1

我有同样的问题，但没有提供templateUrl属性。它只在devTools中离线工作，但不完全离线，灯塔给出了与您相同的结果。