JavaEE AngularJs: Browser URLs Cache and Version

logo angularjsThis tutorial provides a way for the browser to manage different versions of the same resource.

Because new version of your website is deployed, especially with a rich client, you may encounter some issues, like browser caching (ex: you have updated your-lib.js, but some users still experienced the old lib behavior : it’s caused by browser cache on this file, they still have the old version and CTRL+F5 keys do not always resolves this).

Demo

You need Eclipse, Maven, Tomcat.

ScreenShot001

ScreenShot002

There are two parts: the vendor URLs version (like angular.js) and your app URLs version (like  app.js, home.html, main.css).

ScreenShot003

You can update versions in pom.xml.

ScreenShot004

And after restarting the app server, the URLs have changed.

ScreenShot005

ScreenShot006

ScreenShot007

Details of vendor URLs version (like angular.js):

pom.xml: version

ScreenShot100

index.html: url

ScreenShot101

browser: real world

ScreenShot102

Details of webapp URLs version (like app.js):

ScreenShot200

ScreenShot201

ScreenShot202

Source

ScreenShot300.png

 

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.damienfremont.blog</groupId>
  <artifactId>20160109-javaee-angularjs-browser_url_version_cache</artifactId>
  
  <!-- APP VERSION (USED FOR CACHE) -->
  <version>0.0.1-SNAPSHOT</version>
  
  <packaging>war</packaging>
  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <java.version>7</java.version>
    
    <!-- WEB JAR VERSION (USED FOR CACHE) -->
    <angularjs.version>1.4.7</angularjs.version>
    
  </properties>
  <dependencies>
    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>webjars-servlet-2.x</artifactId>
      <version>1.1</version>
    </dependency>
    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>angularjs</artifactId>
      <version>${angularjs.version}</version>
    </dependency>
  </dependencies>
  <build>
    <resources>
      <resource>
        <directory>src/main/webapp</directory>
        <filtering>true</filtering>
        <targetPath>${project.basedir}/target/m2e-wtp/web-resources</targetPath>
        <includes>
          <include>index.html</include>
        </includes>
      </resource>
    </resources>  
    <plugins>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-war-plugin</artifactId>
        <configuration>
          
          <!-- REPLACE ALL FOR WEBJARS URLS -->
          <webResources>
            <resource>
              <directory>src/main/webapp</directory>
              <filtering>true</filtering>
              <includes>
                <include>app.js</include>
                <include>index.html</include>
              </includes>
            </resource>
          </webResources>
        </configuration>
      </plugin>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.1</version>
        <configuration>
          <source>1.${java.version}</source>
          <target>1.${java.version}</target>
        </configuration>
      </plugin>
    </plugins>
  </build>
</project>

app.js

'use strict';

angular.module('app', [ 'ngRoute' ])

// CONFIG

.config(function($routeProvider) {
  
  var version = '?nocache=${project.version}';
  
  // ROUTE: URLs
  $routeProvider
  // HOME
  .when('/home', {
    templateUrl : 'modules/home/home.html'+version
  })
  // DEFAULT
  .otherwise('/home');
});

main.css

h2 {
	color: grey;
}

index.html

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">

<!-- APP CSS-->
<link rel="stylesheet" href="css/main.css?version=${project.version}">

</head>
<body>

    <!-- VIEW/PAGE -->
    <div ng-view>Loading...</div>
		
	<!-- LIBS JS -->
	<script src="webjars/angularjs/${angularjs.version}/angular.js"></script>
	<script src="webjars/angularjs/${angularjs.version}/angular-route.js"></script>

	<!-- APP JS -->
	<script src="app.js?version=${project.version}"></script>
	<script src="modules/home/home.js?version=${project.version}"></script>

</body>
</html>

home.html

<div ng-controller="HomeCtrl">
  <h2>This is home</h2>
  <p>{{message}}</p>
</div>

home.js

'use strict';

angular.module('app') //

.controller('HomeCtrl', function($scope) {
  $scope.message = 'Nothing is like home.';
});

web.xml

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee 
     http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">
  
  <servlet>
    <servlet-name>WEBJARS</servlet-name>
    <servlet-class>org.webjars.servlet.WebjarsServlet</servlet-class>
    <init-param>
      <param-name>disableCache</param-name>
      <param-value>true</param-value>
    </init-param>
    <load-on-startup>2</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>WEBJARS</servlet-name>
    <url-pattern>/webjars/*</url-pattern>
  </servlet-mapping>

</web-app>

 

Project

https://github.com/DamienFremont/blog/tree/master/20160109-javaee-angularjs-browser_url_version_cache

 

One thought on “JavaEE AngularJs: Browser URLs Cache and Version

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s