Маяк показывает Не отвечает 200 в автономном режиме в режиме pwa, но автономный режим работает

Быстрый вопрос:

Хотя браузер идентифицирует мое приложение как действующий PWA, а также показывает всплывающее окно установки в мобильном браузере. Когда он проверяется в lighthouse, он показывает Не отвечает 200 в автономном режиме. Я подтвердил, что оболочка моего приложения кэшируется из приложения (скриншоты прилагаются).

Подробности и предыстория. Я создал PWA на laravel, используя js и jquery. Для компиляции ассетов я использую смесь laravel, а для фреймворка PWA я использую workbox. Также для ясности я не использую никаких фреймворков / библиотек SPA.

Короче говоря, я создал собственный спа, используя более простые компоненты.

Для части PWA я использую рабочую панель вместе с смесью laravel. Вот мой сервис-воркер, manifest.json и файл микса. обратите внимание, что я использую sw.js и создаю prod-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, Кэш-хранилище и Lighthouse


person Aman Gambhir    schedule 21.11.2018    source источник


Ответы (1)


У меня такая же проблема, но без предоставления свойства templateUrl. У меня он работает в автономном режиме только в devTools, но не полностью в автономном режиме, и Lighthouse дал те же результаты, что и ваш.

person mushti    schedule 21.11.2018