Open Source Code Project | Development Solutions Architecture | Visit project website

Dynamic web-apps that load like native-apps on mobile devices; available open source

The full open source code can be found on BitBucket here:

As the project lead for I make sure to fill any role on the team where we have a knowledge gap. In that process I had to learn how to do front-end web development and I architected the AJAX – MVC integration necessary for the the site to have a web-app feel about it. The first version of the site was filled with problems largely because I was steering blind.

While we are working on the next version of the site I thought I would release an open-source starter kit featuring the various things that I had learned along the way. This starter kit is focused mainly on dynamic page reloads using AJAX but also a number of other extras:

  • Mobile touch icons and startup screens + web-app capability so that mobile devices can load the web-app full screen without a browser
  • addToHome.js plugin modified embedded to appear only on the home page and integrated into the AJAX workflow
  • Google Analytics push code built into the AJAX workflow to automatically track page views for dynamically loaded pages (tracked the same way any other page view is tracked)
  • Mobile first CSS using a flexbox layout (without fallback for browsers that don’t support flexbox)
  • A simple mobile toggle menu using progressive enhancement
  • A number of accessibility features that I hope will encourage accessible web development


The key AJAX component is available largely from these two functions. The first tracks clicks on <a> elements with the .ajax class, while the second fights a persistent problem with the jQuery history plugin – some browsers present the first page load as a “pop”, while other browsers only treat back/forward button presses as “pops”.


$(document).on(‘click’, ‘a.ajax’, function(event) {

var page = $(this).attr(‘href’);
var State = History.getState();
if (urldecode(page) === urldecode(State.hash)) {


} else {



return false;


var State = History.getState();
if (urldecode(window.location) !== urldecode(State.url)) {

window.location = State.url;

} else {

History.replaceState({}, State.title, State.url);




A visual summary



Screenshot of steps for adding web app to home screen
Screenshot of responsive comparison
Standard page screenshot
Dynamic Loading Screenshot
Screenshot of AJAX class
Flexbox Layout screenshot
Annotated code screenshot

Have you got a comment, criticism or suggestion? Contact Rick on or