Offline app not displaying CSS properly

Anvil Q&A
1

Hi,

I have an app that displays some Custom HTML pages linked to CSS files. When I take my device offline, it seems to load the pages, however some of the “later” pages do not display properly… as if the CSS files did not load entirely.

Has anyone experienced this behaviour before?

2

Is it one css file per HTML page?
A minimal example or some code would be helpful here.

At the time of writing, if a theme asset has never been loaded, and your app goes offline, then the theme asset has not yet been cached and so won’t be available offline.
If it has been loaded it will be cached, and when your app goes offline a cached version can be used.

3

Yes, exactly… one CSS file per HTML page. I am not sure if posting the source would provide additional help, since it is just standard HTML and references a global CSS file and a page-specific CSS file. (ie, global.css and page1.css)

I think what you said identifies the problem exactly. The theme assets don’t get loaded until there is an open Form that requires it. So potentially it could be solved be using in-line CSS? Though that would be quite messy. But would it then have all of the pages/forms cached together with the CSS, even if they have not been “opened” specifically by the user?

Or is there some other way to have all asset loaded as soon as the app loads?

4

sure - if that’s the case no need to post the css.
I presume you’re just using a standard link tag within the custom html.
Inlining the css will solve the issue since this will get shipped with the form.

There are various ways you could pre fetch these.
Here’s one approach you could add to native libraries.


<script>

function loadStyleSheet(source){
    const link = document.createElement("link");
    link.href = source;
    link.rel = "stylesheet";
    link.type = "text/css";
    document.head.appendChild(link);
}

const styleSheets = ["style-sheet-1.css", "style-sheet-2.css"];

for (const styleSheet of styleSheets) {
    loadStyleSheet("_/theme/" + styleSheet);
}

</script>
5

Ok thanks, I will try it. But what about other associated asset files, like SVGs that are also in “assets” and are linked to from each HTML file? Those would also need to be pre-fetched, or else they will not show up, right?

6

That’s correct, instead of the above approach
You could do the following
I guess be careful not to make too many concurrent requests here


const lazyAssets = ["style-sheet-1.css", "style-sheet-2.css", "my-svg.svg"];
lazyAssets.forEach((asset) => fetch("_/theme/" + asset));

This prefetches the assets, so in the case when you go offline, they’ll be available

We’ll add this to our list

1 Like
7

Hmm, ouch, I have more than 200 HTML and CSS files plus image files.

Worth a shot anyway though… thank you.