Я работаю над приложением PWA (оптимизировано android и ios) и не может работать в автономном режиме. html на ios для работы. Я работаю с webmanifest и ServiceWorker.
Вот мой код из индекса. html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TestStore</title>
<script src="index.js" defer></script>
<link rel="manifest" href="manifest.webmanifest">
<script async src="https://unpkg.com/pwacompat" crossorigin="anonymous"></script>
<link href="style_menue.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-title" content="TestStore" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
.......
Я регистрирую работника сервиса в индексе. js
if('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/sw.js')
.then(function() { console.log('Service Worker Registered');});
}
и вот мой сервисный работник (sw. js)
const OFFLINE_VERSION = 1;
const CACHE_NAME = 'offline';
const OFFLINE_URL = 'offline.html';
self.addEventListener('install', (event) => {
event.waitUntil((async () => {
const cache = await caches.open(CACHE_NAME);
await cache.add(new Request(OFFLINE_URL, {cache: 'reload'}));
})());
});
self.addEventListener('activate', (event) => {
event.waitUntil((async () => {
if ('navigationPreload' in self.registration) {
await self.registration.navigationPreload.enable();
}
})());
self.clients.claim();
});
self.addEventListener('fetch', (event) => {
if (event.request.mode === 'navigate') {
event.respondWith((async () => {
try {
const preloadResponse = await event.preloadResponse;
if (preloadResponse) {
return preloadResponse;
}
const networkResponse = await fetch(event.request);
return networkResponse;
} catch (error) {
console.log('Fetch failed; returning offline page instead.', error);
const cache = await caches.open(CACHE_NAME);
const cachedResponse = await cache.match(OFFLINE_URL);
return cachedResponse;
}
})());
}
});
Вот мой манифест.webmanifest
{
"background_color": "white",
"description": "My first Store",
"display": "fullscreen",
"icons": [
{
"src": "icon/fox-icon.png",
"sizes": "192x192",
"type": "image/png"
}
],
"name": "TestStore",
"short_name": "TestStore",
"start_url": "/"
}
Chrome показывает офлайн. html но сафари нет.