WaveMaker Docs

WaveMaker Docs

  • Get started
  • Widgets
  • Mobile
  • How-to
  • Enterprise
  • Releases
  • Blog
  • Sign-in

›Page Configure

Getting started

  • Introduction
  • Walkthrough

Pages

  • Pages Overview
  • Creating a Page
  • Layout and Styles

    • Page Layout
    • Templates
    • Themes
    • Accessibility

    Page Configure

    • Page Artefacts
    • Page Cache
    • Partial Page
    • Page Parameters
    • Examples

    Page Actions

    • Navigation
    • Events

    Custom Development

    • Theme Editor
    • Manual Theme
    • Create Template

SSPA

  • Micro Frontend App

Databases

  • Database Services Overview
  • Database Tools
  • Database Designing

    • Working with Databases
    • Data Modelling
    • DataBase Schema Modes
    • Working with DB Schema
    • Database Views
    • Temporal Support

    Accessing Database

    • Accessing Database

    Queries and Procedures

    • Working with Queries
    • Working with Stored Procedures
    • Version Queries & Procedures
    • Blob Queries and Procedures
    • Queries & Procedures - Java Services

    Database Variables & API

    • Database CRUD
    • CRUD Event Listeners
    • Database APIs
    • Database Service APIs

REST & SOAP

  • Web Services Overview
  • Restful

    • REST Services
    • Secure Server-side Properties
    • REST Request Timeouts
    • REST Services using OAuth 2.0

    SOAP

    • Working with SOAP Services
    • Imported SOAP APIs

    Websocket

    • Working with WebSockets

    APIs

    • API Designer
    • Mocking APIs
    • Mocking REST API
    • Swagger Import

    Variables

    • CRUD Variable
    • Service Variable
    • WebSocket Variable

Java Services

  • Java Service
  • Java Services

    • Java Integration Services
    • DB Service Integration
    • API Composition
    • Variables for Invocation
    • Generated REST APIs (API Designer)

    Java Services Variables & API

    • Variable for Java Service
    • Java Service APIs

    Source Files

    • Resources and Third-party Libraries
    • Using 3rd party JavaScript files
    • Using 3rd party jar files

Variables & Actions

    Variables

    • Variables Overview
    • Model Variable
    • Device Variables

    Binding

    • Variable Binding
    • Custom Formatter

    Actions

    • Actions
    • Navigation Action
    • Login Action
    • Logout Action
    • Timer Action
    • Notification Action

    Events

    • Events
    • JavaScript Access

Security

    App Security

    • Overview
    • Authentication
    • Authorization
    • Access Levels & Permissions
    • Login Configuration
    • Session Persistence
    • SSL Encryption
    • XSS antisamy policy configuration
    • OWASP
    • XSS Prevention
    • Central Authentication System
    • Token Based Authentication
    • SAML Integration
    • Secure Connection for Deployed Apps
    • Concurrent Sessions
    • HostHeader Injection

    Security Variable and API

    • Security Variables
    • Remember Me
    • Variable for Security Service
    • Security Service APIs

Developer options

  • Test and Run (Preview) Apps
  • Chrome Extension: Devtool
  • Debugging
  • Inspection Framework
  • Build Options
  • WaveMaker Mobile Apps Automation
  • Developer Integration

    • Project User Management
    • Developer Collaboration
    • Extending the Application using IDEs
    • Import, Export & Update Apps
    • Project Shells

    Add-ons

    • Localization
    • Artifacts Repository

Deployment

  • Overview
  • Deployment Profile
  • One-click Deployment
  • WaveMaker CI/CD Pipeline

    • Overview
    • Configuration Profiles
    • Configuration Management
    • Pipelines and Phases

    Pipeline Configuration

    • Default Pipelines in WMO
    • Configure Pipeline in WME

    Deploy to Cloud Providers

    • AWS
    • Azure
    • Google Cloud
    • DigitalOcean

    Pipeline Configuration cont.

    • Phase configurations
    • Webhooks Integration
    • Tests Integration

    Manage Deployed Apps

    • Manage Deployed Apps

    Integrate with your CI/CD Providers

    • Push Code to External repo
    • Custom VCS Integration
    • Export WaveMaker Application
    • Building Project with Maven
    • Build with Docker
    • Jenkins Integration
    • Deploy using Docker Compose
    • Deployment to Heroku

    WaveMaker apps Interation with CDN

    • App Integration with AWS CDN
    • App Integration with Azure CDN

    Deployment to external web servers

    • Application Server Overview
    • Deploy to Tomcat
    • WebSphere
    • JBoss - WildFly
    • WebLogic Server

