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

Question

我正在构建一个离线优先的网络应用程序。我正在使用 redux-offline lib 将我的状态存储在 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

您的 Web App Manifest 的 start_url 设置为 /events，因此当您从 Android 设备的主屏幕启动 Web 应用时，该 URL 将被导航到。

您没有包含您的 fetch 事件处理程序，但我假设它不会使用 / 的缓存内容响应 /events 的导航请求，并且您没有 @987654328 @ 明确添加到您的缓存中。

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

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