Fixed PWA feature to be used with GitHub pages

manifest.json

@@ -18,5 +18,6 @@
  "prefer_related_applications": false,
  "name": "Jum'ah Khutbah",
  "short_name": "Khutbah",
- "start_url": "./"
+ "orientation": "portrait-primary",
+ "start_url": "/jummah-khutbah/"
 }

myscript.js

@@ -18,6 +18,6 @@ $(document).ready(function(){
 
 window.addEventListener("load", () => {
  if ("serviceWorker" in navigator) {
- navigator.serviceWorker.register("sw.js");
+ navigator.serviceWorker.register("/jummah-khutbah/sw.js");
  }
 });

sw.js

@@ -1,29 +1,55 @@
-var version = 1.0;
+const version = 2.0;
+const cacheName = 'khutbah-cache-v' + version;
 self.addEventListener('install', function(e) {
  e.waitUntil(
- caches.open('khutbah-off-v' + version).then(function(cache) {
+ caches.open(cacheName).then(function(cache) {
  return cache.addAll([
- './',
- './assets',
- './index.html',
- './myscript.js',
- './sw.js',
- './assets/jquery-3.1.0.js',
- './style.css',
- './manifest.json',
- './assets/icon_192.png',
- './assets/icon_512.png',
- './assets/al-qalam-quran-majeed.ttf',
- './assets/PatuaOne-Regular.ttf'
+ '/jummah-khutbah/',
+ '/jummah-khutbah/assets/',
+ '/jummah-khutbah/index.html',
+ '/jummah-khutbah/myscript.js',
+ '/jummah-khutbah/sw.js',
+ '/jummah-khutbah/assets/jquery-3.1.0.js',
+ '/jummah-khutbah/style.css',
+ '/jummah-khutbah/manifest.json',
+ '/jummah-khutbah/assets/icon_192.png',
+ '/jummah-khutbah/assets/icon_512.png',
+ '/jummah-khutbah/assets/al-qalam-quran-majeed.ttf',
+ '/jummah-khutbah/assets/PatuaOne-Regular.ttf'
  ]);
  })
  );
- self.skipWaiting();
+ // self.skipWaiting();
 });
+
 self.addEventListener('fetch', function(e) {
  e.respondWith(
  caches.match(e.request).then(function(response) {
- return response || fetch(e.request);
+ return response || fetch(e.request).then(response => {
+ return caches.open(cacheName)
+ .then(cache => {
+ cache.put(event.request.url, response.clone());
+ return response;
+ });
+ });
+ })
+ .catch(error => {
+ console.log('Error Fetching Files!', 'Error:', error);
+ })
+ );
+});
+
+// code source: https://github.com/ahmedazhar05/guess-who/blob/master/service-worker.js
+self.onactivate = event => {
+ const cacheAllowlist = [cacheName];
+ event.waitUntil(
+ caches.keys().then(cacheNames => {
+ return Promise.all(
+ cacheNames.map(cacheName => {
+ if (cacheAllowlist.indexOf(cacheName) === -1)
+ return caches.delete(cacheName);
+ })
+ );
  })
  );
-});
+};