Fixing up sw-precache watch task to update on changes to layouts and views. Adding noscript support and including comment on request animation frame

Author: Matt Gaunt

gulp-tasks/service-worker.js

@@ -25,19 +25,32 @@ var packageName = JSON.parse(fs.readFileSync('./package.json', 'utf8')).name;
 
 gulp.task('service-worker:watch', function(cb) {
   gulp.watch(GLOBAL.config.src + '/**/*.*', ['service-worker']);
+  gulp.watch(GLOBAL.config.src + '/../server/layouts/**/*.*',
+    ['service-worker']);
+  gulp.watch(GLOBAL.config.src + '/../server/views/**/*.*',
+    ['service-worker']);
 });
 
 gulp.task('service-worker', function(cb) {
   swPrecache.write(path.join(GLOBAL.config.dest, 'sw.js'), {
     staticFileGlobs: [
       GLOBAL.config.dest + '/**/*.{js,html,css,png,jpg,jpeg,gif,svg}',
-      GLOBAL.config.dest + '/manifest.json',
+      GLOBAL.config.dest + '/manifest.json'
     ],
     dynamicUrlToDependencies: {
       '/app-shell': ['server/layouts/app-shell.handlebars'],
-      '/partials/': ['server/layouts/partial.handlebars', 'server/views/index.handlebars'],
-      '/partials/url-1': ['server/layouts/partial.handlebars', 'server/views/url-1.handlebars'],
-      '/partials/url-2': ['server/layouts/partial.handlebars', 'server/views/url-2.handlebars'],
+      '/partials/': [
+        'server/layouts/partial.handlebars',
+        'server/views/index.handlebars'
+      ],
+      '/partials/url-1': [
+        'server/layouts/partial.handlebars',
+        'server/views/url-1.handlebars'
+      ],
+      '/partials/url-2': [
+        'server/layouts/partial.handlebars',
+        'server/views/url-2.handlebars'
+      ]
     },
     stripPrefix: GLOBAL.config.dest,
     navigateFallback: '/app-shell',

server/layouts/app-shell.handlebars

@@ -118,19 +118,10 @@ limitations under the License.
       {{~/each}}
     ];
 
-    // <3 to Paul Irish
-    // http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
-    var requestAnimFrame = (function(){
-      return  window.requestAnimationFrame       ||
-          window.webkitRequestAnimationFrame ||
-          window.mozRequestAnimationFrame    ||
-          function( callback ){
-            window.setTimeout(callback, 1000 / 60);
-          };
-    })();
-
     // Asynchronously load CSS with a Request Animation Frame
-    requestAnimFrame(function() {
+    // For older browser support see this for a simple shim
+    // http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
+    window.requestAnimationFrame(function() {
       var elementToInsertLinkBefore =
         document.getElementsByTagName('script')[0];
       for (var i = 0; i < remoteStyles.length; i++) {
@@ -144,8 +135,15 @@ limitations under the License.
       }
     });
   </script>
+
+  <!-- In case the browser has JS disabled -->
+  <noscript>
+    {{#each remoteStyles}}
+    <link href="{{this}}" rel="stylesheet" property="stylesheet" media="all">
+    {{~/each}}
+  </noscript>
   {{~/if}}
-  
+
   {{#each remoteScripts}}
   <script src="{{this}}" async></script>
   {{~/each}}

server/layouts/default.handlebars

@@ -63,38 +63,36 @@ limitations under the License.
 
   {{#if remoteStyles}}
   <script>
-    var remoteStyles = [
-      {{#each remoteStyles}}
-      '{{this}}',
-      {{~/each}}
-    ];
-
-    // <3 to Paul Irish
-    // http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
-    var requestAnimFrame = (function(){
-      return  window.requestAnimationFrame       ||
-          window.webkitRequestAnimationFrame ||
-          window.mozRequestAnimationFrame    ||
-          function( callback ){
-            window.setTimeout(callback, 1000 / 60);
-          };
-    })();
-
-    // Asynchronously load CSS with a Request Animation Frame
-    requestAnimFrame(function() {
-      var elementToInsertLinkBefore =
-        document.getElementsByTagName('script')[0];
-      for (var i = 0; i < remoteStyles.length; i++) {
-        var linkElement = document.createElement('link');
-        linkElement.rel = 'stylesheet';
-        linkElement.media = 'all';
-        linkElement.href = remoteStyles[i];
-
-        elementToInsertLinkBefore.parentNode.insertBefore(linkElement,
-          elementToInsertLinkBefore);
-      }
-    });
+  var remoteStyles = [
+    {{#each remoteStyles}}
+    '{{this}}',
+    {{~/each}}
+  ];
+
+  // Asynchronously load CSS with a Request Animation Frame
+  // For older browser support see this for a simple shim
+  // http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
+  window.requestAnimationFrame(function() {
+    var elementToInsertLinkBefore =
+      document.getElementsByTagName('script')[0];
+    for (var i = 0; i < remoteStyles.length; i++) {
+      var linkElement = document.createElement('link');
+      linkElement.rel = 'stylesheet';
+      linkElement.media = 'all';
+      linkElement.href = remoteStyles[i];
+
+      elementToInsertLinkBefore.parentNode.insertBefore(linkElement,
+        elementToInsertLinkBefore);
+    }
+  });
   </script>
+
+  <!-- In case the browser has JS disabled -->
+  <noscript>
+    {{#each remoteStyles}}
+    <link href="{{this}}" rel="stylesheet" property="stylesheet" media="all">
+    {{~/each}}
+  </noscript>
   {{~/if}}
 
   {{#each remoteScripts}}