feat: init Service Worker support

Gruntfile.coffee

@@ -1,4 +1,8 @@
 "use strict"
+
+path = require("path")
+swPrecache = require("sw-precache")
+
 module.exports = (grunt) ->
 
   # Load all grunt tasks
@@ -15,6 +19,21 @@ module.exports = (grunt) ->
   # Get deploy target, see `_deploy.yml` for more info
   deploy_env = grunt.option("env") or "default"
 
+  writeServiceWorkerFile = (cacheId, rootDir, destDir, handleFetch, callback) ->
+    config =
+      cacheId: cacheId
+      handleFetch: handleFetch
+      logger: grunt.log.writeln
+      staticFileGlobs: [
+        rootDir + "/**/css/**.css"
+        rootDir + "/**/**.html"
+        rootDir + "/**/img/**.*"
+        rootDir + "/**/js/**.js"
+      ]
+      stripPrefix: rootDir
+      verbose: true
+    swPrecache.write path.join(destDir, "service-worker.js"), config, callback
+
   # Project configurations
   grunt.initConfig
     config:
@@ -41,6 +60,13 @@ module.exports = (grunt) ->
         new_name: grunt.option("theme") or "<%= amsf.theme.current %>"
         new_url: grunt.option("url") or "<%= amsf.theme.current_url %>"
 
+    swPrecache:
+      dev:
+        handleFetch: true
+        cacheId: "<%= config.pkg.name %>"
+        rootDir: "<%= config.dist %>"
+        destDir: "<%= config.dist %><%= config.base %>"
+
     coffeelint:
       options:
         indentation: 2
@@ -583,6 +609,17 @@ module.exports = (grunt) ->
         push: false
 
   # Custom tasks
+  grunt.registerMultiTask "swPrecache", ->
+    done = @async()
+    cacheId = @data.cacheId
+    rootDir = @data.rootDir
+    destDir = @data.destDir
+    handleFetch = @data.handleFetch
+    writeServiceWorkerFile cacheId, rootDir, destDir, handleFetch, (error) ->
+      if error
+        grunt.fail.warn error
+      done()
+
   grunt.registerTask "amsf-func-mkdir", "Initialize AMSF working directory", ->
     grunt.file.mkdir '.amsf-cache'
 
@@ -690,6 +727,7 @@ module.exports = (grunt) ->
     "uncss_inline"
     "cacheBust"
     "concurrent:dist"
+    "swPrecache"
     "cleanempty"
   ]
 

_app/_includes/themes/curtana/includes/footer.html

@@ -19,7 +19,10 @@
   </footer>
 {% endif %}
 
-<!-- The following code is an example use of including external JavaScript libraries -->
+<!-- Theme scripts -->
+<script src="{{ '/js/app.js?assets-inline' | prepend: amsf_theme_assets }}"></script>
+
+<!-- Lightense Images -->
 {% if page.plugin == 'lightense' %}
   <script src="{{ '/js/lightense.js?assets-inline' | prepend: amsf_theme_assets }}"></script>
   <script>
@@ -30,8 +33,18 @@
   </script>
 {% endif %}
 
-<!-- Theme scripts -->
-<script src="{{ '/js/app.js?assets-inline' | prepend: amsf_theme_assets }}"></script>
+<!-- Service Worker  -->
+{% if site.sw == true and site.dev == false %}
+  <script>
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('{{ "/service-worker.js" | prepend: site.base }}').then(function (registration) {
+        console.log('ServiceWorker registration successful with scope: ', registration.scope);
+      }).catch(function(err) {
+        console.log('ServiceWorker registration failed: ', err);
+      });
+    }
+  </script>
+{% endif %}
 
 <!-- User custom scripts -->
 <script src="{{ '/js/user.js?assets-inline' | prepend: amsf_user_assets }}"></script>

_config.init.yml

@@ -118,6 +118,11 @@ download:       https://d1bmx7s6749k4k.cloudfront.net
 # Default       #ff00b4
 primary_color:  '#ff00b4'
 
+# Service Worker Precache support
+# Service Worker does not work on HTTP
+# Default       true
+sw:             true
+
 # Google Analytics tracking code
 google_analytics:
   enabled:      false

_config.yml

@@ -118,6 +118,11 @@ download:       https://d1bmx7s6749k4k.cloudfront.net
 # Default       #ff00b4
 primary_color:  '#ff00b4'
 
+# Service Worker Precache support
+# Service Worker does not work on HTTP
+# Default       true
+sw:             true
+
 # Google Analytics tracking code
 google_analytics:
   enabled:      false

package.json

@@ -58,6 +58,7 @@
     "grunt-uncss-inline": "^1.0.5",
     "grunt-xmlmin": "^0.1.8",
     "jit-grunt": "^0.10.0",
+    "sw-precache": "^4.3.0",
     "time-grunt": "^1.4.0"
   }
 }

s3_website.example.yml

@@ -8,7 +8,9 @@ site: .
 cache_control:
   "*.json":  no-cache, no-store
 max_age:
-  "*.xml":   15
+  "*/service-worker.js": 60
+  "*.html":  1800
+  "*.xml":   1800
   "*.css":   2592000
   "*.js":    2592000
   "*": 86400