Merge pull request #9 from moomoolive/pwaBugFixes

fixed service worker registration issue

code/client/package.json

@@ -7,7 +7,7 @@
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint",
-    "pwa": "npm run build && serve dist -l 1239"
+    "pwa": "npm run build && serve dist -l 1240"
   },
   "dependencies": {
     "@ivanv/vue-collapse-transition": "^1.0.0",

code/client/src/app.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Main from './Main.vue'
 import router from './router'
 import store from './store'
+import './registerServiceWorker.js'
 
 import API from '@/libraries/requests/index.js'
 import funcs from '@/libraries/globalUtilities.js'

code/client/src/components/footer/popup/main.vue

@@ -27,6 +27,10 @@ export default {
     methods: {
         close() {
             this.$store.commit('footerPopup/close')
+        },
+        closeAfter(seconds=4) {
+            const milliSecondsInASecond = 1_000
+            window.setTimeout(() => this.close() , seconds * milliSecondsInASecond)
         }
     },
     computed: {
@@ -35,7 +39,11 @@ export default {
         },
         backgroundColor() {
             return this.componentsInfo.componentsProps.color || 'blue'
-        }
+        },
+    },
+    created() {
+        if (this.componentsInfo.componentsProps.closeAfter)
+            this.closeAfter(this.componentsInfo.componentsProps.closeAfter)
     }
 }
 </script>

code/client/src/components/header/navigation/components/navigationOptions.vue

@@ -151,6 +151,10 @@ p {
     &:hover {
         background-color: lighten(themeRGBA("darkBlue", 1), 20%);
     }
+    &.profile-info {
+        background-color: getColor("silver");
+        font-size: 13px;
+    }
 }
 
 @media screen and (max-width: $phoneWidth) {

code/client/src/libraries/footerPopup/main.js

@@ -12,6 +12,20 @@ const appWillUpdateMessage = () => {
     )
 }
 
+const youAreOffline = () => {
+    helpers.createFooterPopup(
+        'statusUpdate',
+        { 
+            gif: 'confusedDino', 
+            color: 'blue',
+            topMessage: "You're offline",
+            bottomMessage: "Some features are unavailable" ,
+            closeAfter: 4
+        }
+    )
+}
+
 export default {
-    appWillUpdateMessage
+    appWillUpdateMessage,
+    youAreOffline
 }

code/client/src/registerServiceWorker.js

@@ -11,25 +11,25 @@ if (process.env.NODE_ENV === 'production') {
         'For more details, visit https://goo.gl/AFskqB'
       )
     },
-    registered () {
-      console.log('Service worker has been registered.')
+    registered() {
+      console.log('New service worker has been registered.')
     },
-    cached () {
+    cached() {
       console.log('Content has been cached for offline use.')
     },
-    updatefound () {
+    updatefound() {
       console.log('New content is downloading.')
     },
-    updated (registration) {
-      console.log('New content is available; please refresh.')
+    updated(registration) {
       footerPopups.appWillUpdateMessage()
       const threeSecondsInMilliseconds = 3_000
       window.setTimeout(() => registration.waiting.postMessage({ action: 'skipWaiting' }) , threeSecondsInMilliseconds)
     },
-    offline () {
+    offline() {
       console.log('No internet connection found. App is running in offline mode.')
+      footerPopups.youAreOffline()
     },
-    error (error) {
+    error(error) {
       console.error('Error during service worker registration:', error)
     }
   })
@@ -41,4 +41,4 @@ if (process.env.NODE_ENV === 'production') {
     refreshing = true
     window.location.reload()
   })
-}
+}

code/client/src/service-worker.js

@@ -1,6 +1,4 @@
-console.log('service-worker registered')
-
-workbox.core.setCacheNameDetails({prefix: "khateebRemind"});
+workbox.core.setCacheNameDetails({ prefix: "khateebRemind" });
 
 self.__precacheManifest = [].concat(self.__precacheManifest || [])
 workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
@@ -10,8 +8,4 @@ self.addEventListener("message", msg => {
   if (msg.data.action === 'skipWaiting') {
     self.skipWaiting()
   }
-})
-
-
-
-//self.clientsClaim();
+})

code/client/src/store/modules/user.js

@@ -49,6 +49,9 @@ export default {
             const decodedPayload = window.atob(tokenPayload)
             return JSON.parse(decodedPayload)
         },
+        fullName(state, { allInfo }) {
+            return `${allInfo.firstName} ${allInfo.lastName}`
+        },
         validAuthentication(state, { isLoggedIn, allInfo: { exp: tokenExpirationInSeconds } }) {
             if (!isLoggedIn)
                 return false

code/client/vue.config.js

@@ -15,12 +15,16 @@ module.exports = {
     },
     pwa: {
         name: 'Khateeb Remind',
+        themeColor: "#4DBA87",
+        msTileColor: "#4DBA87",
+        appleMobileWebAppCache: "no",
+        manifestOptions: {
+            background_color: "#000000"
+        },
         workboxPluginMode: 'InjectManifest',
         workboxOptions: {
-            //skipWaiting: true,
-            //clientsClaim: true
             swSrc: 'src/service-worker.js',
-            //swDest: 'service-worker.js'
+            swDest: "service-worker.js"
         }
     }
 }