Workbox — это новый проект от Google, который упрощает кодирование таких сценариев использования сервис-воркеров, как кэширование, фоновая синхронизация и постановка аналитики в очередь в автономном режиме.
Вы можете установить плагин workbox webpack из библиотеки NPM, используя следующую команду:
Плагин npm i workbox-webpack
Он установит последнюю библиотеку рабочих ящиков из NPM. Теперь, прежде всего, вам нужно сгенерировать файл сервисного работника, используя веб-пакет и рабочий ящик, поэтому в вашей конфигурации веб-пакета js напишите следующий код:
const {GenerateSW} = require('workbox-webpack-plugin');
Теперь, используя module.exports, определите плагин с конфигурацией рабочего ящика следующим образом:
новый Генерировать SW({
globDirectory: ‘./dist’,
globPatterns: [‘**/*.{html,js,css}’],
исключить: [/\.map$/, /\.json$/, /\.txt$/],
включают: [/main(.*)\.js$/, /vendor(.*)\.js$/],
ignoreUrlParametersMatching: [/manifest/, /robots/, /^utm_/],
skipWaiting: правда,
clientClaim: правда,
cacheId: ‘myPwa’,
swDest: ‘./serviceworker.js’
}),
Приведенный выше код создаст сервис-воркер, который добавит все файлы js, css, html в массив манифеста предварительного кэша, который будет добавлен в кеш при первой загрузке пользователем. Дополнительные параметры создания сервис-воркера см. на странице https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin.
Чтобы зарегистрировать сервис-воркера, напишите ниже код:
if ("serviceWorker" в навигаторе) {
navigator.serviceWorker.register('/serviceworker.js');
}
Это все, что касается базовой интеграции Workbox с webpack. В следующей статье будет описана пользовательская реализация Workbox с использованием его плагинов и модулей.
Наша Часть 2 готова: https://medium.com/@chahatmiddha/integration-of-google-workbox-using-webpack-in-native-app-pwa-part-2-custom-implementation-3412fc71fae7