Connectors

  • Introduction
  • Architecture
  • Import Connectors
  • List of Connectors
  • Build a New Connector

Teams

  • Overview
  • Team Setup
  • Dashboard
  • Manage Users
  • Manage Projects
  • Manage Prefabs
  • Project Branches
  • Manage Roles
  • Code Repository
  • Import VCS Project
  • Team Profile
  • Manage Subscription
  • FAQs
Edit

Page Cache


When the user navigates away from a page, the page usually gets destroyed. Instead of destroying the page, if the page instance is stored in Cache, then the page instance can be used when the user revisits the same URL. This will make page rendering instantaneous in case of revisits.

In the 10.6.0 release, WaveMaker implemented this strategy and introduced a new property called Cache at the page level. By default, the Cache property is disabled. Below, the Cache feature is explained in detail with a use case.

Usecase

Let's take the case where an app has two pages:

  1. Page1
  2. Page2

For example, Cache is enabled on Page1, and Cache is disabled on Page2. As the user navigates in the app, states of page instances are depicted in the following table.

Labels

Initialized: a new page instance is created.
Attached: a page instance is taken out from Cache and attached to dom.
Detached: a page instance is removed from DOM and is stored in the Cache for future use.
Destroyed: a page instance is destroyed completely.
Page1 - n: nth instance of page1.
Page2 - n: nth instance of page2.

StepUser navigated toInitializedAttachedDetachedDestroyed
1#/Page1?param=value1Page1 - 1
2#/Page2Page2 - 1Page1 - 1
3#/Page1?param=value2Page1 - 2Page2 - 1
4#/Page2Page2 - 2Page1 - 2
5#/Page1?param=value1Page1 - 1Page2 - 2
6#/Page1?param=value2Page1 - 2Page1 - 1
  • In Cache, a page instance is mapped against the page name and its parameters (the order of parameters is not considered). As param value is changed in steps 1 and 2, two different instances of the same page are created.
  • As the user moves from Page1, Page1 instances are added to the Cache (see steps 2, 4, 6). When the user comes back to the same Page1 URL, the cached page1 instance corresponding to the URL is rendered (see steps 5, 6).
  • As Cache is disabled on Page2, Page2 instances are destroyed when the user navigates from the Page2 (see steps 3, 5).

Page Instance Lifecycle

marked in red

How to Enable Cache

  1. Open the page in Design mode.
  2. Select the page element. the page element can be selected by pressing 'ESC' button or from Page Structure, or from the bread crumb at the bottom of the WYSWYG editor.
  3. Cache flag is shown in the properties panel on the right side.

marked in red

Events

Two events including On Attach and On Detach are added. The On Attach event gets triggered when a page instance is retrieved from Cache and added to the DOM tree. The On Detach event gets triggered when a page instance is removed from DOM and added to the Cache.

In Studio, these events are visible on the page level, only if Cache is enabled. In case of partial or prefab, these events are always visible.

note

onPageReady is triggered only when a page instance is initialized. On Destroy is triggered when the page instance gets destroyed. The same applies to Partial and Prefab.

Data refresh

A cached page may have data that needs to be refreshed. You can use the following options to refresh data.

  1. A property Refresh data on attach is added at the page level. If this flag is true, and the cached page instance is shown, then all start-up variables that have enabled load data on page startup of the page are invoked. If there are partials and prefabs in a page, then startup variables of partials and prefabs are also invoked. By default, this flag is set to true.

  2. You can use On Attach event to refresh data by invoking the required variables.

Cache Characteristics

  1. A page instance is stored in the cache for a maximum of 30 minutes. Age of page instance is reset to zero after each revisit.
  2. Cache can store a maximum of 10-page instances. When the Cache is full and a new instance is added, then the page instance of the longest age is removed.
  3. When the user logs out, or session expires, all cached page instances are destroyed.

Recommended Usage

As page instances are stored in memory, the memory usage of the app increases. Eventually, the app may not respond and may crash. So, there is a limit of 10 (which can be changed in the future) page instances to store in Cache. So, you should enable cache, only on those pages that their app user frequently revisits. After enabling Cache, you should check about data getting refreshed on revisit. If required, make appropriate changes as explained in the Data Refresh section.

Last updated on 12/2/2020 by Swetha Kundaram
← Page ArtefactsPartial Page →
  • Usecase
    • Labels
  • Page Instance Lifecycle
  • How to Enable Cache
  • Events
  • Data refresh
  • Cache Characteristics
  • Recommended Usage
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2023 WaveMaker, Inc. All rights reserved.