Как добавить Google Workbox в проект Angular?

Question

Я пытаюсь использовать Google Workbox в своем проекте, но пока нет текущих руководств и руководств по шагам, чтобы заставить рабочий ящик работать с новым угловым проектом. У кого-нибудь есть понимание или ресурсы о том, как это делается, поскольку angular использует машинописный текст вместо прямых js? Например, мастер рабочего ящика работает с угловым проектом или мне нужно сделать что-то особенное?

Answer 1

У вас есть много способов использовать Workbox в вашем Angular проекте

Если вы используете веб-пакет, вы можете легко создать работника службы с workbox-webpack-pluginвсе материалы о том, как его использовать, подробно описаны здесь. Вы можете использовать GenerateSW для создания полноценного работника службы, кэширования во время выполнения и т. д. Существует также InjectManifest Плагин для создания предварительного кэшированного манифеста и внедрения его в ваш собственный сервисный работник.

Кстати, если вы предпочитаете писать свои собственные, а не использовать плагины, вы все равно можете написать своему сервисному работнику с прямыми j в своем проекте Angular и использовать Angular ServiceWorkerModule зарегистрировать его в своем приложении с register() функция (это должно быть сделано внутри imports массив вашего основного углового модуля). Вам также необходимо импортировать библиотеку workbox в ваш сервисный работник с помощью importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.2/workbox-sw.js');

Я никогда не использовал мастер рабочих коробок, поэтому я не могу рассказать вам больше об этом, но вышесказанное должно помочь.