Работник службы Safari некорректно работает с пользовательской офлайн-страницей - PullRequest
0 голосов
/ 22 мая 2018

Я создал pwa-версию сайта с настраиваемой офлайн-страницей, используя сервисный работник.https://ohladkov.github.io/ При навигации по страницам они добавляются в кеш, а при повторном посещении они отображаются из кеша.Когда вы нажимаете на ссылку и не подключаетесь к Интернету, и эта страница не кэшируется, отображается автономная страница.

Экран автономной страницы

Есть 2варианты обновления страницы:

  • Когда на автономной странице появляется Интернет, появляется ссылка для обновления страницы.

ссылка для перезагрузки автономной страницы

  • Когда появится Интернет, вернитесь на любую доступную страницу (домашняя страница
    ) и перейдите на нужную страницу.

автономная страница

С первым вариантом проблем нет.А со вторым проблема в сафари.Проблема возникает, когда:

  1. нажал на ссылку без подключения к Интернету и получил офлайн-страницу
  2. В следующий раз, уже с подключением к Интернету, пошел по той же ссылке и снова получилавтономная страница, хотя должна отображаться онлайн-страница

Действия по воспроизведению проблемы:

  1. перейти на сайт с включенным Интернетом
  2. turnне в Интернете
  3. перейти на page1.html (отображается автономная страница)
  4. вернуться на index.html (перейти на домашнюю ссылку)
  5. включить интернет
  6. вернуться к page1.html (отображается автономная страница, но должен отображаться page1.html)
  7. перейти к 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...