我正在尝试使用服务工作者使我的网站脱机工作。 我的sw.js:
var cacheName = 'v40aswedsdfsadg';
var url = "https://spreadsheets.google.com/feeds/list/1LEGGLbrp3hqsN_CyZQMpmrUs5QTajjgjXyCgfwwIDQk/1/public/values?alt=json";
var cacheFiles = [
'./',
'./index.html',
'./js/app.js',
'./css/app.css',
'./vendor/jQuery/dist/jquery.min.js',
'./vendor/angular/angular.min.js',
'./vendor/lodash/dist/lodash.min.js',
'./vendor/gs2json.js',
url
];
self.addEventListener('install',function(e){
console.log('[SW] install');
e.waitUntil(
caches.open(cacheName).then(function(cache){
console.log('[SW] add cache');
return cache.addAll(cacheFiles);
})
);
});
self.addEventListener('activate',function(e){
console.log('[SW] activate');
e.waitUntil(
caches.keys().then(function(cacheNames){
return Promise.all(
cacheNames.map(function(thisCacheName){
if(thisCacheName!==cacheName){
console.log('[SW] delete cache: '+thisCacheName+'->'+cacheName);
return caches.delete(thisCacheName);
}
}));
})
);
});
self.addEventListener('fetch', function(event) {
console.log('[SW] fetch: '+event.request.url);
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Cache hit - return response
if (response) {
console.log('[SW] Loaded "'+response.url+'" from cache');
return response;
}
var fetchRequest = event.request.clone();
return fetch(fetchRequest).then(
function(response) {
console.log('[SW] fetch: '+response.url);
if(!response || response.status !== 200) {
console.log('[SW] fetch failed: ',!response, response.status!==200);
alert('fail');
return response;
}
var responseToCache = response.clone();
caches.open(cacheName)
.then(function(cache) {
console.log('[SW] put response to cache');
cache.put(event.request, responseToCache);
});
return response;
}
);
})
);
});
使用chrome时效果很好。
它不适用于chrome mobile: - 我没有脱机错误(这意味着服务工作者工作) - 来自https的数据将不会加载 - 第一次加载工作正常(从url获取数据时) - 秒和任何下一个加载不起作用(空白页=没有加载数据)
在隐身模式下(从缓存中获取数据)可以在移动设备上运行。
任何可以帮我解决这个问题的人?
编辑: 刚刚在移动版Firefox上测试它,它也可以工作。这似乎是移动铬的问题..