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

我正在构建一个离线优先的Web应用程序。我正在使用redux-offline lib将我的状态存储在IndexedDB中。该应用程序在桌面上工作得非常好 - 我可以从网络上断开连接，刷新应用程序，所有数据都将从IndexedDB中恢复。但是，当我尝试在Android（或iPhone）上执行相同的操作时。当我进入飞行模式并尝试刷新应用程序的那一刻，我收到了“您处于离线状态”。 dinasaur错误（在Chrome中）。如何禁用离线优先应用程序中的连接检查（Chrome - Android和Safari iOS）

下面是我在我的清单文件，现在是相关的：

{ 
    "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

有没有办法禁用该检查？什么是正确的方式去呢？

来源

2017-04-17 Dmitry Shvedov

*“我的所有静态资源（包括我的JavaScript包）都是使用服务工作人员缓存的。“*这包括你的HTML文件吗？你的服务工作人员是否处理导航请求？如果你在Android上看到离线的dino，那么这意味着你没有一个软件开发工具可以与先前缓存的HTML一起响应导航请求。你的服务工作者设置？ –

@JeffPosnick你是对的，我忘记了SW中的index.html，将尝试与此并回馈给你，谢谢！ –

@JeffPosnick添加index.html（我的项目中唯一的静态html文件）到SW没有解决问题。用SW配置更新了这个问题。 –

您的Web应用清单的start_url设置为/events，因此，无论何时从Android设备上的主屏幕启动您的网络应用程序，这都将被导航到的URL。

你没有包括您fetch事件处理程序，但我假设它不会导航答复关于要求/events与/缓存的内容，而不必/events明确地添加到您的缓存。

您有几种选择，基于/和/events是否代表不同的HTML网页：

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

来源

2017-05-03 19:22:14

谢谢杰夫，这是一个SPA，所以抓取事件处理程序似乎是一种去我的方式。要去尝试这条路线... –

@Dmitry做到了帮帮我？ –

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

回答

相关问题