Tracking assets changes

The current way of tracking asset changes is currently a bit clumsy. It will probably be changed later in InstantClick 4.0.

To check when a style sheet or script (either external or inline) is updated, add it a data-instant-track attribute:

1 2 3 4 5 
<link rel="stylesheet" href="style.css" data-instant-track>
<script src="script.js" data-instant-track></script>
 
<style data-instant-track>body { background: aliceblue; }</style>
<script data-instant-track>window.timingStart = performance.now();</script>

InstantClick will check for changes in the href or src attributes if they exist. To indicate that a file is updated, modify its attribute:

1 2 
<link rel="stylesheet" href="style.css?20140308" data-instant-track>
<script src="script.js?20140308" data-instant-track></script>

If it’s an inline script or style, InstantClick will check for a change in the element’s content.

1 2 
<style data-instant-track>body { background: midnightblue; font: 13px Helvetica; }</style>
<script data-instant-track>var timingStart = performance && performance.now();</script>

When any change is detected, InstantClick will reload the page, thus making the browser re-evaluate all scripts and styles.

Documentation table of contents

Getting started

  • 1. Get started
  • 2. How InstantClick works
  • 3. Preloading
  • 4. Blacklisting
  • 5. Events and script re-evaluation

    • Go further

  • 1. Tracking assets changes
  • 2. Customizing the progress bar

    • Meta

  • 1. Roadmap
  • 2. Changelog