feat(serviceworker): make updatable by selection

rudnovd · Jan 21, 2022 · 9d5ff7e · 9d5ff7e
1 parent 9ef5e8a
commit 9d5ff7e
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 43 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -4,45 +4,60 @@
     Home page
   </router-link>
   <router-view />
+
+  <BaseNotification v-if="needRefresh" :show="needRefresh" :buttons="notificationsButtons">
+    New content is available.
+  </BaseNotification>
 </template>
 
 <script lang="ts">
 import { useRegisterSW } from 'virtual:pwa-register/vue'
-import { defineComponent, watch } from 'vue'
+import { defineComponent } from 'vue'
 import { useRoute } from 'vue-router'
+import BaseNotification from './components/base/BaseNotification.vue'
 import { useStore } from './store'
-const { needRefresh, updateServiceWorker } = useRegisterSW({
-  immediate: true,
-  onRegistered(registration) {
-    if (import.meta.env.DEV && registration) {
-      setInterval(async () => {
-        /* eslint-disable no-console */
-        console.log('Checking for sw update')
-        await registration.update()
-      }, 20000 /* 20s for testing purposes */)
-    } else if (import.meta.env.PROD && registration) {
-      /* eslint-disable no-console */
-      console.log('Service worker registered')
-    }
-  },
-})
 
 export default defineComponent({
   name: 'App',
+  components: { BaseNotification },
   setup() {
     const store = useStore()
     const route = useRoute()
 
-    watch(needRefresh, () => {
-      updateServiceWorker()
-      /* eslint-disable no-console */
-      console.log('Service work updated')
-    })
-
     store.initData()
 
+    const { updateServiceWorker, needRefresh } = useRegisterSW({
+      immediate: false,
+      onRegistered(registration) {
+        if (registration) {
+          /* eslint-disable no-console */
+          console.log('Service worker registered')
+        }
+      },
+      onRegisterError(error) {
+        if (error) {
+          /* eslint-disable no-console */
+          console.log(`Service worker registartion error: ${error}`)
+        }
+      },
+    })
+
+    const notificationsButtons = [
+      {
+        text: 'Update app',
+        onClick: () => {
+          updateServiceWorker(true)
+        },
+      },
+      {
+        text: 'Dismiss',
+      },
+    ]
     return {
       route,
+
+      needRefresh,
+      notificationsButtons,
     }
   },
 })

diff --git a/src/components/base/BaseNotification.vue b/src/components/base/BaseNotification.vue
@@ -1,24 +1,26 @@
 <template>
   <div v-if="show" class="notification-container">
-    <div class="notification">
-      <div><slot></slot></div>
-      <div v-if="buttons" class="notification-buttons">
-        <button
-          v-for="(button, index) in buttons"
-          :key="`button-${index}`"
-          class="notification-button"
-          :style="{ color: button.textColor }"
-          @click="onClick(button)"
-        >
-          {{ button.text }}
-        </button>
+    <transition name="notification">
+      <div v-if="showNotification" class="notification">
+        <div><slot></slot></div>
+        <div v-if="buttons" class="notification-buttons">
+          <button
+            v-for="(button, index) in buttons"
+            :key="`button-${index}`"
+            class="notification-button"
+            :style="{ color: button.textColor }"
+            @click="onClick(button)"
+          >
+            {{ button.text }}
+          </button>
+        </div>
       </div>
-    </div>
+    </transition>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, nextTick, ref } from 'vue'
 
 interface BaseNotificationButtonProp {
   text: string
@@ -55,13 +57,18 @@ export default defineComponent({
     },
   },
   emits: ['close'],
-  setup(props, context) {
+  setup(_, context) {
+    const showNotification = ref(false)
+    nextTick(() => (showNotification.value = true))
+
     const onClick = (button: BaseNotificationButtonProp) => {
-      context.emit('close')
+      showNotification.value = false
       if (button.onClick) button.onClick()
+      context.emit('close')
     }
 
     return {
+      showNotification,
       onClick,
     }
   },
@@ -81,6 +88,7 @@ export default defineComponent({
   flex-wrap: nowrap;
   align-items: flex-end;
   position: fixed;
+  pointer-events: none;
 }
 
 .notification {
@@ -102,6 +110,7 @@ export default defineComponent({
   color: v-bind(textColor);
   min-height: 50px;
   min-width: 100px;
+  pointer-events: all;
 }
 
 .notification-buttons {
@@ -117,4 +126,14 @@ export default defineComponent({
     background-color: rgba(255, 255, 255, 0.1);
   }
 }
+
+.notification-enter-active,
+.notification-leave-active {
+  transition: transform 1s ease;
+}
+
+.notification-enter-from,
+.notification-leave-to {
+  transform: translateY(100px);
+}
 </style>
diff --git a/src/sw.ts b/src/sw.ts
@@ -1,20 +1,23 @@
 import { CacheableResponsePlugin } from 'workbox-cacheable-response'
-import { clientsClaim } from 'workbox-core'
 import { ExpirationPlugin } from 'workbox-expiration'
 import { cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching'
 import { NavigationRoute, registerRoute } from 'workbox-routing'
 import { CacheFirst } from 'workbox-strategies'
 
 declare let self: ServiceWorkerGlobalScope
 
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === 'SKIP_WAITING') self.skipWaiting()
+})
+
 // self.__WB_MANIFEST is default injection point
 precacheAndRoute(self.__WB_MANIFEST)
 
 // clean old assets
 cleanupOutdatedCaches()
 
 // to allow work offline
-registerRoute(new NavigationRoute(createHandlerBoundToURL('index.html')), new CacheFirst())
+registerRoute(new NavigationRoute(createHandlerBoundToURL('index.html')))
 registerRoute(
   ({ request }) => request.destination === 'image',
   new CacheFirst({
@@ -43,6 +46,3 @@ registerRoute(
     ],
   })
 )
-
-self.skipWaiting()
-clientsClaim()