Как отключить проверку подключения в приложении, работающем в автономном режиме (Chrome - Android и Safari iOS)

Question

Я создаю веб-приложение, которое работает в автономном режиме. Я использую автономную библиотеку redux для хранения моего состояния в IndexedDB. Приложение прекрасно работает на рабочем столе - я могу отключиться от Интернета, обновить приложение, и все данные будут повторно скопированы из IndexedDB. Однако, когда я пытаюсь сделать то же самое на Android (или iPhone). В тот момент, когда я перехожу в режим полета и пытаюсь обновить приложение, я получаю "Вы находитесь в автономном режиме". Ошибка диназавра (в Chrome).

Вот что у меня в файле манифеста сейчас, что имеет отношение:

{
  "short_name": "...",
  "name": "...",
  "manifest_version": 2,
  "offline_enabled": true,
  "start_url": "/events",
  "theme_color": "#000000",
  "background_color": "...",
  "display": "standalone",
  "default_locale": "en",
  "description": "...",
  "permissions": [
    "unlimitedStorage"
  ],
  "icons": [{...}]
}

Вот мой sw.js:

var CACHE_NAME = 'my-cache-v1';
var urlsToCache = [
  '/',
  '/index.html',
  '/dist/bundle.css',
  '/dist/bundle.js',
  '/assets/font-awesome/fonts/fontawesome-webfont.woff2',
  '/assets/fonts/...',
  '/assets/images/...',
  '/assets/images/favicon.ico',
  '/assets/tinymce/tinymce.min.js',
  '/assets/activity_notification.mp3',
];

self.addEventListener('install', function(event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('ServiceWorker: Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

Вот мой импорт этого в index.html:

if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register('/sw.js')
   .then(function(registration) { console.log('ServiceWorker registration successful with scope: ', registration.scope); })
   .catch(function(err) { console.log('ServiceWorker registration failed: ', err); });
  }

Все мои статические ресурсы, включая мои JavaScript-пакеты, кэшируются с помощью сервисного работника. Это работает, потому что я вижу консольные выходы из комплекта.

Я вижу, что все данные есть в IndexedDB. Это не отображается в консоли разработчика, когда я вижу офлайн Дино, хотя. Кажется, что Android просто мешает мне что-либо делать, если я не в сети.

GET ...url... net::ERR_INTERNET_DISCONNECTED ...url...
Navigated to data:text/html,chromewebdata

Есть ли способ отключить эту проверку? Как правильно это сделать?

Answer 1

Манифест вашего веб-приложения start_url установлен в /events так что это URL, по которому вы будете перемещаться при каждом запуске веб-приложения с домашнего экрана на устройстве Android.

Вы не включили свой fetch обработчик событий, но я предполагаю, что он не отвечает на запросы навигации для /events с кэшированным содержимым / и у вас нет /events явно добавлен в ваш кеш.

У вас есть несколько вариантов, в зависимости от того, / а также /events представлять отдельные страницы HTML:

• использование / вместо /events как start_url,
• добавлять /events в ваш список URL для предварительного кэширования, при условии, что это отдельная страница из /,
• Если на самом деле это одна и та же страница (потому что вы пишете одностраничное приложение, которое отвечает на все переходы одним и тем же HTML), то сохранение нескольких копий этой страницы под разными URL-адресами не очень эффективно. Вы должны вместо этого написать fetch обработчик событий, который проверяет, event.request.mode === 'navigate' и, если так, всегда отвечайте кэшированным ответом для /,
• Или используйте такой инструмент, как sw-precache создать свой сервисный работник для вас как часть процесса сборки. Он может быть настроен для поддержки вашего списка ресурсов на основе результатов вашей сборки и может автоматически обрабатывать все переходы для одностраничных приложений, отвечая кэшированным ответом для вашего общего HTML-кода.