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.
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).
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?
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
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 -
Will it install on iPhone?
What are you using to test the PWA? That may well tell me a few things.
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.
I am still not sure if the paths inside the manifest should be relative or absolute.
I am not sure if this '"url": "index.html/manifest.json" is correct in the manifest file
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.
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.
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.
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.
I don't keep images in the root directory
I didn't have this file at all on the site.
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.