giflw · January 22, 2023 19:02
diff --git a/_ServiceWorker_for_github_pages.md b/_ServiceWorker_for_github_pages.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
    <title>Title</title>
    <link rel="canonical" href="https://{guthub_username}.github.io/{repository}/" />
    <style type="text/css">
    /* --- application CSS 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('/{repository}/sw.js', {scope: '/{repository}/'})
  }
  
  // --- Application code here ---
  </script>
 </body>
 </html>
diff --git a/sw.js b/sw.js
 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,
  '/{repository}/index.html'            // add path to those files here
 ]

 // Respond with cached resources
 self.addEventListener('fetch', function (e) {
  console.log('fetch request : ' + e.request.url)
  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 like this too.
      // return request || fetch(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])
        }
      }))
    })
  )
 })
	<!DOCTYPE html>
	<html>
	<head>
	<title>Title</title>
	<link rel="canonical" href="https://{guthub_username}.github.io/{repository}/" />
	<style type="text/css">
	/* --- application CSS 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('/{repository}/sw.js', {scope: '/{repository}/'})
	}

	// --- Application code here ---
	</script>
	</body>
	</html>
	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,
	'/{repository}/index.html' // add path to those files here
	]

	// Respond with cached resources
	self.addEventListener('fetch', function (e) {
	console.log('fetch request : ' + e.request.url)
	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 like this too.
	// return request \|\| fetch(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])
	}
	}))
	})
	)
	})