CODEWITHSUNDEEP
javascriptjqueryhtmlcsshtml-framework-7
Gianluca Ghettini
Gianluca Ghettini

Reputation: 11648

Framework7 and Single Page Application: preload all pages

I'm using Framework7 to build a web application.

https://framework7.io/

I know Framework7 provides routing APIs to navigate through the HTML pages.

https://framework7.io/docs/view.html#router-api-methods-properties

As far as I know the pages are loaded on the fly via AJAX requests. Is it possible to preload all of them and not having any AJAX request after that? I'd like to build a single page application (SPA) in which all the data (HTML pages, CSS and JavaScript code) is loaded at startup

Upvotes: 1

Views: 728

Answers (1)

Anees Hikmat Abu Hmiad
Anees Hikmat Abu Hmiad

Reputation: 3560

I think theirs no direct solution to do it like your question, since every route will trigger requests when you visit it, but you can try to fix your issue by doing this trick:

  1. Declare global or helper js file.
  2. after declare it, create method/methods inside it which it most be trigger when you visit route, and save the result in global variable (ex: aboutUsDataCache) which can access it in route.
  3. replace all ajax request routes action to method which created for it.
  4. add condition to check if aboutUsDataCache is empty or not, if not empty thats mean we trigger request and has data and we are in SPA, so that we dont to access method again.

Example from real project: I have main-config.js which is load before routes and has this code:

module.exports.tmpAppCache = {
    fullCadaverList: false,
    fullImagesList: false,
    fullVideosList: false,
    fullPdfList: false,
};

and I have ajax-helper.js file which its loaded before routes too and have methods like this:

export function getFullPdfList() {
 // Your ajax request here
}

in routes has this code:

  {
    path: '/pdf/',
    async: function (routeTo, routeFrom, resolve, reject) {
      if(globalObject.tmpAppCache.fullPdfList !== false){
        resolve(
            {
              component: pdfPage,
            },
            {
              context: {
                data: globalObject.tmpAppCache.fullPdfList
              }
            }
        );
      }else{ getFullPdfList()
                  }
    },
  },

This example from real project, I try to remove all unwanted code to be something clear so that theres some note:

  1. This example usage WebPack, so that you see import and export some time..
  2. I remove promise from functions to make code example is clear.
  3. since you need to trigger all request at start, you need to call all methods in index route, so that when you go to any page like our example you will see data is cached and request will not trigger.

Good luck

Upvotes: 1

Related Questions