Anvil Community Forum

Making an Anvil app into a Progressive Web App

Hello,
In order to turn my Anvil app into a PWA I need a service-worker(js) and a manifest(json). I have noticed through a lighthouse check my anvil app already has a manifest, but not the correct icons nor does it have a short-name. Is there any way to correct the manifest and add a service worker? More about Progressive Web Apps here:
Progressive Web Apps
Thank you in advance.
(edit) This forum is a Progressive Web App.

3 Likes

Hi @astleoduko,

We are looking to convert our app into a progressive web app as well. So any help from the community in that direction would be very much appreciated!

Greetings from Austria.

2 Likes

Some related topics you may or may not have seen:

I would be interested in how you can embed an Anvil app in a Progressive Web App container, if you are willing to share.

1 Like

This is also of key interest to me since it would open up a world of functionality. I have started to investigate and come up with the same initial issues. This clip from the Lighthouse audit on an example project shows these:

I cannot find a way to access the manifest.json file to edit this and my html / JS knowledge is less than zero. @stucork do you know of a way of manipulating this to add the missing entries other than through Developer tools? I suspect this is something compiled when Anvil creates the app?

Edit: Follow up question… is the image path and image “type” ok to use “\/” (again apologies for lack of JS knowledge. The reason I ask is that Lighthouse flags that “Downloaded icon was empty or corrupted”.
Code snip from manifest.json through developer tools:

        {
            "src": "\/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "density": "4.0"
        }
2 Likes

Hello,
The current method i am trying to undertake isn’t working. Is it possible to edit the manifest.json and service-worker.js by downloading the app as a git repository?

1 Like

I don’t believe so, no. Well, all I know is that those files do not appear in the repository.

Ok thanks for clearing that, I am trying a new method (again) - uploading a new service-worker and manifest in the assets area and then referrring to those in the native libraries are. One problem - is there anyway to know the path for where the assets are stored or is it a ‘\/file_name.js’ path file name?. I am a beginner JS programmer.

1 Like

Does this help: Asset file URL ?

2 Likes

This is very helpful for me @p.colbert Thank you.

@astleoduko I would be keen to hear how you go with this!!

1 Like

It does indeed! Thank you all for help on this topic!

1 Like

I am open to any other ideas that anyone else might have

Hi @astleoduko @rickhurlbatt @p.colbert @hugetim,

I’ve tried to change the manifest dynamically using this approach:
https://medium.com/@alshakero/how-to-setup-your-web-app-manifest-dynamically-using-javascript-f7fbee899a61

With the following code:
https://anvil.works/build#clone:FXFRU4BTFZWVDW4C=I5AAJEB3XBN65TIC2SMO476O

Unfortunatelly the manifest stayed the same no matter what.
Still maybe someone can add on that approach😁

Greetings Mark

1 Like

Is there anyway we could do this using Custom HTML option in the design page then using that Custom HTML component in the main form, before the code runs the other manifest?

I did attempt this but as @mark.breuss found out the manifest does not update. My failure could just be my HTML ability though.

I have just seen a slight change that is either a) new or b) I didn’t notice before.
The Anvil Forum page now meets some of the installability requirements.
Inspecting it shows that there is a short_name.

Is this a hint of things to come?

Also - this now means you can install the forum as an app through chrome (install icon at the right side of the address bar).

2 Likes

Hello All,
I just went to check on my app after the summer and all of a sudden it worked! I was able to install my website as a PWA! The Anvil Team must have done it themselves because it works for every single one of my anvil apps :slight_smile:. Thank you all for all your continued support!

1 Like

Yep, this was announced just recently: :grinning: