javascript - 如何禁用离线优先应用程序中的连接检查(Chrome - Android 和 Safari iOS)

Question

我正在构建一个离线优先的网络应用程序。我正在使用 redux-offline lib 将我的状态存储在 IndexedDB 中。该应用程序在桌面上运行得非常好 - 我可以断开网络连接，刷新应用程序，所有数据都将从 IndexedDB 重新水化。然而，当我尝试在 Android(或 iPhone)上做同样的事情时。当我进入飞行模式并尝试刷新应用程序时，我收到一条“您已离线”。恐龙错误(在 Chrome 中)。

这是我现在 list 文件中的相关内容:

{
  "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 包)都使用服务工作线程进行缓存。它确实有效，因为我看到了 bundle 的控制台输出。

我看到所有数据都在 IndexedDB 中。不过，当我看到离线恐龙时，它不会显示在开发人员控制台中。看来 Android 只是阻止我在离线状态下执行任何操作。

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

有办法禁用该检查吗？正确的做法是什么？

Answer 1

您的 Web 应用程序 list 的 start_url设置为 /events ，因此这就是每当您从 Android 设备上的主屏幕启动 Web 应用程序时都会导航到的 URL。

您没有包含您的 fetch事件处理程序，但我假设它不响应 /events 的导航请求缓存内容为/ ，而你没有 /events显式添加到您的缓存中。

根据是否/，您有几个选择和/events代表不同的 HTML 页面:

• 使用/而不是/events作为start_url .
• 添加/events到要预缓存的 URL 列表，假设它是与 / 不同的页面.
• 如果它实际上是同一页面(因为您正在编写一个单页面应用程序，该应用程序使用相同的 HTML 响应所有导航)，那么将该页面的多个副本存储在不同的 URL 下实际上效率并不高。你应该写一个 fetch事件处理程序检查是否 event.request.mode === 'navigate' ，如果是这样，则始终使用 / 的缓存响应进行响应.
• 或者，使用类似 sw-precache 的工具作为构建过程的一部分，为您生成 Service Worker。它可以配置为根据构建的输出维护 Assets 列表，并且可以automatically handle all navigations对于单页应用程序，通过使用常用 HTML 的缓存响应进行响应。