Preload, wait, and loadPage with no physical interaction with page

[cr08]

Long story made short: Current project I'm working on I have basically a 'kiosk' application with remote control via a JS EventSource setup. As of right now just doing the loadPage aspect I can get it to work well and very reliably getting that control signal from ES and calling loadPage to load a new page via Swup.

What I'm trying to add onto this is when one of these calls comes in, I want it to wait and preload/cache the new page first and then do the loadPage once the preload is complete.

My JS knowledge is fairly lacking and I've been hacking most of this together as I go along. Here's the core section of the script I'm working with in the latest iteration/attempt to get this working:

                    <script type="text/javascript" language="javascript">
let currentTimestamp = Date.now();
var pageTime;
pageTime = Math.floor(currentTimestamp/1000);

if(typeof(EventSource) !== "undefined") {
    var source=new EventSource("{% settings_value "SSE_BASE_URL" %}sse.php");
    source.onmessage = function(event) {
        var msg = $.parseJSON(event.data);
    
    document.addEventListener('swup:pagePreloaded', function(){
            console.log("OBS_PUSH: Page Preloaded, loading new page...")
            swup.loadPage({url: "/card_overlay/" + msg.card + "/"});
    });

	if(msg.timestamp > pageTime) {

		if(msg.card == "XYZ-1234") {

            console.log("OBS_PUSH: Preloading new card page...");
            swup.preloadPage("/card_overlay/" + msg.card + "/");

            // console.log("OBS_PUSH: Push data new. Pushing to card back/blank slate.");
			// swup.loadPage({url: "/card_overlay_start/"});

		} else {

            console.log("OBS_PUSH: Preloading new card page...");
            swup.preloadPage("/card_overlay/" + msg.card + "/");
            
		}
		pageTime = msg.timestamp;
		console.log("OBS_PUSH: pageTime updated");

	} else {
		console.log("OBS_PUSH: Push data old. We're staying here.");
    }
}
} else {
    alert("Sorry, your browser does not support server-sent events.");
}

</script>

I've also made sure to turn 'on' the pagePreloaded event in my main swup script:

const swup = new Swup({
	debugMode: true,
	plugins: [new SwupPreloadPlugin()]
});

swup.on('pagePreloaded', () => console.log('pagePreloaded'));

What I've noticed in testing and watching the console is upon receiving the remote command, it seems to fly through the preloading messages I've added in above. I'll get pagePreloaded and OBS_PUSH: Preloading new card page... side by side and then at the same exact time with no visible delay I get OBS_PUSH: Page Preloaded, loading new page... and the new page loads straight away, often with assets not loaded in yet after the transition has completed which I want to try and avoid with this.

If it helps, the following link is the active repo I'm working with and the file where this is taking place in, though it doesn't have the current code above. It's a Django based project and all of this is happening within the HTML templates and associated static JS/CSS assets. All pages being loaded are 'dynamic' through the Django platform but each page has its own unique URL.

https://github.com/cr08/fowsim/blob/main/cardDatabase/templates/cardDatabase/html/view_card_overlay.html

I've been messing with this off and on the past few months and tried different attempts and options, including doing a dumb times delay between preload and loading in the page that didn't seem to work reliably either. So I'm at a loss and checking in here. I've also come up empty finding any similar examples to this that I can learn from.

[daun]

What's the advantage of preloading the page before actually loading it? Shouldn't it be just as fast by loading without preloading first? It's the same request.

[cr08]

The problem is that if I just load the page straight away, it'll go through the transition without all the image assets of the new page being loaded. It looks really jank and this is even on the same network doing this test, not even counting over WAN connections yet. So I want to ensure that it is able to load the assets from the new page (in general this is just a single PNG image coming in just under 1MB a piece) before it starts the transition.

[daun]

I see. You could probably solve that problem by using a different combination of html element classes for hiding the current page: not the suggested html.is-animating but some of the other ones.

[daun]

However: preloading a page will only load the HTML, it will not load any assets. So the PNG you mentioned would not be part of that. There currently isn't a solution to that built into swup (or any other page transition library that I know of). Unless of course you're doing that manually in your code?

[cr08]

However: preloading a page will only load the HTML, it will not load any assets. So the PNG you mentioned would not be part of that. There currently isn't a solution to that built into swup (or any other page transition library that I know of). Unless of course you're doing that manually in your code?

Good to know! That was basically the original intent/hope was to use Swup/Preload directly to cache these images so that's probably where I've been banging my head against the wall this entire time. lol.

So with that said, no I do not have anything doing this currently. But that does help lead me down a new train of thought to try and hopefully resolve it. My current back-of-napkin idea is to have my EventSource code start by loading in the upcoming card image hidden on the current page (I can easily make the current page aware of the image URL that's coming up) and use the onload event to trigger the loadPage call. If that works as I'm hoping, that should be the last piece of this puzzle.