如何禁用离线优先应用程序中的连接检查(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
有没有办法禁用该检查?什么是正确的方式去呢?
您的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。
谢谢杰夫,这是一个SPA,所以抓取事件处理程序似乎是一种去我的方式。要去尝试这条路线... –
@Dmitry做到了帮帮我? –
*“我的所有静态资源(包括我的JavaScript包)都是使用服务工作人员缓存的。“*这包括你的HTML文件吗?你的服务工作人员是否处理导航请求?如果你在Android上看到离线的dino,那么这意味着你没有一个软件开发工具可以与先前缓存的HTML一起响应导航请求。你的服务工作者设置? –
@JeffPosnick你是对的,我忘记了SW中的index.html,将尝试与此并回馈给你,谢谢! –
@JeffPosnick添加index.html(我的项目中唯一的静态html文件)到SW没有解决问题。用SW配置更新了这个问题。 –