PWA not running offline

[Rohit_Nz (Gupta Rohit)]

The PWA I wrote 2 years ago still runs fine offline. A simple one I wrote with current Delphi and Webcore also works fine. So, I wrote a new demo for my client. This one just shows a blank page when offline. There are no errors shown.

Any tips for hunting down what the cause could be. The only external references are to a css file and logos, both of which are referenced in the html files.

[brunofierens]

Do you see any error in the browser console?
Did it had the chance to cache at least the first time?

[Rohit_Nz (Gupta Rohit)]

Yes It was cached, I tried several times on multiple phones. I even ran through all the screens, while online. Then closed the browser, turned wifi and data off and clicked the icon on the homepage.

Therefore, I have no access to the browser (or its console).

[Rohit_Nz (Gupta Rohit)]

I started with a fresh project and added the forms I needed without anything else. So I could pinpoint when it started going wrong.

The PWA works fine online on the three phones.

1. Samsung S20 running Android 13
2. Samsung S24 running Android 14
3. iPhone 11 iOS 17.4.1

Issues

1. Auto-updating is not reliable. Perhaps the code is too similar to the previous one.
2. Working offline does not work on the iPhone 11, perhaps because the Save to Home menu appears to be saving a shortcut, not installing the PWA.

How do I fix this? Is a newer iPhone required perhaps.

[Rohit_Nz (Gupta Rohit)]

After more testing, offline mode is not working on S22, S24 and one other phone (I am waiting to get the phone details). In all cases (except the iPhone) they did use the install option.

When it doesn't work, they are getting a blank screen.

How do I look at possible errors to determine why?

[AndrewSimard]

I wrote a blog post about PWA's some time ago. The last sections are related to updating PWAs. I don't know if anything has changed since then, but it might be worth a look if you're interested. TMS Software | Blog

[brunofierens]

Did you check OS versions / browser versions?

[Rohit_Nz (Gupta Rohit)]

Hi Andrew and Bruno,

Frankly I am having many problems. Just when I think I have nailed the reason down, it shifts. I have quoted a project based on PWA, so I am trying to get something working well, before I accept a deposit from the client. Some questions and observations -

1. Will it install on iPhone?
2. What are you using to test the PWA? That may well tell me a few things.
3. Trying 4 browsers on Android S20 and S24, sometimes the install menu is visible, other times it isn't. Originally the manifest file was mangled, but that is fixed.
4. I am still not sure if the paths inside the manifest should be relative or absolute.
5. I am not sure if this '"url": "index.html/manifest.json" is correct in the manifest file
6. Once installed, it wont always run offline. It just shows a blank screen. My assumption is that its referring to something external. If it runs once offline, it always runs offline.
7. To debug, I installed on Windows, so I could use the browser developer tools. Once I saw that it was loading the favicon.ico of the master website and failing (as it was offline). That icon is not in the any of the htmls, or manifest. So, I guess its the browser doing it. The crazy thing is that even on the main site I dont refer to favicon.ico (in html or otherwise), but its present. on the site.

[brunofierens]

We test it on iOS (iPhone + iPad) and on Android (Samsung smartphone & tablet)
I'm not sure where you get this URL "index.html/manifest.json" from. It seems incorrect.
If you get a blank screen, I can only assume that the caching did not work properly. The serviceworker.js should take care of the file caching. Inspect that the filelist is what you expect, i.e. something like:

var CACHED_URLS = [
  "index.html",
  "digital%20regular.ttf",
  "PWACalculator.js",
  "UPWACalc.html"
  ];

The app's icon is specified in the manifest and handled this way, i.e. outside the caching of the serviceworker.

[Rohit_Nz (Gupta Rohit)]

Hi Bruno, thanks for assisting. I have finally discovered the issue.

The first thing the PWA does (I have tried two of them) is to download a favicon.ico file from the websites root directory.

1. I don't keep images in the root directory
2. I didn't have this file at all on the site.
3. I was not accessing this file anywhere in the js, html or manifest.

I have now simply placed a favicon.ico on the root directory of the website (not even the PWA). Now it runs fine, offline on 3 Androids, and 2 iPhones. Reliably, everytime.