Chrome mobile progressive web app returns error when offline

Question

I'm trying to create a progressive web app for a personal website of mine. The PWA is able to access the cache (through the service worker) when offline no problem when on Chrome Desktop, Firefox or Firefox mobile. When I try opening the same PWA on Chrome Mobile when offline I get the error "Can't connect to the site". If I try to reload the PWA after I turned off the network (with the PWA open) it is able to use the cache on Chrome Desktop, Firefox and Firefox mobile but on Chrome Mobile I get the error "ERR_FAILED".

I've looked through different questions and tried what the answers and comments say to try. But my PWA continues to now work offline on Chrome Mobile. I've also tried setting the "start_url" to "" as https://developers.google.com/web/fundamentals/web-app-manifest/ says "The start_url is relative to the path defined in the scope attribute", but doing so sets the start page to the manifest. Setting the "start_url" to "/" removes the popup to install the app. I've also tried adding "/" and "" to the FILES_TO_CACHE array, but I still get the error.

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);
            });
        })
    );
});

The Chrome Lighthouse tool gives no PWA errors when testing with your HTTPS URL? — Mathias
@Mathias The Lighthouse tool showed 3 unrelated errors, they were that I needed to add a short_name, add a apple-touch-icon, and to add <meta name="theme-color" value="COLOR">. I've fixed the errors and now it validates with no errors, but the issue still persists. — Brandon
I have the same issue with my PWA currently which can be found at quakeviz.app ... hope someone can help. — Michael Paccione
I'm using Workbox now and it works as expected. But I'd still really like to do it without Workbox. — Brandon

Lakshay 0173 Lakshay 0173 · Accepted Answer · 2021-09-23T08:38:51

It worked on my Laptop but not on phone when I used start_url : '/abcd/'

Using start_url: '.' solved my issue

Chrome mobile progressive web app returns error when offline

1 Answers