我正在尝试为我的个人网站创建一个渐进式Web应用程序。在离线状态下,PWA能够(通过服务工作者)访问缓存(在Chrome桌面,Firefox或Firefox移动设备上没有问题)。脱机时尝试在Chrome Mobile上打开相同的PWA时,出现错误“无法连接到站点”。如果我在关闭网络(打开PWA)后尝试重新加载PWA,它可以使用Chrome桌面,Firefox和Firefox Mobile上的缓存,但是在Chrome Mobile上,我会收到错误消息“ ERR_FAILED”。
我浏览了不同的问题,并尝试了答案和评论说要尝试的内容。但是我的PWA现在仍然可以在Chrome Mobile上离线使用。我还尝试将“ start_url”设置为“”,因为https://developers.google.com/web/fundamentals/web-app-manifest/表示“ start_url相对于scope属性中定义的路径”,但是这样做会将起始页面设置为清单。将“ start_url”设置为“ /”将删除弹出窗口以安装该应用程序。我也尝试过将“ /”和“”添加到FILES_TO_CACHE数组,但是仍然出现错误。
Manifest.json:
{
"name": "Webnote",
"short_name": "Webnote",
"icons": [
{
"src": "/webnote/webnote192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/webnote/webnote512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/webnote/",
"background_color": "#0217B3",
"display": "standalone",
"scope": "/webnote/",
"theme_color": "#333333"
}
sw.js:
var CACHE_NAME = 'webnote-app-cache';
var FILES_TO_CACHE = [
'/webnote/'
];
self.addEventListener('install', function(event){
event.waitUntil(
caches.open(CACHE_NAME).then(function(cache) {
return cache.addAll(FILES_TO_CACHE);
})
);
self.skipWaiting();
});
self.addEventListener('fetch', function(event){
if (event.request.mode !== 'navigate') {
return;
}
event.respondWith(
fetch(event.request).catch(function(){
return caches.open(CACHE_NAME).then(function(cache){
return cache.match(event.request);
});
})
);
});