kosamari · March 8, 2026 20:01 · Mar 16, 2018 · Nov 22, 2016 · Nov 22, 2016 · Jun 21, 2016
diff --git a/_ServiceWorker_for_github_pages.md b/_ServiceWorker_for_github_pages.md
@@ -11,7 +11,7 @@ Make sure your github pages have HTTPS enforced, you can check `Settings > GitHu
 Persoanl github pages are all hosted under one root domain (`https://[username].github.io/`).  This caused some stumblings...
 
 - When deleting outdated caches for the app, `caches.keys()` returns all the caches under the domain. We need to filter and delete only caches associated with the app.
-- Path for ServiceWorker shoudld be specified in absolute path
+- Path for ServiceWorker should be specified in absolute path
 - the last '/' in URL is important. See following section "When is SwerviceWorker summoned"
 
 ## When is ServiceWorker summoned ?

diff --git a/_ServiceWorker_for_github_pages.md b/_ServiceWorker_for_github_pages.md
@@ -14,7 +14,7 @@ Persoanl github pages are all hosted under one root domain (`https://[username].
 - Path for ServiceWorker shoudld be specified in absolute path
 - the last '/' in URL is important. See following section "When is SwerviceWorker summoned"
 
-## When is SwerviceWorker summoned ?
+## When is ServiceWorker summoned ?
 In this example ServiceWorker is present to every page under `https://{guthub_username}.github.io/{repository}/`, but not `https://{guthub_username}.github.io/{repository}`. Notice any difference? that's right, __the trailing__  `/`
 
 Assuming you have `index.html` at the root of your repository, a visitor may access `/{repository}` or `/{repository}/` to get same `index.html`. This is bad practice in general and one should redirect to the other (or that's what [Jake said](https://twitter.com/jaffathecake/status/800966521015205888)), but most importantly when a visitor is seeing `index.html` from  `/{repository}` (no '/' at the end), ServiceWorker __will not__ be present on the page. 

diff --git a/_ServiceWorker_for_github_pages.md b/_ServiceWorker_for_github_pages.md
@@ -12,3 +12,13 @@ Persoanl github pages are all hosted under one root domain (`https://[username].
 
 - When deleting outdated caches for the app, `caches.keys()` returns all the caches under the domain. We need to filter and delete only caches associated with the app.
 - Path for ServiceWorker shoudld be specified in absolute path
+- the last '/' in URL is important. See following section "When is SwerviceWorker summoned"
+
+## When is SwerviceWorker summoned ?
+In this example ServiceWorker is present to every page under `https://{guthub_username}.github.io/{repository}/`, but not `https://{guthub_username}.github.io/{repository}`. Notice any difference? that's right, __the trailing__  `/`
+
+Assuming you have `index.html` at the root of your repository, a visitor may access `/{repository}` or `/{repository}/` to get same `index.html`. This is bad practice in general and one should redirect to the other (or that's what [Jake said](https://twitter.com/jaffathecake/status/800966521015205888)), but most importantly when a visitor is seeing `index.html` from  `/{repository}` (no '/' at the end), ServiceWorker __will not__ be present on the page. 
+
+Just in case your server doesn't handle trailing `/`, I have `<link rel="canonical" href="https://{guthub_username}.github.io/{repository}/" />` in my index.html header *1.
+
+*1 I mean ... I don't know why I had `link rel="canonical"` in my code. I do remember having issue with trailing `/` thought ! So it's the only reason I can think of me wanting to use unfamiliar thing like canonical ¯\_(ツ)_/¯
diff --git a/index.html b/index.html
@@ -2,6 +2,7 @@
 <html>
 <head>
     <title>Title</title>
+    <link rel="canonical" href="https://{guthub_username}.github.io/{repository}/" />
     <style type="text/css">
     /* --- application CSS here --- */
     *{
@@ -15,7 +16,7 @@ <h1>Content</h1>
   <script>
   // register ServiceWorker, remember to use absolute path!
   if (navigator.serviceWorker) {
-    navigator.serviceWorker.register('/[repository]/sw.js', {scope: '/[repository]/'})
+    navigator.serviceWorker.register('/{repository}/sw.js', {scope: '/{repository}/'})
   }
 
   // --- Application code here ---

diff --git a/sw.js b/sw.js
@@ -2,8 +2,8 @@ var APP_PREFIX = 'ApplicationName_'     // Identifier for this app (this needs t
 var VERSION = 'version_01'              // Version of the off-line cache (change this value everytime you want to update cache)
 var CACHE_NAME = APP_PREFIX + VERSION
 var URLS = [                            // Add URL you want to cache in this list.
-  '/[repository]/',                     // If you have separate JS/CSS files,
-  '/[repository]/index.html'            // add path to those files here
+  '/{repository}/',                     // If you have separate JS/CSS files,
+  '/{repository}/index.html'            // add path to those files here
 ]
 
 // Respond with cached resources

diff --git a/sw.js b/sw.js
@@ -19,7 +19,7 @@ self.addEventListener('fetch', function (e) {
         return fetch(e.request)
       }
 
-      // You can omit if/else for console.log & put one line below here too.
+      // You can omit if/else for console.log & put one line below like this too.
       // return request || fetch(e.request)
     })
   )

diff --git a/sw.js b/sw.js
@@ -9,13 +9,20 @@ var URLS = [                            // Add URL you want to cache in this lis
 // Respond with cached resources
 self.addEventListener('fetch', function (e) {
   console.log('fetch request : ' + e.request.url)
-  var url = new URL(e.request.url)
-  if (URLS.indexOf(url.pathname) === -1) {
-    console.log('file is not cached : ' + e.request.url)
-    return
-  }
-  console.log('responding with cache : ' + e.request.url)
-  e.respondWith(caches.match(e.request))
+  e.respondWith(
+    caches.match(e.request).then(function (request) {
+      if (request) { // if cache is available, respond with cache
+        console.log('responding with cache : ' + e.request.url)
+        return request
+      } else {       // if there are no cache, try fetching request
+        console.log('file is not cached, fetching : ' + e.request.url)
+        return fetch(e.request)
+      }
+
+      // You can omit if/else for console.log & put one line below here too.
+      // return request || fetch(e.request)
+    })
+  )
 })
 
 // Cache resources

diff --git a/sw.js b/sw.js
@@ -1,5 +1,5 @@
-var APP_PREFIX = 'ApplicationName_'     // Identifier for this app (this needs to be consistent)
-var VERSION = 'version_01'              // Version of the off-line cache (change this everytime you want to update cache)
+var APP_PREFIX = 'ApplicationName_'     // Identifier for this app (this needs to be consistent across every cache update)
+var VERSION = 'version_01'              // Version of the off-line cache (change this value everytime you want to update cache)
 var CACHE_NAME = APP_PREFIX + VERSION
 var URLS = [                            // Add URL you want to cache in this list.
   '/[repository]/',                     // If you have separate JS/CSS files,

diff --git a/_ServiceWorker_for_github_pages.md b/_ServiceWorker_for_github_pages.md
@@ -3,7 +3,7 @@ This is a ServiceWorker template to turn small github pages into offline ready a
 
 ## Why ?
 Whenever I make small tools & toys, I create github repo and make a demo page using github pages (like [this one](https://kosamari.github.io/translucent/)).  
-Often these "apps" are just an `index.html` file with all the nessesary CSS and JavaScript in it.  I wanted to cache this html file so that I can access my tools offline as well.
+Often these "apps" are just an `index.html` file with all the nessesary CSS and JavaScript in it (or maybe 2-3 `html/css/js` files).  I wanted to cache these files so that I can access my tools offline as well.
 
 ## Notes
 Make sure your github pages have HTTPS enforced, you can check `Settings > GitHub Pages > Enforce HTTPS` of your repository.

diff --git a/sw.js b/sw.js
@@ -1,5 +1,5 @@
-var APP_PREFIX = 'ApplicationName_'     // Identifier for this app
-var VERSION = 'version_01'              // Version of the off-line cache
+var APP_PREFIX = 'ApplicationName_'     // Identifier for this app (this needs to be consistent)
+var VERSION = 'version_01'              // Version of the off-line cache (change this everytime you want to update cache)
 var CACHE_NAME = APP_PREFIX + VERSION
 var URLS = [                            // Add URL you want to cache in this list.
   '/[repository]/',                     // If you have separate JS/CSS files,

diff --git a/_ServiceWorker_for_github_pages.md b/_ServiceWorker_for_github_pages.md
@@ -8,7 +8,7 @@ Often these "apps" are just an `index.html` file with all the nessesary CSS and
 ## Notes
 Make sure your github pages have HTTPS enforced, you can check `Settings > GitHub Pages > Enforce HTTPS` of your repository.
 
-Persoanl github pages are hosted under one root domain (`https://[username].github.io/[repository]`).  This caused some stumblings...
+Persoanl github pages are all hosted under one root domain (`https://[username].github.io/`).  This caused some stumblings...
 
 - When deleting outdated caches for the app, `caches.keys()` returns all the caches under the domain. We need to filter and delete only caches associated with the app.
 - Path for ServiceWorker shoudld be specified in absolute path
diff --git a/sw.js b/sw.js
@@ -2,7 +2,7 @@ var APP_PREFIX = 'ApplicationName_'     // Identifier for this app
 var VERSION = 'version_01'              // Version of the off-line cache
 var CACHE_NAME = APP_PREFIX + VERSION
 var URLS = [                            // Add URL you want to cache in this list.
-  '/[repository]/',                     // If you have external JS/CSS files,
+  '/[repository]/',                     // If you have separate JS/CSS files,
   '/[repository]/index.html'            // add path to those files here
 ]
 
@@ -31,7 +31,7 @@ self.addEventListener('install', function (e) {
 // Delete outdated caches
 self.addEventListener('activate', function (e) {
   e.waitUntil(
-    caches.keys().then(function(keyList) {
+    caches.keys().then(function (keyList) {
       // `keyList` contains all cache names under your username.github.io
       // filter out ones that has this app prefix to create white list
       var cacheWhitelist = keyList.filter(function (key) {

diff --git a/ServiceWorker_for_github_pages.md → _ServiceWorker_for_github_pages.md b/ServiceWorker_for_github_pages.md → _ServiceWorker_for_github_pages.md
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
 <head>
     <title>Title</title>
     <style type="text/css">
-    /* CSS goes here*/
+    /* --- application CSS here --- */
     *{
       background-color: #F5F4F0;
       font-family: Georgia, serif;
@@ -18,7 +18,7 @@ <h1>Content</h1>
     navigator.serviceWorker.register('/[repository]/sw.js', {scope: '/[repository]/'})
   }
 
-  // --- Application code goes here ---
+  // --- Application code here ---
   </script>
 </body>
 </html>
diff --git a/sw.js b/sw.js
@@ -1,7 +1,7 @@
-var APP_PREFIX = 'ApplicationName_'    // Identifier for this app
-var VERSION = 'version_01'             // Version of the off-line cache
+var APP_PREFIX = 'ApplicationName_'     // Identifier for this app
+var VERSION = 'version_01'              // Version of the off-line cache
 var CACHE_NAME = APP_PREFIX + VERSION
-var URLS = [                           // Add URL you want to cache in this list.
+var URLS = [                            // Add URL you want to cache in this list.
   '/[repository]/',                     // If you have external JS/CSS files,
   '/[repository]/index.html'            // add path to those files here
 ]

diff --git a/README.md → ServiceWorker_for_github_pages.md b/README.md → ServiceWorker_for_github_pages.md
diff --git a/README.md b/README.md
@@ -6,9 +6,9 @@ Whenever I make small tools & toys, I create github repo and make a demo page us
 Often these "apps" are just an `index.html` file with all the nessesary CSS and JavaScript in it.  I wanted to cache this html file so that I can access my tools offline as well.
 
 ## Notes
-Make sure your github pages has HTTPS enforced, you can check `Settings > GitHub Pages > Enforce HTTPS` of your repository.
+Make sure your github pages have HTTPS enforced, you can check `Settings > GitHub Pages > Enforce HTTPS` of your repository.
 
-Persoanl github pages are hosted under one root domain (i.e `https://kosamari.github.io/[repository]`).  This caused some stumblings...
+Persoanl github pages are hosted under one root domain (`https://[username].github.io/[repository]`).  This caused some stumblings...
 
 - When deleting outdated caches for the app, `caches.keys()` returns all the caches under the domain. We need to filter and delete only caches associated with the app.
 - Path for ServiceWorker shoudld be specified in absolute path
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 This is a ServiceWorker template to turn small github pages into offline ready app.
 
 ## Why ?
-Whenever I make small tools & toys, I create github repo and make a demo page using github pages. (like [this one](https://kosamari.github.io/translucent/))  
+Whenever I make small tools & toys, I create github repo and make a demo page using github pages (like [this one](https://kosamari.github.io/translucent/)).  
 Often these "apps" are just an `index.html` file with all the nessesary CSS and JavaScript in it.  I wanted to cache this html file so that I can access my tools offline as well.
 
 ## Notes

diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ Often these "apps" are just an `index.html` file with all the nessesary CSS and
 ## Notes
 Make sure your github pages has HTTPS enforced, you can check `Settings > GitHub Pages > Enforce HTTPS` of your repository.
 
-Persoanl github pages are hosted under one root domain (i.e `https://kosamari.github.io/[name of repo]`).  This caused some stumblings...
+Persoanl github pages are hosted under one root domain (i.e `https://kosamari.github.io/[repository]`).  This caused some stumblings...
 
 - When deleting outdated caches for the app, `caches.keys()` returns all the caches under the domain. We need to filter and delete only caches associated with the app.
 - Path for ServiceWorker shoudld be specified in absolute path
diff --git a/index.html b/index.html
@@ -15,7 +15,7 @@ <h1>Content</h1>
   <script>
   // register ServiceWorker, remember to use absolute path!
   if (navigator.serviceWorker) {
-    navigator.serviceWorker.register('/[repo name]/sw.js', {scope: '/[repo name]/'})
+    navigator.serviceWorker.register('/[repository]/sw.js', {scope: '/[repository]/'})
   }
 
   // --- Application code goes here ---

diff --git a/sw.js b/sw.js
@@ -2,8 +2,8 @@ var APP_PREFIX = 'ApplicationName_'    // Identifier for this app
 var VERSION = 'version_01'             // Version of the off-line cache
 var CACHE_NAME = APP_PREFIX + VERSION
 var URLS = [                           // Add URL you want to cache in this list.
-  '/translucent/',                     // If you have external JS/CSS files,
-  '/translucent/index.html'            // add path to those files here
+  '/[repository]/',                     // If you have external JS/CSS files,
+  '/[repository]/index.html'            // add path to those files here
 ]
 
 // Respond with cached resources

diff --git a/README.md b/README.md
@@ -1,11 +1,13 @@
 # ServiceWorker for github pages
 This is a ServiceWorker template to turn small github pages into offline ready app.
 
-## why ?
-Whenever I make make simple tools and toys, I create github repo and make a demo page using github pages. (like [this](https://kosamari.github.io/translucent/))  
-Often these "app" are single `index.html` with all the nessesary CSS and JavaScript in it.  I wanted to cache these html files so that I can access my tools offline as well.
+## Why ?
+Whenever I make small tools & toys, I create github repo and make a demo page using github pages. (like [this one](https://kosamari.github.io/translucent/))  
+Often these "apps" are just an `index.html` file with all the nessesary CSS and JavaScript in it.  I wanted to cache this html file so that I can access my tools offline as well.
 
 ## Notes
+Make sure your github pages has HTTPS enforced, you can check `Settings > GitHub Pages > Enforce HTTPS` of your repository.
+
 Persoanl github pages are hosted under one root domain (i.e `https://kosamari.github.io/[name of repo]`).  This caused some stumblings...
 
 - When deleting outdated caches for the app, `caches.keys()` returns all the caches under the domain. We need to filter and delete only caches associated with the app.

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# ServiceWorker for guthub pages
+# ServiceWorker for github pages
 This is a ServiceWorker template to turn small github pages into offline ready app.
 
 ## why ?

diff --git a/README.md b/README.md
@@ -1,7 +1,12 @@
 # ServiceWorker for guthub pages
-======
-This is a template to turn small github pages into offline ready app.
+This is a ServiceWorker template to turn small github pages into offline ready app.
 
 ## why ?
-When ever I make make simple tools and toys, I create github repo and make demo page using github pages. (like [this](https://kosamari.github.io/translucent/))
-Often these "app" are single `index.html` file with all the CSS and JS nessesary in it. Something I would like to access offline
+Whenever I make make simple tools and toys, I create github repo and make a demo page using github pages. (like [this](https://kosamari.github.io/translucent/))  
+Often these "app" are single `index.html` with all the nessesary CSS and JavaScript in it.  I wanted to cache these html files so that I can access my tools offline as well.
+
+## Notes
+Persoanl github pages are hosted under one root domain (i.e `https://kosamari.github.io/[name of repo]`).  This caused some stumblings...
+
+- When deleting outdated caches for the app, `caches.keys()` returns all the caches under the domain. We need to filter and delete only caches associated with the app.
+- Path for ServiceWorker shoudld be specified in absolute path
diff --git a/index.html b/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Title</title>
+    <style type="text/css">
+    /* CSS goes here*/
+    *{
+      background-color: #F5F4F0;
+      font-family: Georgia, serif;
+    }
+    </style>
+</head>
+<body>
+  <h1>Content</h1>
+  <script>
+  // register ServiceWorker, remember to use absolute path!
+  if (navigator.serviceWorker) {
+    navigator.serviceWorker.register('/[repo name]/sw.js', {scope: '/[repo name]/'})
+  }
+
+  // --- Application code goes here ---
+  </script>
+</body>
+</html>
diff --git a/sw.js b/sw.js
@@ -0,0 +1,51 @@
+var APP_PREFIX = 'ApplicationName_'    // Identifier for this app
+var VERSION = 'version_01'             // Version of the off-line cache
+var CACHE_NAME = APP_PREFIX + VERSION
+var URLS = [                           // Add URL you want to cache in this list.
+  '/translucent/',                     // If you have external JS/CSS files,
+  '/translucent/index.html'            // add path to those files here
+]
+
+// Respond with cached resources
+self.addEventListener('fetch', function (e) {
+  console.log('fetch request : ' + e.request.url)
+  var url = new URL(e.request.url)
+  if (URLS.indexOf(url.pathname) === -1) {
+    console.log('file is not cached : ' + e.request.url)
+    return
+  }
+  console.log('responding with cache : ' + e.request.url)
+  e.respondWith(caches.match(e.request))
+})
+
+// Cache resources
+self.addEventListener('install', function (e) {
+  e.waitUntil(
+    caches.open(CACHE_NAME).then(function (cache) {
+      console.log('installing cache : ' + CACHE_NAME)
+      return cache.addAll(URLS)
+    })
+  )
+})
+
+// Delete outdated caches
+self.addEventListener('activate', function (e) {
+  e.waitUntil(
+    caches.keys().then(function(keyList) {
+      // `keyList` contains all cache names under your username.github.io
+      // filter out ones that has this app prefix to create white list
+      var cacheWhitelist = keyList.filter(function (key) {
+        return key.indexOf(APP_PREFIX)
+      })
+      // add current cache name to white list
+      cacheWhitelist.push(CACHE_NAME)
+
+      return Promise.all(keyList.map(function (key, i) {
+        if (cacheWhitelist.indexOf(key) === -1) {
+          console.log('deleting cache : ' + keyList[i] )
+          return caches.delete(keyList[i])
+        }
+      }))
+    })
+  )
+})
diff --git a/README.md b/README.md
@@ -0,0 +1,7 @@
+# ServiceWorker for guthub pages
+======
+This is a template to turn small github pages into offline ready app.
+
+## why ?
+When ever I make make simple tools and toys, I create github repo and make demo page using github pages. (like [this](https://kosamari.github.io/translucent/))
+Often these "app" are single `index.html` file with all the CSS and JS nessesary in it. Something I would like to access offline
No results found