How to preload pages?

Questions
1

When a new page is loaded, it does a fetch request to get the new page. When the app is used in local environnement, it is loaded instantly which gives a very smooth feeling. But when the app is online, it will take 100-200ms (even with very fast internet) to load the page before triggering the page transition to the new page, which kinda ruins the fast and smooth feeling of the app (You can experience it on the F7 demo as well). When you then try to go back and open the same page again, it is instant and smooth cause the page is already cached.

I was wondering if there is any way to preload and cache all the pages of routes[] at the first initialization, so then the navigation stays always smooth and fast ?

Edit: I first tried to make a fetch request on all my pages after the app initialization, and let the browser cache them. But F7 still making a new fetch request when you load a page for the first time, and doesn’t use the pages cached by the browser. After taking a closer look, I noticed that when you open a page, F7 cache it in an array in app.router.cache.xhr.

So I’ve come with a homemade solution :

function preloadPages() {
  let pages = [
    "pages/page-1.html",
    "pages/page-2.html",
    // All my pages
  ];

  for (var i = 0; i < pages.length; i++) {
    (function (pageIndex) {
      fetch(pages[pageIndex])
        .then(function (response) {
          return response.text();
        })
        .then(function (content) {
          let xhrEntry = {
            url: pages[pageIndex],
            time: Date.now(),
            content: content,
          };
          app.router.cache.xhr.push(xhrEntry);
        })
        .catch(function (error) {
          console.error(error);
        });
    })(i);
  }
}

preloadPages();

This fetch all the pages and cache them in app.router.cache.xhr, so everytime the user load/open a new page, there is no delay at all, and the feeling is very smooth as if it was in a local environnement.

I wonder if I’ve missed a built-in solution? If not I think it should be added as an option in the core, this makes a HUGE difference in my opinion!

2

I’d you don’t have to many pages it is better to include all page components to the app main script, e.g. this what F7 CLI offers with view bundler. Otherwise you need to use PWA technique for caching with service workers

3

For the main pages of my application, I do exactly what @nolimits4web mentioned before… I load then as so they are instantaneously loaded when App is open!

For pages that requires XHR/fetch data, I use a loading flag that meanwhile the request is getting processed, user can already sees the open animation + skeleton load ! In best cases it takes no longer then 200ms as you said, and loads are afterwards replace with real content !!