Customizing the Web App

So, I have been trying to learn about PWA options like including a manifest to allow the user to be prompted to install the app, and triggering setting long-lived caches for the HTML files loaded. I’m still learning about how to do those things, and perhaps they could be feature requests for SAB.

However, I want to understand also if there is a way for me to hook into to the HTML template for the PWA. For example, if I needed to load a script to do some of the above work, is there a way to for me to do that? From a quick scan, I see that we are allowed to enter some HTML into the footer. Can I add my own javascript file there as well? If I wanted to put a button for installing a PWA into a browser, it might not fit very well into the footer. Is there a way to change some kind of base template for the HTML export? Or is this all outside the scope of what can happen with SAB?

Thanks!

If your server is set up correctly for PWAs then a SAB generated PWA will ask if you want to install it on the desktop. You should not need to add any extra code.

The PWA generated by Scripture App Builder utilizes the Workbox library to add Javascript to handle the prompting and caching.

it runs workbox generateSW workbox-config.js to generate all the needed Javascript.

You are welcome to look at that configuration and look at the documentation for the library and recommend changes. We can chat about it.

That is great to hear! Can you point me to anything about requirements for server configuration? I did an export and put it on a webserver, but I don’t get get a prompt to install it as an app on desktop or mobile.

Your web server has to serve all of the PWA content via HTTPS (that is a requirement for PWA). If it is not working, you could use the Chrome Developer Tools to see if there are any requests via HTTP (or if there are any errors).

Here is an example of an PWA that is working as expected.
Malayalam Bible

When viewing from Google Chrome on the desktop, you will see an icon in the address bar to offer to install.

image

When viewing from Google Chrome on Android, you will eventually (I think you have to be using the app for a while) see a banner at the bottom.

Chris

Chris,

thanks for the link to the working example. comparing the HTML there to the one I generated helped me see that I had missed something in generating the HTML – specifically the Export HTML settings page.

I went back and exported again, this time I got a manifest file for the PWA.

Now I can see all the HTML files have been cached (very cool!) put I still never got a prompt to install, as I did on the Malayalam site you sent. Any suggestions?

I checked in a half hour later and had an install button available. Interesting.

Thanks for the help!

Here is a page that talks about install criteria that Chrome uses before it will fire the beforeinstallprompt event which triggers the install prompt. One of these criteria is “meets a user engagement heuristic” which is pretty vague.

This issue is that users were getting annoyed that the app would prompt to install immediately after opening and users would get used to just cancelling that prompt and not actually reading it. If there is a certain amount of user engagement and then there is the prompt for install, then it is more likely that the user will actually read the prompt and choose to install it.

Chris

Okay, that makes sense. Thanks Chris! Really nice that feature is built in.