Как предварительно кэшировать компоненты в пользовательском сервисе работника в angular

Question

Я хочу написать своего работника сервиса в моем angular проекте. Я не хочу использовать @ angular / pwa или любую другую библиотеку, я хочу писать с нуля в целях обучения.

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

. В обычных проектах мы можем сделать это очень легко, но в angular у нас есть файл ts, так как кеш angular компонентов, помогите пожалуйста!

const cacheNames = ['static-v1'];
const [ STATIC_CACHE ] = cacheNames;

const staticAssets = [
   // App component here
];

self.addEventListener('install', async event => { 
    const cache = await caches.open(STATIC_CACHE);
    cache.addAll(staticAssets);
});

Answer 1

Сама концепция кэширования отсутствует. Что вы должны кешировать: js, css, fonts, png, jpg and e.t.c.

Когда у вас есть одностраничное приложение, возможно, что вы используете какой-то инструмент (например, Webpack).

Вы создаете файл service-worker.js в своем файле sr c и добавляете его туда:

const staticAssets = [
   '/main.bundle.js`
];

Затем вы используете webpack для копирования этого файла в root каталог dist папки.

Если у вас есть хэши в файлах, сгенерированных веб-пакетом, Cache.addAll вам не поможет. В этом и многих других случаях я настоятельно рекомендую использовать Workbox