1. #1
    Sencha User
    Join Date
    May 2011
    Posts
    3
    Vote Rating
    3
    grekker is on a distinguished road

      1  

    Default Influencing Browser Caching with Sencha Cmd for an ExtJS 4 App

    Influencing Browser Caching with Sencha Cmd for an ExtJS 4 App


    Is it possible with Sencha Cmd to add a parameter to a script src property to encourage browsers to dump their cached version of the file?

    Right now Sencha Cmd turns this:

    HTML Code:
    <!-- <x-compile> -->
      <!-- <x-bootstrap> -->    
        <script src="/ext-4.1.1a/ext-debug.js" type="text/javascript"></script>  
      <!-- </x-bootstrap> -->
      <script src="/app.js" type="text/javascript"></script>
    <!-- </x-compile> -->
    Into this:

    HTML Code:
    <script type="text/javascript" src="all-classes.js"></script>
    We're running into a minor but annoying problem. Browsers are caching the all-classes.js file and when we push changes (which we do quite frequently, every other day or so) not all users get them until some time later.

    Is it possible to use Sencha Cmd to instead generate something like this:

    HTML Code:
    <script type="text/javascript" src="all-classes.js?version=43208374"></script>
    Where version is just some random number or timestamp that is added so that each time you run Sencha Cmd browsers will see the new parameter and replace their cached versions?

    Thanks!

    P.S. My backup plan is to just do this myself using SED or equivalent as part of our deploy process, but figured I wouldn't re-invent the wheel if Cmd could already do it for me. Looked in the docs, didn't see anything about this.

  2. #2
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,429
    Vote Rating
    151
    dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold

      1  

    Default


    The name "all-classes.js" is a build property. From .sencha/app/build-impl.xml (line 116 of the "init" target):

    Code:
        <property name="build.classes.name" value="all-classes.js"/>
    While changing build-impl.xml is not recommended, you can provide your own value in build.xml like so:

    Code:
        <target name="-before-init">
            <tstamp>
                <format property="tstamp.full" pattern="yyyy-MM-dd-HH-mm-ss"/>
            </tstamp>
    
            <property name="build.classes.name"
                      value="all-classes.js?version=${tstamp.full}"/>
        </target>
    Don Griffin
    Engineering Manager - Frameworks (Ext JS / Sencha Touch)

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  3. #3
    Sencha User
    Join Date
    May 2011
    Posts
    3
    Vote Rating
    3
    grekker is on a distinguished road

      0  

    Default


    Thanks for the reply. Glad to hear there's a way to do it.

    My application was not generated by Sencha Cmd. I'm just using the following command to compile it:

    Code:
    sencha -s=public/ext-4.1.1a compile -classpath=public/ext-4.1.1a/examples/ux,public/app,public/app.js page -yui -in public/development.php -out public/index.php
    Is there a way to incorporate build.xml into this process, or do I need to mess around with generating a new application and migrate mine?

  4. #4
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,429
    Vote Rating
    151
    dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold

      1  

    Default


    At that level, the page command has a switch to specify the generated filename. Though now that I think about it, we may need to allow the file name and the src attribute to have different values.

    But you could just give the actual file name the date/time stamp instead of using ?version= and get the desired affect.

    If you want to experiment with the generated build scripts, the easiest way is to copy the build.xml and .sencha folder from one a dummy app over to your app. There may be changed needed to some config values, but that is probably easier than moving your app around. Depends how similar or dissimilar things are between what you have and what the generated scripts assume.
    Don Griffin
    Engineering Manager - Frameworks (Ext JS / Sencha Touch)

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  5. #5
    Sencha User
    Join Date
    May 2011
    Posts
    3
    Vote Rating
    3
    grekker is on a distinguished road

      2  

    Default


    Quick PSA to help anyone that found this thread searching for how to version deployed builds.

    Now that 4.2 is well and truly out in the wild, we've bitten the bullet and started migrating our app from the old folder structure to the new, shiny Sencha Cmd structure that comes with 4.2.

    For the last few months I followed dongryphon's original advice about using a switch in the page command to manually specify a version number each time I built.

    Now that we're using 4.2 (and Sencha Cmd 3.1.1.274) I tried to use dongryphon's original suggestion (modify the build.xml file) and realized that the original suggestion doesn't work.

    If you put
    Code:
    <property name="build.classes.name" value="all-classes.js?version=${tstamp.full}"/>
    it will generate an actual file that includes the entire timestamp, including the question mark.

    However, browsers assume that question marks indicate parameters for a file, so the browser still looks for an "all-classes.js" file. Consequently, no file is found.

    You can get around this by simply using:
    Code:
    <property name="build.classes.name" value="all-classes-${tstamp.full}.js"/>
    which as you can see embeds the timestamp in the filename in a way browsers will understand.

    However, none of this really solves the original objective in its true spirit: versioning a deployed file so that browsers clear their cache. We've achieved the same result but by basically cloning the deployed file over and over. This clutters up your build folder and messes with any version control you've got going on.

    Now dongryphon already alluded to the way to really fix this problem: split the generated file name and the src attribute into two different variables. If the Sencha team does this in a later Sencha Cmd version we could quite easily version the deployed script in a clean, friendly way.

    Here's hoping!

  6. #6
    Sencha Premium Member
    Join Date
    Aug 2007
    Location
    The Netherlands
    Posts
    52
    Vote Rating
    3
    extjs@kingsquare.nl is on a distinguished road

      0  

    Default +1 for the feature request of making cache busting a part of Sencha CMD

    +1 for the feature request of making cache busting a part of Sencha CMD


    Good question and clear answers by the way... thnx!

  7. #7

  8. #8
    Sencha Premium Member varsos's Avatar
    Join Date
    Feb 2008
    Location
    Long Island, NY
    Posts
    342
    Vote Rating
    16
    varsos will become famous soon enough

      2  

    Default a solution

    a solution


    This works for me:
    Code:
        <target name="-after-page">
            <tstamp>
                <format property="tstamp.full" pattern="yyyyMMddHHmmss"/>
            </tstamp>
            <replace file="${build.dir}/${app.page.name}" token="${build.classes.name}" value="${build.classes.name}?version=${tstamp.full}"/>
            <replace file="${build.dir}/${app.page.name}" token="${app.out.css.rel}" value="${app.out.css.rel}?version=${tstamp.full}"/>
        </target>
    It adds the version timestamp directly into the index.jsp after page command.
    varsos

  9. #9
    Sencha Premium Member
    Join Date
    Jul 2013
    Posts
    28
    Vote Rating
    2
    txdev is on a distinguished road

      0  

    Default


    Quote Originally Posted by varsos View Post
    This works for me:
    Code:
        <target name="-after-page">
            <tstamp>
                <format property="tstamp.full" pattern="yyyyMMddHHmmss"/>
            </tstamp>
            <replace file="${build.dir}/${app.page.name}" token="${build.classes.name}" value="${build.classes.name}?version=${tstamp.full}"/>
            <replace file="${build.dir}/${app.page.name}" token="${app.out.css.rel}" value="${app.out.css.rel}?version=${tstamp.full}"/>
        </target>
    It adds the version timestamp directly into the index.jsp after page command.
    +1 Excellent tip, works perfectly for me in 4.2.3.