Я создал pwa-версию сайта с настраиваемой офлайн-страницей, используя сервисный работник.https://ohladkov.github.io/ При навигации по страницам они добавляются в кеш, а при повторном посещении они отображаются из кеша.Когда вы нажимаете на ссылку и не подключаетесь к Интернету, и эта страница не кэшируется, отображается автономная страница.
Экран автономной страницы
Есть 2варианты обновления страницы:
- Когда на автономной странице появляется Интернет, появляется ссылка для обновления страницы.
ссылка для перезагрузки автономной страницы
- Когда появится Интернет, вернитесь на любую доступную страницу (домашняя страница
) и перейдите на нужную страницу.
автономная страница
С первым вариантом проблем нет.А со вторым проблема в сафари.Проблема возникает, когда:
- нажал на ссылку без подключения к Интернету и получил офлайн-страницу
- В следующий раз, уже с подключением к Интернету, пошел по той же ссылке и снова получилавтономная страница, хотя должна отображаться онлайн-страница
Действия по воспроизведению проблемы:
- перейти на сайт с включенным Интернетом
- turnне в Интернете
- перейти на page1.html (отображается автономная страница)
- вернуться на index.html (перейти на домашнюю ссылку)
- включить интернет
- вернуться к page1.html (отображается автономная страница, но должен отображаться page1.html)
- перейти к page2.html - все работает правильно, онлайн-страница загружается
Кто сталкивался с такой проблемой?Похоже, что сафари запоминает группу запрос-ответ и возвращает один и тот же результат, независимо от подключения к Интернету.
'use strict';
const CACHE_VERSION = 1;
const BASE_URL = location.origin + '/';
const OFFLINE_URL = '/offline.html';
const CURRENT_CACHES = {
offline: 'offline-v' + CACHE_VERSION,
};
const URLS_TO_CACHE = [
BASE_URL,
OFFLINE_URL,
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CURRENT_CACHES.offline)
.then(cache => {
return cache.addAll(URLS_TO_CACHE);
})
.then(() => {
return self.skipWaiting()
})
);
});
self.addEventListener('activate', event => {
let expectedCacheNames = Object.keys(CURRENT_CACHES).map(function (key) {
return CURRENT_CACHES[key];
});
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (expectedCacheNames.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
.then(() => {
return self.clients.claim()
})
);
});
// fetch requests
self.addEventListener('fetch', event => {
const responsePromiseFactory = () => {
return caches.open(CURRENT_CACHES.offline).then((cache) => {
return cache.match(event.request).then(response => {
if (response) {
return response;
}
const fetchRequest = event.request.clone();
return fetch(fetchRequest)
.then(response => {
const responseToCache = response.clone();
if (!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
cache.put(event.request, responseToCache)
return response;
})
})
})
.catch(error => {
return caches.match(OFFLINE_URL)
})
};
event.respondWith(responsePromiseFactory());
});
Протестировано на настольном компьютере Safari v.11.1 и мобильном устройстве Safari ios версии 11.3.1