Forcing web-based mobile app update (own hosting)

1

I’m struggling with the Android phone (Chrome) recognising an updates to code.js. I’ve worked through all the cache clearing procedures on the phone and at my server. The Volt server seems slightly better at doing this. I’ve seen this question in the past with ‘after several hours’ responses. The only short term fix I found was the hack of renaming ‘code.js’ and then the code.js reference within index.html. Are there any better solutions? Thanks

2

I find that the following works well to update the app:

  1. close the app on the Android phone.
  2. open Chrome Settings and select “History”
  3. Click on “Clear Browsing Data”
  4. Select “Clear Images and Files”
  5. Then click the “Clear Data” button.
    –if you are asked whether you really want to clear the data from your app’s site, say yes.

(The checkbox on “Clear Images and Files” will be remembers, so you only have to this the first time.)

Good luck.

3

I’ve changed web host provider and it is markedly better. My previous host had a lot of problems with the issue but since I changed, much less. Sorry I don’t know what the new host does different other than previous host was Unix but now on windows os server.

My other workaround, albeit not very good, is to rename the project and compile again. Not pretty but if mid project and need to keep testing then it keeps you productive.

4

If I’m not mistaken, @GaryGorsline solved this problem some time ago.

5

I think I found the discussion you are mentioning (thanks) https://discuss.appstudio.dev/t/code-js-not-updating/1775/42

1 Like
6

I thonk this is what you may need.

George added a nice hook for this.

7

In 8.0.1, there is a new event called onPWAReload. You can use that to intercept the default behaviour

This is the call. Documented in the thread i posted.

8

So my philosophy with this random updating was to use the new event. If the app was showing logo screen, allow update. If not because we were processing or at main menu, then add additional menu item to main menu to preform update when user was ready.

9

Thanks I’ll read through as I don’t understand much about PWA.

10

I think what @AlexOZ is asking is how to get the code.js file to update when that file specifically doesn’t update when the pwa updates, when seemingly all other files in the app do.

I don’t think he’s wanting to know when the pwa is updating, as @GaryGorsline has a stylish bit of code to make that look better. Nor trigger an update as location.reload simply reloads the page still failing to refresh/update the code.js file.

The code.js file not updating, I believe, is something to do with server setup, but I have no idea where or what. Or potentially with the browser retaining a cached version of code.js despite clearing cache and deleting the app. This subject has cost me many hours and great frustration. Lately with my server, iOS has be slower to update this file than android or pc.

11

Unfortunately the order of files pwa wants to update is random at best. I know i had this same issue and this code along with setting the server page expiration was important. I use AWS with cloudfront distribution, so there’s two caches with my servrr setup. I’ll review that code again snd see if i see any other settings, etc.

12

Correct. So far only the hack of renaming code.js works offers what I’m seeking. I don’t want users to worry about clearing caches (and losing settings) just for a new update of my app. I nice option would be an automatic naming on code.js based on some version control.

13

I double checked my code. It is as I saiid. I do know that from time to time if I change code.js too fast, that I have to wait a bit for the server caches and chrome cache to catch up. I have the Time to Expire set to 0 seconds with a maximum of 15 seconds, but there is a cache for the web site and yet another at each distribution endpoint (cloudfront) that have to update. Max time should be 30 seconds, but …
Cloudfront has a function to clear the cache, but it’s a pain and doesn’t consider the web site cache, so generally, it’s useless.
I find, when I don’t see the code.js update, that first I make sure I’m in Inspector mode in chrome. I then reload using the button to the left of the web site. Then, I right click that same reload button and select the last option, empty cache and hard reset.
Now that doesn’t always work. So I then open an incognito window and access the site. That should avoid all local cache.
If it’s still not loading, then you need to go to the server as that is where the issue must be, and reduce your time to expire on all of the resources in your project. AWS Time to Expire defaults to one day.
Hope that helps. I don’t remember any other tricks, but changing code.js name is not a good idea for PWA to work.
Also remember that your clients should not have the same sort of issue, as they don’t access your app immediately after it was updated at the server, so caches should settle down within minutes of an update and hopefully not cause any odd issues. Most of the code.js updates that fail, fail big and ugly. Not a great user experience.

14

The biggest problem I’m having is when a user (or me) ‘installs’ the link as an app in Android. Simple uninstall does not seem to clear the settings for a new installation. Do you think that’s simple time as well. I’m turning around new versions in development so probably a bit impatient.

15

I am not an expert, just a suggestion, href.reload()

16

May be only in appstudio version 9 demo

17

What’s the problem with renaming code.js?

18

Here’s my code:

function onPWAReload() {
  localStorage.setItem('Updating', 'true');
  if (SplashOn) {
    SplashTitleSecondary.innerText = 'Downloading Updates';
    location.reload();
    } else {
    UpdateAvailable = true;
    if (TopScreen() == 'Home') {
      BuildMenu(HomeMenu, 'Home');
      };
    };
  };
19

It just occurred to me that an easier way to test your app is to turn off PWA. Then when ready to distribute, turn it back on. That will make your dev cycles go way faster.

20

No real problem with renaming, other than you have to keep track of the new name and change the HTML code to point to the correct code.js. A year from now you may not remember all of that.

I really think if you tried the things in Chrome I suggested and you still get an old copy, you really need to look at the server. The setting you’re probably looking for is TTL or Time To Live.

There is also a header that can be set, but I’ve never had to use it with appstudio apps. Can you tell us what server system you are using?