Add offline support of static files/fallback page.

Use a list to store JavaScript files, so it can be shared
between the HTML footer and the appcache manifest.

32 files changed, 296 insertions, 169 deletions

diff --git a/perllib/FixMyStreet/App/Controller/Offline.pm b/perllib/FixMyStreet/App/Controller/Offline.pm
new file mode 100644
index 000000000..9acb33f7e
--- /dev/null
+++ b/perllib/FixMyStreet/App/Controller/Offline.pm
@@ -0,0 +1,32 @@
+package FixMyStreet::App::Controller::Offline;
+use Moose;
+use namespace::autoclean;
+
+BEGIN { extends 'Catalyst::Controller'; }
+
+=head1 NAME
+
+FixMyStreet::App::Controller::Offline - Catalyst Controller
+
+=head1 DESCRIPTION
+
+Offline pages Catalyst Controller.
+
+=head1 METHODS
+
+=cut
+
+sub manifest : Path("/offline/appcache.manifest") {
+    my ($self, $c) = @_;
+    $c->res->content_type('text/cache-manifest; charset=utf-8');
+    $c->res->header(Cache_Control => 'no-cache, no-store');
+}
+
+sub appcache : Path("/offline/appcache") {
+    my ($self, $c) = @_;
+    $c->detach('/page_error_404_not_found', []) if keys %{$c->req->params};
+}
+
+__PACKAGE__->meta->make_immutable;
+
+1;
diff --git a/perllib/FixMyStreet/App/View/Web.pm b/perllib/FixMyStreet/App/View/Web.pm
index f0bcad0be..22387f5f6 100644
--- a/perllib/FixMyStreet/App/View/Web.pm
+++ b/perllib/FixMyStreet/App/View/Web.pm
@@ -140,7 +140,8 @@ sub escape_js {
 
 my %version_hash;
 sub version {
-    my ( $self, $c, $file ) = @_;
+    my ( $self, $c, $file, $url ) = @_;
+    $url ||= $file;
     _version_get_mtime($file);
     if ($version_hash{$file} && $file =~ /\.js$/) {
         # See if there's an auto.min.js version and use that instead if there is
@@ -149,7 +150,7 @@ sub version {
         $file = $file_min if $version_hash{$file_min} >= $version_hash{$file};
     }
     my $admin = $self->template->context->stash->{admin} ? FixMyStreet->config('ADMIN_BASE_URL') : '';
-    return "$admin$file?$version_hash{$file}";
+    return "$admin$url?$version_hash{$file}";
 }
 
 sub _version_get_mtime {
diff --git a/perllib/FixMyStreet/Cobrand/Base.pm b/perllib/FixMyStreet/Cobrand/Base.pm
index 5a9842233..a9eed0018 100644
--- a/perllib/FixMyStreet/Cobrand/Base.pm
+++ b/perllib/FixMyStreet/Cobrand/Base.pm
@@ -38,6 +38,20 @@ sub moniker {
     return $last_part;
 }
 
+=head2 asset_moniker
+
+    $moniker = $cobrand_class->asset_moniker();
+
+Same as moniker, except for the cobrand with the 'fixmystreet' moniker, when it
+returns 'fixmystreet.com', as to avoid confusion that's where its assets are.
+
+=cut
+
+sub asset_moniker {
+    my $self = shift;
+    return $self->moniker eq 'fixmystreet' ? 'fixmystreet.com' : $self->moniker;
+}
+
 =head2 is_default
 
     $bool = $cobrand->is_default();
diff --git a/templates/web/angus/maps/fms.html b/templates/web/angus/maps/fms.html
index aed4d1764..1516ae05e 100644
--- a/templates/web/angus/maps/fms.html
+++ b/templates/web/angus/maps/fms.html
@@ -1,11 +1,11 @@
-[% map_js = BLOCK %]
-<!-- <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=en-GB"></script> -->
-<script type="text/javascript" src="[% version('/js/OpenLayers/OpenLayers.angus.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/map-OpenLayers.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/map-bing-ol.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/map-fms.js') %]"></script>
-<script src="[% version('/cobrands/fixmystreet/assets.js') %]"></script>
-<script src="[% version('/cobrands/angus/js.js') %]"></script>
-[% END %]
-
-[% map_html = INCLUDE maps/openlayers.html include_key = 1 %]
+[%
+map_js = [
+    version('/js/OpenLayers/OpenLayers.angus.js'),
+    version('/js/map-OpenLayers.js'),
+    version('/js/map-bing-ol.js'),
+    version('/js/map-fms.js'),
+    version('/cobrands/fixmystreet/assets.js'),
+    version('/cobrands/angus/js.js'),
+];
+map_html = INCLUDE maps/openlayers.html include_key = 1
+%]
diff --git a/templates/web/base/common_footer_tags.html b/templates/web/base/common_footer_tags.html
index 45872895b..01420c37d 100644
--- a/templates/web/base/common_footer_tags.html
+++ b/templates/web/base/common_footer_tags.html
@@ -1,28 +1,13 @@
-[% USE date %][% USE Math %]
-
 [% TRY %][% PROCESS 'footer_extra.html' %][% CATCH file %][% END %]
 
-<script type="text/javascript" src="[% start %]/js/translation_strings.[% lang_code %].js?[% Math.int( date.now / 3600 ) %]"></script>
-<script type="text/javascript" src="[% version('/jslib/jquery-1.7.2.min.js') %]"></script>
+[% PROCESS 'common_scripts.html' %]
+
 <!--[if lte IE 9]>
-  <script type="text/javascript" src="[% version('/js/history.polyfill.min.js') %]"></script>
+  <script src="[% version('/js/history.polyfill.min.js') %]"></script>
 <![endif]-->
-<script type="text/javascript" src="[% version('/js/validation_rules.js') %]"></script>
-<script src="[% version('/js/jquery.validate.min.js') %]" type="text/javascript" charset="utf-8"></script>
-<script type="text/javascript" src="[% version('/js/dropzone.min.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/jquery.multi-select.js') %]"></script>
-
-<script type="text/javascript" src="[% version('/js/geo.min.js') %]"></script>
-<script type="text/javascript" src="[% version('/cobrands/fixmystreet/fixmystreet.js') %]"></script>
-
-[% map_js %]
-<script src="[% version('/cobrands/fixmystreet/map.js') %]"></script>
-
-[% IF admin %]
-  <script src="[% version('/js/jquery-ui/js/jquery-ui-1.10.3.custom.min.js') %]"></script>
-  <script type="text/javascript" src="[% version('/js/fixmystreet-admin.js') %]"></script>
+[% FOR script IN scripts ~%]
+    [% script = script.0 ? script : [ script ] ~%]
+    <script src="[% script.0 %]"
+        [%~ FOR attr IN script.1 %] [% attr.key %]="[% attr.value %]"[% END ~%]
+        ></script>
 [% END %]
-
-[% extra_js %]
-
-[% TRY %][% PROCESS 'footer_extra_js.html' %][% CATCH file %][% END %]
diff --git a/templates/web/base/common_scripts.html b/templates/web/base/common_scripts.html
new file mode 100644
index 000000000..1d53f1d51
--- /dev/null
+++ b/templates/web/base/common_scripts.html
@@ -0,0 +1,44 @@
+[%
+
+USE date;
+USE Math;
+
+scripts = [];
+
+scripts.push(
+    start _ "/js/translation_strings." _ lang_code _ ".js?" _ Math.int( date.now / 3600 ),
+    version('/jslib/jquery-1.7.2.min.js'),
+    version('/js/validation_rules.js'),
+    version('/js/jquery.validate.min.js'),
+    version('/js/dropzone.min.js'),
+    version('/js/jquery.multi-select.js'),
+    version('/js/geo.min.js'),
+    version('/cobrands/fixmystreet/fixmystreet.js'),
+);
+
+FOR script IN map_js;
+    scripts.push(script);
+END;
+
+scripts.push(
+    version('/cobrands/fixmystreet/map.js'),
+    version('/cobrands/fixmystreet/offline.js'),
+);
+
+IF admin;
+    scripts.push(
+        version('/js/jquery-ui/js/jquery-ui-1.10.3.custom.min.js'),
+        version('/js/fixmystreet-admin.js'),
+    );
+END;
+
+FOR script IN extra_js;
+    scripts.push(script);
+END;
+
+TRY;
+    PROCESS 'footer_extra_js.html';
+CATCH file;
+END;
+
+~%]
diff --git a/templates/web/base/front/javascript.html b/templates/web/base/front/javascript.html
index 2795829a5..6b8e2a292 100644
--- a/templates/web/base/front/javascript.html
+++ b/templates/web/base/front/javascript.html
@@ -1,7 +1,12 @@
-[%# Assume using OpenStreetMap maps %]
-<script src="[% version('/js/yepnope.js') %]"></script>
-<script id="script_front" src="[% version('/cobrands/fixmystreet/front.js') %]"
-    data-scripts="
-        [%~ version('/js/OpenLayers/OpenLayers.fixmystreet.js') %],
-        [%~ version('/js/map-OpenLayers.js') %],
-        [%~ version('/js/map-OpenStreetMap.js') %]"></script>
+[%
+# Assume using OpenStreetMap maps
+map_js = [
+    version('/js/yepnope.js'),
+    [ version('/cobrands/fixmystreet/front.js'), {
+        id = 'script_front',
+        'data-scripts' = version('/js/OpenLayers/OpenLayers.fixmystreet.js') _ ',' _
+            version('/js/map-OpenLayers.js') _ ',' _
+            version('/js/map-OpenStreetMap.js')
+    } ],
+]
+%]
diff --git a/templates/web/base/header.html b/templates/web/base/header.html
index c11e78b47..4e537a7ec 100644
--- a/templates/web/base/header.html
+++ b/templates/web/base/header.html
@@ -7,7 +7,10 @@
 <!--[if IE 7]>   <html class="no-js ie7 iel8"[% html_att %]><![endif]-->
 <!--[if IE 8]>   <html class="no-js ie8 iel8"[% html_att %]><![endif]-->
 <!--[if IE 9]>   <html class="no-js ie9"[% html_att %]><![endif]-->
-<!--[if gt IE 9]><!--><html class="no-js"[% html_att %]><!--<![endif]-->
+<!--[if gt IE 9]><!--><html class="no-js"[% html_att %]
+[% IF appcache ~%]
+ manifest="/offline/appcache.manifest"
+[%~ END %]><!--<![endif]-->
     <head>
         <meta name="viewport" content="initial-scale=1.0">
 
@@ -16,19 +19,11 @@
         <meta name="mobileoptimized" content="0">
 
         [% INCLUDE 'header_opengraph.html' %]
-        [%
-           # For clarity, the 'fixmystreet' moniker (for fixmystreet.com) puts
-           # it stylesheets under fixmystreet.com
-           IF c.cobrand.moniker == 'fixmystreet';
-               SET css_dir = 'fixmystreet.com';
-           ELSE;
-               SET css_dir = c.cobrand.moniker;
-           END %]
-        <link rel="stylesheet" href="[% version('/cobrands/' _ css_dir _ '/base.css') %]">
-        <link rel="stylesheet" href="[% version('/cobrands/' _ css_dir _ '/layout.css') %]" media="(min-width:48em)">
+        <link rel="stylesheet" href="[% version('/cobrands/' _ c.cobrand.asset_moniker _ '/base.css') %]">
+        <link rel="stylesheet" href="[% version('/cobrands/' _ c.cobrand.asset_moniker _ '/layout.css') %]" media="(min-width:48em)">
         [% extra_css %]
         <!--[if (lt IE 9) & (!IEMobile)]>
-            <link rel="stylesheet" href="[% version('/cobrands/' _ css_dir _ '/layout.css') %]">
+            <link rel="stylesheet" href="[% version('/cobrands/' _ c.cobrand.asset_moniker _ '/layout.css') %]">
         <![endif]-->
 
         [% INCLUDE 'common_header_tags.html' %]
diff --git a/templates/web/base/index.html b/templates/web/base/index.html
index 0441b3efb..8cb127e6a 100644
--- a/templates/web/base/index.html
+++ b/templates/web/base/index.html
@@ -1,4 +1,4 @@
-[% map_js = PROCESS 'front/javascript.html' %]
+[% PROCESS 'front/javascript.html' %]
 
 [% pre_container_extra = PROCESS 'around/postcode_form.html' %]
 [% INCLUDE 'header.html', title = '', bodyclass = 'frontpage fullwidthpage' %]
diff --git a/templates/web/base/maps/bing.html b/templates/web/base/maps/bing.html
index 6af4c3562..59d012c4f 100644
--- a/templates/web/base/maps/bing.html
+++ b/templates/web/base/maps/bing.html
@@ -1,8 +1,8 @@
-[% map_js = BLOCK %]
-<!-- <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=en-GB"></script> -->
-<script type="text/javascript" src="[% version('/js/OpenLayers/OpenLayers.fixmystreet.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/map-OpenLayers.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/map-bing-ol.js') %]"></script>
-[% END %]
-
-[% map_html = INCLUDE maps/openlayers.html %]
+[%
+map_js = [
+    version('/js/OpenLayers/OpenLayers.fixmystreet.js'),
+    version('/js/map-OpenLayers.js'),
+    version('/js/map-bing-ol.js'),
+];
+map_html = INCLUDE maps/openlayers.html
+%]
diff --git a/templates/web/base/maps/fms.html b/templates/web/base/maps/fms.html
index 03eb843da..e155ff778 100644
--- a/templates/web/base/maps/fms.html
+++ b/templates/web/base/maps/fms.html
@@ -1,9 +1,9 @@
-[% map_js = BLOCK %]
-<!-- <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=en-GB"></script> -->
-<script type="text/javascript" src="[% version('/js/OpenLayers/OpenLayers.fixmystreet.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/map-OpenLayers.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/map-bing-ol.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/map-fms.js') %]"></script>
-[% END %]
-
-[% map_html = INCLUDE maps/openlayers.html include_key = 1 %]
+[%
+map_js = [
+    version('/js/OpenLayers/OpenLayers.fixmystreet.js'),
+    version('/js/map-OpenLayers.js'),
+    version('/js/map-bing-ol.js'),
+    version('/js/map-fms.js'),
+];
+map_html = INCLUDE maps/openlayers.html include_key = 1
+%]
diff --git a/templates/web/base/maps/google-ol.html b/templates/web/base/maps/google-ol.html
index cccea5b24..e326bd713 100644
--- a/templates/web/base/maps/google-ol.html
+++ b/templates/web/base/maps/google-ol.html
@@ -1,9 +1,11 @@
-[% map_js = BLOCK %]
-<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3"></script>
-<script type="text/javascript" src="[% version('/js/OpenLayers/OpenLayers.google.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/map-OpenLayers.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/map-google-ol.js') %]"></script>
-[% END %]
+[%
+map_js = [
+    "https://maps.googleapis.com/maps/api/js?v=3",
+    version('/js/OpenLayers/OpenLayers.google.js'),
+    version('/js/map-OpenLayers.js'),
+    version('/js/map-google-ol.js'),
+]
+%]
 
 [% map_sub_links = BLOCK %]
 <a class="hidden-nojs" id="map_layer_toggle" href="">[% loc('Satellite') %]</a>
diff --git a/templates/web/base/maps/google.html b/templates/web/base/maps/google.html
index eeb4c9837..c86c757fb 100644
--- a/templates/web/base/maps/google.html
+++ b/templates/web/base/maps/google.html
@@ -1,4 +1,3 @@
-[% map_js = BLOCK %]
 <style>
 #map_box img {
     max-width: none;
@@ -7,9 +6,12 @@
     color: #000;
 }
 </style>
-<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
-<script type="text/javascript" src="[% version('/js/map-google.js') %]"></script>
-[% END %]
+[%
+map_js = [
+    "http://maps.googleapis.com/maps/api/js?sensor=false",
+    version('/js/map-google.js'),
+]
+%]
 
 [% map_html = BLOCK %]
 <script nonce="[% csp_nonce %]">
diff --git a/templates/web/base/maps/mapquest-attribution.html b/templates/web/base/maps/mapquest-attribution.html
index ab4424cdd..e469901a8 100644
--- a/templates/web/base/maps/mapquest-attribution.html
+++ b/templates/web/base/maps/mapquest-attribution.html
@@ -1,9 +1,8 @@
-[% map_js = BLOCK %]
-<script type="text/javascript" src="[% version('/js/OpenLayers/OpenLayers.fixmystreet.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/map-OpenLayers.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/map-OpenStreetMap.js') %]"></script>
-[% END %]
-
-[% map_html = BLOCK %]
-[% INCLUDE maps/openlayers.html %]
-[% END %]
+[%
+map_js = [
+    version('/js/OpenLayers/OpenLayers.fixmystreet.js'),
+    version('/js/map-OpenLayers.js'),
+    version('/js/map-OpenStreetMap.js'),
+];
+map_html = INCLUDE maps/openlayers.html
+%]
diff --git a/templates/web/base/maps/osm-streetview.html b/templates/web/base/maps/osm-streetview.html
index 2ff3b4723..dcf45d3b6 100644
--- a/templates/web/base/maps/osm-streetview.html
+++ b/templates/web/base/maps/osm-streetview.html
@@ -1,9 +1,8 @@
-[% map_js = BLOCK %]
-<script type="text/javascript" src="[% version('/js/OpenLayers/OpenLayers.fixmystreet.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/map-OpenLayers.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/map-streetview.js') %]"></script>
-[% END %]
-
-[% map_html = BLOCK %]
-[% INCLUDE maps/openlayers.html %]
-[% END %]
+[%
+map_js = [
+    version('/js/OpenLayers/OpenLayers.fixmystreet.js'),
+    version('/js/map-OpenLayers.js'),
+    version('/js/map-streetview.js'),
+];
+map_html = INCLUDE maps/openlayers.html
+%]
diff --git a/templates/web/base/maps/osm-toner-lite.html b/templates/web/base/maps/osm-toner-lite.html
index 5e48f7569..6512eaf2c 100644
--- a/templates/web/base/maps/osm-toner-lite.html
+++ b/templates/web/base/maps/osm-toner-lite.html
@@ -1,10 +1,9 @@
-[% map_js = BLOCK %]
-<script type="text/javascript" src="[% version('/js/OpenLayers/OpenLayers.fixmystreet.js') %]"></script>
-<script type="text/javascript" src="https://stamen-maps.a.ssl.fastly.net/js/tile.stamen.js?v1.3.0"></script>
-<script type="text/javascript" src="[% version('/js/map-OpenLayers.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/map-toner-lite.js') %]"></script>
-[% END %]
-
-[% map_html = BLOCK %]
-[% INCLUDE maps/openlayers.html %]
-[% END %]
+[%
+map_js = [
+    version('/js/OpenLayers/OpenLayers.fixmystreet.js'),
+    "https://stamen-maps.a.ssl.fastly.net/js/tile.stamen.js?v1.3.0",
+    version('/js/map-OpenLayers.js'),
+    version('/js/map-toner-lite.js'),
+];
+map_html = INCLUDE maps/openlayers.html
+%]
diff --git a/templates/web/base/maps/osm.html b/templates/web/base/maps/osm.html
index ab4424cdd..e469901a8 100644
--- a/templates/web/base/maps/osm.html
+++ b/templates/web/base/maps/osm.html
@@ -1,9 +1,8 @@
-[% map_js = BLOCK %]
-<script type="text/javascript" src="[% version('/js/OpenLayers/OpenLayers.fixmystreet.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/map-OpenLayers.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/map-OpenStreetMap.js') %]"></script>
-[% END %]
-
-[% map_html = BLOCK %]
-[% INCLUDE maps/openlayers.html %]
-[% END %]
+[%
+map_js = [
+    version('/js/OpenLayers/OpenLayers.fixmystreet.js'),
+    version('/js/map-OpenLayers.js'),
+    version('/js/map-OpenStreetMap.js'),
+];
+map_html = INCLUDE maps/openlayers.html
+%]
diff --git a/templates/web/base/offline/appcache.html b/templates/web/base/offline/appcache.html
new file mode 100644
index 000000000..766c27c1a
--- /dev/null
+++ b/templates/web/base/offline/appcache.html
@@ -0,0 +1,8 @@
+[% INCLUDE 'header.html' appcache = 1 bodyclass = "fullwidthpage" %]
+
+<h1>Internet glitch</h1>
+
+<p>Sorry, we don’t have a good enough connection to fetch that page, or the
+page wasn’t found or there was a server error. Please try again later.</p>
+
+[% INCLUDE 'footer.html' %]
diff --git a/templates/web/base/offline/manifest.html b/templates/web/base/offline/manifest.html
new file mode 100644
index 000000000..f5a9fddcc
--- /dev/null
+++ b/templates/web/base/offline/manifest.html
@@ -0,0 +1,17 @@
+CACHE MANIFEST
+
+[% PROCESS 'common_scripts.html' ~%]
+
+CACHE:
+[% version('/cobrands/' _ c.cobrand.asset_moniker _ '/base.css') %]
+[% version('/cobrands/' _ c.cobrand.asset_moniker _ '/layout.css') %]
+
+[% FOR script IN scripts ~%]
+    [%- script %]
+[% END %]
+
+NETWORK:
+*
+
+FALLBACK:
+/ [% version('../templates/web/base/offline/appcache.html', '/offline/appcache') %]
diff --git a/templates/web/base/report/photo-js.html b/templates/web/base/report/photo-js.html
index 05588d085..91b9930e7 100644
--- a/templates/web/base/report/photo-js.html
+++ b/templates/web/base/report/photo-js.html
@@ -1,6 +1,6 @@
 [% extra_css = BLOCK %]
     <link rel="stylesheet" href="[% version('/js/fancybox/jquery.fancybox-1.3.4.css') %]">
 [% END %]
-[% extra_js = BLOCK %]
-    <script src="[% version('/js/fancybox/jquery.fancybox-1.3.4.pack.js') %]" charset="utf-8"></script>
-[% END %]
+[% extra_js = [
+    version('/js/fancybox/jquery.fancybox-1.3.4.pack.js')
+] %]
diff --git a/templates/web/base/reports/index.html b/templates/web/base/reports/index.html
index 4a7d5a9c9..b07227144 100755
--- a/templates/web/base/reports/index.html
+++ b/templates/web/base/reports/index.html
@@ -1,6 +1,6 @@
-[% extra_js = BLOCK %]
-    <script src="[% version('/js/jquery.fixedthead.js') %]"></script>
-[% END -%]
+[% extra_js = [
+    version('/js/jquery.fixedthead.js')
+] -%]
 [% INCLUDE 'header.html', title = loc('Summary reports'), bodyclass => 'fullwidthpage' %]
 
 <h1>[% loc('All Reports') %]</h1>
diff --git a/templates/web/bristol/footer_extra_js.html b/templates/web/bristol/footer_extra_js.html
index 6ba5e3100..1cfcf00f6 100644
--- a/templates/web/bristol/footer_extra_js.html
+++ b/templates/web/bristol/footer_extra_js.html
@@ -1,4 +1,6 @@
-<script src="[% version('/js/OpenLayers.Projection.OrdnanceSurvey.js') %]"></script>
-<script src="[% version('/cobrands/fixmystreet-uk-councils/js.js') %]"></script>
-<script src="[% version('/cobrands/fixmystreet/assets.js') %]"></script>
-<script src="[% version('/cobrands/bristol/js.js') %]"></script>
+[% scripts.push(
+    version('/js/OpenLayers.Projection.OrdnanceSurvey.js')
+    version('/cobrands/fixmystreet-uk-councils/js.js'),
+    version('/cobrands/fixmystreet/assets.js'),
+    version('/cobrands/bristol/js.js'),
+) %]
diff --git a/templates/web/bristol/maps/bristol.html b/templates/web/bristol/maps/bristol.html
index f49571a1d..08f6fba1c 100644
--- a/templates/web/bristol/maps/bristol.html
+++ b/templates/web/bristol/maps/bristol.html
@@ -1,9 +1,11 @@
-[% map_js = BLOCK %]
-<script type="text/javascript" src="[% version('/js/OpenLayers/OpenLayers.bristol.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/map-OpenLayers.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/map-wmts-base.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/map-wmts-bristol.js') %]"></script>
-[% END %]
+[%
+map_js = [
+    version('/js/OpenLayers/OpenLayers.bristol.js'),
+    version('/js/map-OpenLayers.js'),
+    version('/js/map-wmts-base.js'),
+    version('/js/map-wmts-bristol.js'),
+]
+%]
 
 [% map_html = BLOCK %]
 [% INCLUDE maps/openlayers.html %]
diff --git a/templates/web/bromley/footer_extra_js.html b/templates/web/bromley/footer_extra_js.html
index 57066dbe8..ac03496a8 100644
--- a/templates/web/bromley/footer_extra_js.html
+++ b/templates/web/bromley/footer_extra_js.html
@@ -1 +1,3 @@
-<script src="[% version('/cobrands/bromley/a-z-nav.js') %]" charset="utf-8"></script>
+[% scripts.push(
+    version('/cobrands/bromley/a-z-nav.js'),
+) %]
diff --git a/templates/web/bromley/maps/bromley.html b/templates/web/bromley/maps/bromley.html
index aa5789c1c..c2ee0273f 100644
--- a/templates/web/bromley/maps/bromley.html
+++ b/templates/web/bromley/maps/bromley.html
@@ -1,9 +1,10 @@
-[% map_js = BLOCK %]
-<script type="text/javascript" src="[% version('/js/OpenLayers/OpenLayers.fixmystreet.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/map-OpenLayers.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/map-bing-ol.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/map-fms.js') %]"></script>
-<script type="text/javascript" src="[% version('/cobrands/bromley/map.js') %]"></script>
-[% END %]
-
-[% map_html = INCLUDE maps/openlayers.html include_key = 1 %]
+[%
+map_js = [
+    version('/js/OpenLayers/OpenLayers.fixmystreet.js'),
+    version('/js/map-OpenLayers.js'),
+    version('/js/map-bing-ol.js'),
+    version('/js/map-fms.js'),
+    version('/cobrands/bromley/map.js'),
+];
+map_html = INCLUDE maps/openlayers.html include_key = 1
+%]
diff --git a/templates/web/fixmystreet-uk-councils/footer_extra_js.html b/templates/web/fixmystreet-uk-councils/footer_extra_js.html
index 493902ef0..1e7a38f8a 100644
--- a/templates/web/fixmystreet-uk-councils/footer_extra_js.html
+++ b/templates/web/fixmystreet-uk-councils/footer_extra_js.html
@@ -1,2 +1,4 @@
-<script src="[% version('/js/OpenLayers.Projection.OrdnanceSurvey.js') %]"></script>
-<script src="[% version('/cobrands/fixmystreet-uk-councils/js.js') %]"></script>
+[% scripts.push(
+    version('/js/OpenLayers.Projection.OrdnanceSurvey.js')
+    version('/cobrands/fixmystreet-uk-councils/js.js'),
+) %]
diff --git a/templates/web/fixmystreet.com/about/posters.html b/templates/web/fixmystreet.com/about/posters.html
index 1a9a4400c..c4cf16cd4 100644
--- a/templates/web/fixmystreet.com/about/posters.html
+++ b/templates/web/fixmystreet.com/about/posters.html
@@ -1,6 +1,6 @@
-[% extra_js = BLOCK %]
-    <script src="[% version('/cobrands/fixmystreet.com/posters.js') %]"></script>
-[% END %]
+[% extra_js = [
+    version('/cobrands/fixmystreet.com/posters.js')
+] %]
 [% extra_css = BLOCK %]
     <link rel="stylesheet" href="[% version('/cobrands/fixmystreet.com/posters.css') %]">
 [% END %]
diff --git a/templates/web/fixmystreet.com/footer_extra_js.html b/templates/web/fixmystreet.com/footer_extra_js.html
index 0d1cca04d..d03aa8657 100644
--- a/templates/web/fixmystreet.com/footer_extra_js.html
+++ b/templates/web/fixmystreet.com/footer_extra_js.html
@@ -1,3 +1,5 @@
-<script src="[% version('/js/OpenLayers.Projection.OrdnanceSurvey.js') %]"></script>
-<script src="[% version('/js/jquery.cookie.min.js') %]"></script>
-<script src="[% version('/cobrands/fixmystreet.com/js.js') %]"></script>
+[% scripts.push(
+    version('/js/OpenLayers.Projection.OrdnanceSurvey.js'),
+    version('/js/jquery.cookie.min.js'),
+    version('/cobrands/fixmystreet.com/js.js'),
+) %]
diff --git a/templates/web/fixmystreet.com/front/javascript.html b/templates/web/fixmystreet.com/front/javascript.html
index ac9faa309..baf7ebb64 100644
--- a/templates/web/fixmystreet.com/front/javascript.html
+++ b/templates/web/fixmystreet.com/front/javascript.html
@@ -1,7 +1,12 @@
-<script src="[% version('/js/yepnope.js') %]"></script>
-<script id="script_front" src="[% version('/cobrands/fixmystreet/front.js') %]"
-    data-scripts="
-        [%~ version('/js/OpenLayers/OpenLayers.fixmystreet.js') %],
-        [%~ version('/js/map-OpenLayers.js') %],
-        [%~ version('/js/map-bing-ol.js') %],
-        [%~ version('/js/map-fms.js') %]"></script>
+[%
+map_js = [
+    version('/js/yepnope.js'),
+    [ version('/cobrands/fixmystreet/front.js'), {
+        id = "script_front",
+        'data-scripts' = version('/js/OpenLayers/OpenLayers.fixmystreet.js') _ ',' _ 
+            version('/js/map-OpenLayers.js') _ ',' _
+            version('/js/map-bing-ol.js') _ ',' _
+            version('/js/map-fms.js')
+    } ],
+]
+%]
diff --git a/templates/web/oxfordshire/header.html b/templates/web/oxfordshire/header.html
index 042222e1d..d8cb8d4bb 100644
--- a/templates/web/oxfordshire/header.html
+++ b/templates/web/oxfordshire/header.html
@@ -2,7 +2,10 @@
 <!--[if IE 7]>   <html class="no-js ie7 iel8" lang="[% lang_code %]"><![endif]-->
 <!--[if IE 8]>   <html class="no-js ie8 iel8" lang="[% lang_code %]"><![endif]-->
 <!--[if IE 9]>   <html class="no-js ie9" lang="[% lang_code %]"><![endif]-->
-<!--[if gt IE 9]><!--><html class="no-js" lang="[% lang_code %]"><!--<![endif]-->
+<!--[if gt IE 9]><!--><html class="no-js" lang="[% lang_code %]"
+[% IF appcache ~%]
+ manifest="/offline/appcache.manifest"
+[%~ END %]><!--<![endif]-->
     <head>
         <meta name="viewport" content="initial-scale=1.0">
 
diff --git a/templates/web/zurich/maps/zurich.html b/templates/web/zurich/maps/zurich.html
index 2f21c91a6..f85be4aef 100644
--- a/templates/web/zurich/maps/zurich.html
+++ b/templates/web/zurich/maps/zurich.html
@@ -1,10 +1,12 @@
-[% map_js = BLOCK %]
-<script type="text/javascript" src="[% version('/js/OpenLayers.2.11.zurich.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/OpenLayers.Projection.CH1903Plus.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/map-OpenLayers.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/map-wmts-base.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/map-wmts-zurich.js') %]"></script>
-[% END %]
+[%
+map_js = [
+    version('/js/OpenLayers.2.11.zurich.js'),
+    version('/js/OpenLayers.Projection.CH1903Plus.js'),
+    version('/js/map-OpenLayers.js'),
+    version('/js/map-wmts-base.js'),
+    version('/js/map-wmts-zurich.js'),
+]
+%]
 
 [% map_sub_links = BLOCK %]
     <a class="hidden-nojs" id="map_layer_toggle" href="">Stadtplan</a>
diff --git a/web/cobrands/fixmystreet/offline.js b/web/cobrands/fixmystreet/offline.js
new file mode 100644
index 000000000..4b3373029
--- /dev/null
+++ b/web/cobrands/fixmystreet/offline.js
@@ -0,0 +1,5 @@
+if (!$('#offline_list').length) {
+    if (window.applicationCache && window.localStorage) {
+        $(document.body).prepend('<iframe src="/offline/appcache" style="position:absolute;top:-999em;visibility:hidden"></iframe>');
+    }
+}