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 包)都使用 service worker 进行缓存。它确实有效，因为我看到了 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 的工具作为构建过程的一部分为您生成服务人员。它可以配置为根据构建的输出维护 Assets 列表，并且可以 automatically handle all navigations对于单页应用程序，通过对常用 HTML 的缓存响应进行响应。