aura storable actions not working as expected - client cache

Question

I am trying to use storable actions. I am not getting expected results. As per the video from salesforce ,https://www.youtube.com/watch?v=G931jWBnxHU&t=758s, if a method is marked as storable, the first request after refreshAge period is supposed to get the data from cache , followed up by sending a server request, and if the server response is different from what is there in the cache, it is supposed to update the component and cache. I set defaultAutoRefreshInterval as 3 seconds and defaultExpiration as 900 seconds. During my action, I was expecting a server call when I did a UI action after 5 seconds. But the server debug logs, did not receive request from client. But when I repeat the action second time , the request goes to the server consistently . I am not sure if anyone has observed this behaviour. Thanks for your time and help.

code below

<aura:component description="formTemplate" isTemplate="true" extends="aura:template">
<aura:set attribute="auraPreInitBlock">
    <auraStorage:init name="actions"
                      persistent="false"
                      secure="true"
                      maxSize="1024"
                      defaultExpiration="900"
                      defaultAutoRefreshInterval="0" />
</aura:set>

Service component

<aura:component description="Form_FormInitService" controller="Form_HomePageController">
<aura:method name="getFormInitData" action="{!c.getFormInitData}">
    <aura:attribute name="callback" type="function"/>
    <aura:attribute name="fiscalYr" type="String"/>
    <aura:attribute name="accountFormId" type="String"/>
</aura:method>

This is the storable method

   ({
getFormInitData: function (cmp,event,helper) {
    var params = event.getParam("arguments");
    console.log('reading the params');
    console.log(params);
    console.log(params.fiscalYr);
    var action = cmp.get("c.getHomePageData");
    console.log('get Form Init data');

    action.setStorable();
    var fiscaYear = params.fiscalYr;
    var accountFormId = params.accountFormId;
    if(params.fiscalYr)
    action.setParams({"fiscalYr":fiscaYear},{"accountFormId":accountFormId});
    action.setCallback(this, function (response) {
        console.log('server response ');
        console.log(response.getReturnValue())
        params.callback(null,response.getReturnValue());
    });
    $A.enqueueAction(action);
}

})

caller component CMP file

It has the folllowing tags in reference to call the service, contextSvc returns the parameters to pass it to storable action getFormInitData

 <c:Form_ContextService aura:id="contextSvc"/>
 <c:Form_FormInitService aura:id="service"/>

caller component Controller

   ({
doInit : function(component, event, helper) {
    console.log('calling do init....');
    var spinnerUtility=component.find("spinner");
     spinnerUtility.toggleSpinner();

    var contextSvc = component.find("contextSvc");
    contextSvc.getFormContext($A.getCallback(function(error, data) {
        console.log('context1 object');
        console.log(data);

        var service = component.find("service");
        service.getFormInitData($A.getCallback(function(error, data) {
            component.set("v.data", data);
            helper.processData(component);
            console.log('completed process data....');
        }));
         }),data.fiscalYr,data.accountFormId);
     }),true);



}

Answer 1

Storable Actions are a GREAT way to enhance the performance of your Lightning components and implementing them is incredibly easy, but there is one big gotcha to using them with stand-alone Lightning Applications.

Even though storable actions are automatically configured in Lightning Experience and Salesforce1, any Stand-alone Lightning apps you build that are used to host your components will NOT use caching by default.

For these apps to use storable actions, you must do these two things:

1.) Add a new component which you can name whatever you want, but I named mine AppTemplateComponent and have it use the following code:

<aura:component isTemplate="true" extends="aura:template">
    <aura:set attribute="auraPreInitBlock">
        <auraStorage:init name="actions"
          persistent="false"
          secure="true"
          maxSize="1024"
          defaultExpiration="900"
          defaultAutoRefreshInterval="30" />
    </aura:set>
</aura:component>

2.) Add the following attribute to your Lightning Standalone app:

template="c:AppTemplateComponent"

Once you do this, you should be able to see the caching working for any component used in that app that calls the following line of code:

action.setStorable();