时间戳

首页 > 解决方案 > Chrome 移动渐进式网络应用在离线时返回错误

android - Chrome 移动渐进式网络应用在离线时返回错误

问题描述

我正在尝试为我的个人网站创建一个渐进式网络应用程序。PWA 能够在离线时访问缓存（通过服务工作者），在 Chrome 桌面、Firefox 或 Firefox 移动设备上没有问题。当我尝试在离线时在 Chrome Mobile 上打开相同的 PWA 时，我收到错误“无法连接到该站点”。如果我在关闭网络（PWA 打开）后尝试重新加载 PWA，它可以在 Chrome 桌面、Firefox 和 Firefox 移动设备上使用缓存，但在 Chrome 移动设备上我收到错误“ERR_FAILED”。

我查看了不同的问题，并尝试了答案和评论所说的尝试。但是我的 PWA 现在继续在 Chrome Mobile 上离线工作。我还尝试将“start_url”设置为“”，因为https://developers.google.com/web/fundamentals/web-app-manifest/表示“start_url 相对于范围属性中定义的路径”，但这样做会将起始页设置为清单。将“start_url”设置为“/”会删除安装应用程序的弹出窗口。我也尝试将“/”和“”添加到 FILES_TO_CACHE 数组中，但仍然出现错误。

清单.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);
            });
        })
    );
});

标签： androidgoogle-chromeservice-workerprogressive-web-appsmobile-chrome

解决方案

当我使用 start_url 时，它可以在我的笔记本电脑上运行，但不能在手机上运行：'/abcd/'

使用 start_url: '.' 解决了我的问题

推荐阅读