Доброго времени суток! Пытаюсь настроить установку PWA приложения с сайта без подключения внешних файлов.
Подскажите пожалуйста есть ли способ встроить service worker в index.html
Или подключить его с другого поддомена, например sw.js находится на example.com/sw.js а index.html на test.example.com/index.html.
CORS не проблема.
Спасибо!
Файл index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>TEST</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#46a546" />
<link rel="manifest" href="pwa.json">
<script>
if ("serviceWorker" in navigator) {
self.addEventListener("load", async () => {
const container = navigator.serviceWorker;
if (container.controller === null) {
const reg = await container.register("sw.js");
}
});
}
</script>
</head>
<body>
</body>
</html>
Файл service worker sw.js
'use strict';
const CACHE_STATIC = 'static-cache-v1';
function hndlEventInstall(evt) {
async function cacheStaticFiles() {
const files = [
'icon.png',
];
const cacheStat = await caches.open(CACHE_STATIC);
await Promise.all(
files.map(function (url) {
return cacheStat.add(url).catch(function (reason) {
console.log(`'${url}' failed: ${String(reason)}`);
});
})
);
}
evt.waitUntil(cacheStaticFiles());
}
function hndlEventFetch(evt) {
async function getFromCache() {
const cache = await self.caches.open(CACHE_STATIC);
const cachedResponse = await cache.match(evt.request);
if (cachedResponse) {
return cachedResponse;
}
const resp = await fetch(evt.request);
await cache.put(evt.request, resp.clone());
return resp;
}
evt.respondWith(getFromCache());
}
self.addEventListener('install', hndlEventInstall);
self.addEventListener('fetch', hndlEventFetch);
