Как добавить источник внешних данных в генерацию сервисного работника в gulp?

следуйте инструкциям по установке из примера gulp workbox здесь https://developers.google.com/web/tools/workbox/get-started/gulp

gulp.task('generate-service-worker', () => {
        return workbox.generateSW({
            globDirectory: buildDir,
            globPatterns: ['**\/*.{html,png,css,js,ico,eot,svg,ttf,woff,woff2,jpg,json}'
            // swSrc: 'sw.js', isn't working in generator
            swDest: buildDir+`/sw.js`,
            clientsClaim: true,
            skipWaiting: true
        }).then(() => {
            console.info('Service worker generation completed.');
        }).catch((error) => {
            console.warn('Service worker generation failed: ' + error);
        });
    });

и все идет очень хорошо.

НО теперь я хочу добавить внешний источник в свое поколение SW.

Здесь написано, как добавить, например. внешний источник шрифта Google для сценария сервисного работника: https://developers.google.com/web/tools/workbox/next/

Я не уверен, как добавить это в мой генератор в gulp.

Я думал, что это может работать как этот вариант:

globPatterns: ['**\/*.{html,png,css,js,ico,eot,svg,ttf,woff,woff2,jpg,json}','^https://fonts.(?:googleapis|gstatic).com/(.*)'],

Я также попытался включить собственный скрипт с этой опцией. но это невозможно с генератором. сказала ошибка.

swSrc: 'sw.js',

Нужен ли мне второй пользовательский сервис-воркер для внешних источников за пределами моего gulp-скрипта?

изменить

возможно, я найду ответ здесь: сборка Workbox с grunt


javascript gulp workbox
person André Kelling    schedule 24.01.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

извините, что отвечаю на свой вопрос.

ДА, вы можете добавить, изменив свой скрипт gulp следующим образом:

gulp.task('generate-service-worker', () => {
    return workbox.generateSW({
        globDirectory: buildDir,
        globPatterns: ['**\/*.{html,png,css,js,ico,eot,svg,ttf,woff,woff2,jpg,json}'],
        runtimeCaching: [
            {
                urlPattern: new RegExp('^https://fonts.(?:googleapis|gstatic).com/(.*)'),
                handler: 'cacheFirst',
                options: {
                    cacheName: 'font-cache',
                    cacheExpiration: {
                        maxEntries: 10,
                    },
                },
            }
        ],
        swDest: buildDir+`/sw.js`,
        clientsClaim: true,
        skipWaiting: true
    }).then(() => {
        console.info('Service worker generation completed.');
    }).catch((error) => {
        console.warn('Service worker generation failed: ' + error);
    });
});

это добавит используемые внешние шрифты Google в кеш.

person André Kelling    schedule 24.01.2018