возможно, я не понял, как это должно работать. Но я следовал Руководствам Google для PWA на рабочем столе и могу установить PWA нормально. Единственная проблема, на которую у меня нет ответа, - кешированный индекс. html отображается в виде обычного текста, а не отображается HTML.
Мой ServiceWorker выглядит следующим образом:
const CACHE_NAME = 'backfuel-cache-v1';
const urlsToCache = [
'/backfuel/src/manifest.json',
'/backfuel/src/index.html',
'/backfuel/src/css/Main.css',
'/backfuel/src/app/Main.js'
];
self.addEventListener('install', function (event) {
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME)
.then(function (cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('fetch', function (event) {
event.respondWith(
caches.match(event.request)
.then(function (response) {
console.log('Cache response: ', response.clone());
// Cache hit - return response
if (response) {
return response;
}
return fetch(event.request).then(
function (response) {
// Check if we received a valid response
if (!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
// IMPORTANT: Clone the response. A response is a stream
// and because we want the browser to consume the response
// as well as the cache consuming the response, we need
// to clone it so we have two streams.
const responseToCache = response.clone();
caches.open(CACHE_NAME)
.then(function (cache) {
cache.put(event.request, responseToCache).then(
res => {
console.log('Chached', res);
},
rej => {
console.log('Cache Error: ', rej);
});
});
return response;
}
);
})
);
});
И HTML вот так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#eeeeee">
<title>backfuel</title>
<link href="https://fonts.googleapis.com/css?family=Abel|Karla|Pacifico&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/backfuel/src/css/Main.css">
<link rel="manifest" href="/backfuel/src/manifest.json">
<script type="module" src="/backfuel/src/app/Main.js"></script>
</head>
<body>
<div id="title-bar">
<h2 id="title">
backfuel
</h2>
</div>
<div id="content">
<ul class="carousel">
<li class="carousel-item"><p>01.01.2020</p><p>32l</p><p>670km</p><p>44.26 €</p></li>
<li class="carousel-item"><p>20.01.2020</p><p>16l</p><p>250km</p><p>22.15 €</p></li>
<li class="carousel-item"><p>15.02.2020</p><p>64l</p><p>1001km</p><p>83.67 €</p></li>
<li class="carousel-item"><p>30.02.2020</p><p>8l</p><p>50km</p><p>5.81 €</p></li>
<li class="carousel-item"><p>10.03.2020</p><p>48l</p><p>750km</p><p>72.69 €</p></li>
<li class="carousel-item"><p>01.04.2020</p><p>56l</p><p>900km</p><p>85.18 €</p></li>
</ul>
</div>
<button class="fab">
+
</button>
</body>
</html>
Это манифест:
{
"short_name": "backfuel",
"name": "backfuel",
"icons": [
{
"src": "app/img/icons-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "app/img/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/backfuel/src/",
"background_color": "#eeeeee",
"display": "standalone",
"scope": "/backfuel/src/",
"theme_color": "#ff0000"
}
На странице отображается содержимое индекса. html в виде простого текста при загрузке из ServiceWorker / Cache. Я уверен, что это должен быть дубликат, но я не смог найти правильный поиск, чтобы найти ответ.
Спасибо!