谷歌检测中网站CSS丢失,疑似Service Worker问题求助
网站移动友好性测试样式加载异常问题
我在浏览器中加载网站时显示正常,但使用谷歌移动友好性测试工具检测时,网站未加载样式表,无法通过移动端适配测试。怀疑是当前使用的Service Worker导致问题,但不清楚具体原因。
当前使用的Service Worker完整代码
const _ = { domain: 'https://matchflix.ch/', name: 'matchflix' }, cachable = [_.domain, 'https://fonts.googleapis.com/', 'https://ajax.googleapis.com/'], log = 'ServiceWorker 1.1' ; self.addEventListener('fetch', event => { if(event.request.method !== 'GET') return; if(!event.request.referrer.startsWith(_.domain)) return; if(!cachable.some(url => event.request.url.startsWith(url))) return; function versionedURL(request){ switch(request.destination){ case 'image': case 'script': case 'style': let version = self.serviceWorker.scriptURL.split('?')[1] ; return new Request(request.url + '?' + version); default: return request; } } let internal = event.request.url.startsWith(_.domain), request = internal ? versionedURL(event.request) : event.request ; event.respondWith(caches.open(_.name) .then(cache => fetch(request) .then(response => { console.debug(log, 'Caching', internal, response, request); if(internal) cache.put(request, response.clone()); return response; }) .catch(() => cache.match(request)) ) ); });
谷歌检测下的网站显示效果

已尝试的操作
- 注释掉Service Worker的注册,但问题未改善;
- 在测试页面看到脚本和样式表加载出现未知错误,但无更多详细信息。
内容的提问来源于stack exchange,提问作者Simon Ferndriger
相关产品推荐
相关产品推荐

