tmssoftware.com

Questions about implementing PWA offline startup

WEB TMS WEB Core
#1

I'm developing a PWA that should run (after installation to the home screen) whether or not the host device has an internet connection and whether or not the remote server is online. It seems that the default ServiceWorker.js caches app pages such that they continue to work if the internet connection goes away or the server goes down, but they are not available when the installed app is launched without the server/internet available. Is that the expected behavior or have I missed some setting?

If it is expected, is there a simple way to get the offline behavior that I want or do I need to employ something like the approach described here?

#2

The default config should work to start the app from the home screen without an internet connection. The cached files should remain installed after the first fetch. These cached files are only updated when newer versions of these files are found online.
If you see somehow a different behavior, can you please give more details.

#3

I have installed the app to my Android phone's homescreen from Firefox and Chrome. If I open the app while the server is online and with the phone's WiFi enabled, I get its normal display (in Firefox):

image
image870×1931 227 KB

This display reappears even with the server offline if I have simply exited to the home screen (leaving the app in background) and then go back to it either via the background carousel or the home screen icon again. However, if I remove the app from the background by swiping it from the carousel and then click on the home screen icon I see the following (in Firefox):
image
image870×1931 121 KB

(in Chrome):
image
image870×1931 135 KB

Should I not indeed see the normal display instead in this circumstance?

#4

@brunofierens if this was not the detail you needed, what additional information would clarify the issue?

#5

I'm travelling for a Delphi conference, so my time is limited.

I retested this and it works fine and expected on a mobile device;
On Chrome desktop, I could see an error here:

image
image880×84 15.4 KB

so, apparently, there is something new in the desktop browser it is picky about.
I found no clear answers / solutions yet to what must change to make the browser accept the serviceworker.

I'll research further upon return from travel.

#6

Any news on this front?

#7

We found a solution.
Try to add in your project main HTML file:

<script type="text/javascript" src="serviceworker.js"></script>

In the next update, this will be automatically added when a new PWA project is created.

#8

Thanks, I'll give this a try and report back.

#9

I must be doing something wrong when adding the new <script> line, because after adding it I see this new console error message:

Uncaught SyntaxError: Unexpected token '<' serviceworker.js:1

The error does not appear when running with the IDE in TMS Webserver but it shows up when running the compiled code in my app's "Tiny server". Below is my index.html file. I added the new line just after the one I found had been added for Bootstrap. Do I need to put the new line somewhere else or what is the problem?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta $(ThemeColor)/>
    <noscript>Your browser does not support JavaScript!</noscript>
    <link href="IconResMid.png" rel="icon" sizes="256x256"/>
    <link href="IconResMid.png" rel="apple-touch-icon"/>
    <meta $(Manifest)/>
    <title>CW_EPG_Remote</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
    <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="$(ProjectName).js" type="text/javascript"></script>
    <script type="text/javascript" src="serviceworker.js"></script>
    <style>
    </style>
  </head>
  <body>
<meta $(BodyParameters)/>
  </body>
  <script type="text/javascript">rtl.run();</script>
</html>
#10

That error suggests that it is the serviceworker.js file that has the problem. Have a look inside it and see if it is actually a JavaScript service worker, or perhaps it contains something else? Also, be mindful of filename case - should it be ServiceWorker.js instead?

#11

It is the TMS-created file, but you're right it is named ServiceWorker.js. Can that be the problem??

#12

Entirely possible. Should be easy to check?

#13

Easy to check, yes; but not quick, as my Java-bundling partner is away for the weekend and the error only shows up running in his webserver.

However, I'm not optimistic that the filename is really the answer since the file in question is from TMS and the offending <script> text came from TMS too.

#14

I would wager it is, as the error you posted was about an attempt to read the script, which it could not do. Filenames are case-sensitive, so this is the likely culprit. Not sure if it will fix your overall issue, but it should get you to the next step, whatever that happens to be.

Rather unfortunate that you have to incur such a long delay for such a simple thing, however. Is there nothing you can do in your dev environment to test this? It is possible to access the dev web server (the TMS Web Server that runs and hosts your app while testing) from another machine - maybe that is sufficient for this test?

#15

Thanks, I was probably taking the error message too literally, thinking that it would say something like "file not found" if that were the case. But given the other off-the-wall browser error messages I've seen in the console, I can believe that you're right.

I'll see if it will manifest when accessing the TMS server from another PC in the morning.

#16

Do you use TMS WEB Core v2.1.2.0?
We did an improvement in this version. With this new version we rebuild the sample TMS Web Project and this works fine here.

#17

Andrew: You were right about the filename case. When I accessed the TMS Web Server's installation via FireFox in another PC, it said that there was no serviceworker until I changed the line to ServiceWorker.js in index.html. Unfortunately, I can't test the proper action of the "installed" PWA until my Java-bundler returns next week to add the TMS WEB Core stuff to his code.

Bruno: I'm running version 2.1.0.3. I'll install the later version today, thanks. Does it incorporate the script line that you suggested here or do I still need that added manually?

BTW, how do I get regular notices of updated versions? I have seen none except in these replies to support questions.

1 Like
#18
  1. when you start the IDE it should show a message a newer version is available
  2. latest version has the improvements for script line & possible case sensitivity issue
#19

Re. 1: I just started the IDE and watched for a notice, but failed to see it either during the splash stuff or on the Welcome page. Where is the version update message shown?

#20

It is shown when you start a new TMS WEB Core project or reopen an existing one.

© tmssoftware.com