✨ (pwa) add the new version component from vite pwa plugin

src/bus/serviceWorkerEventBus.ts

@@ -1,3 +0,0 @@
-import { createEventBus } from 'retrobus'
-
-export const serviceWorkerBusEvent = createEventBus<void>('new-version')

src/components/NewVersion.vue

@@ -1,32 +1,50 @@
+<script setup lang="ts">
+import { useRegisterSW } from 'virtual:pwa-register/vue'
+import { ref } from 'vue'
+
+const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW()
+
+const close = async () => {
+  offlineReady.value = false
+  needRefresh.value = false
+}
+const devMode = ref(import.meta.env.DEV)
+</script>
+
 <template>
-  <aside v-if="hasNewVersion" class="new-version">
+  <div
-    <button class="button is-primary" @click="reload">
+    v-if="devMode || offlineReady || needRefresh"
-      new version available
+    class="pwa-toast"
+    role="alert"
+  >
+    <div>
+      <span v-if="offlineReady">App ready to work offline </span>
+      <span v-else>
+        New content available, click on reload button to update.
+      </span>
+    </div>
+    <button
+      class="button is-primary"
+      v-if="needRefresh"
+      @click="updateServiceWorker()"
+    >
+      Reload
     </button>
-  </aside>
+    <button class="button" @click="close">Close</button>
+  </div>
 </template>
 
-<script lang="ts">
+<style scoped>
-import { serviceWorkerBusEvent } from '@/bus/serviceWorkerEventBus'
+.pwa-toast {
-import { defineComponent, onMounted, ref } from 'vue'
+  position: fixed;
-
+  right: 0;
-export default defineComponent({
+  bottom: 0;
-  name: 'NewVersion',
+  margin: 1rem;
-  setup() {
+  padding: 0.5rem;
-    const hasNewVersion = ref(false)
+  width: 200px;
-    onMounted(() => {
+  color: var(--primary-color);
-      serviceWorkerBusEvent.addEventBusListener(
+  border: var(--primary-color) 2px solid;
-        () => {
+  border-radius: 4px;
-          hasNewVersion.value = true
+  background-color: var(--background-color);
-        },
-        {
-          once: true,
-          retro: true
 }
-      )
+</style>
-    })
-
-    return { hasNewVersion, reload: () => location.reload() }
-  }
-})
-</script>

src/styles/app.scss

@@ -19,7 +19,8 @@ $light-link: lighten($link, 45%);
 $family-primary: 'Courier Prime', monospace;
 
 :root {
-  --font-family: var(#{$family-primary});
+  --primary-color: #{$primary};
+  --font-family: #{$family-primary};
   --font-color: #4a4a4a;
   --light-link: #{$light-link};
   --background-color: #ffffff;

src/views/HomeApp.vue

@@ -1,18 +1,9 @@
-<template>
+<script setup lang="ts">
-  <div v-if="!user || !repo" class="home content">
-    <authorize-user class="authorize" />
-    <new-version class="new-version" />
-    <welcome-world />
-  </div>
-  <flux-note v-else :key="routeKey" :user="user" :repo="repo" />
-</template>
-
-<script lang="ts">
-import { defineComponent, defineAsyncComponent, computed } from 'vue'
-import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
-import NewVersion from '@/components/NewVersion.vue'
 import AuthorizeUser from '@/components/AuthorizeUser.vue'
+import NewVersion from '@/components/NewVersion.vue'
 import { useComputeBacklinks } from '@/hooks/useComputeBacklinks.hook'
+import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
+import { computed, defineAsyncComponent } from 'vue'
 
 const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))
 
@@ -20,30 +11,22 @@ const WelcomeWorld = defineAsyncComponent(
   () => import('@/components/WelcomeWorld.vue')
 )
 
-export default defineComponent({
+const props = defineProps<{ user: string; repo: string }>()
-  name: 'HomeApp',
-  components: {
-    WelcomeWorld,
-    FluxNote,
-    NewVersion,
-    AuthorizeUser
-  },
-  props: {
-    user: { type: String, required: false, default: '' },
-    repo: { type: String, required: false, default: '' }
-  },
-  setup(props) {
-    const { resetStackedNotes } = useQueryStackedNotes()
-    useComputeBacklinks()
 
-    return {
+useQueryStackedNotes()
-      resetStackedNotes,
+useComputeBacklinks()
-      routeKey: computed(() => `${props.user}-${props.repo}`)
+const routeKey = computed(() => `${props.user}-${props.repo}`)
-    }
-  }
-})
 </script>
 
+<template>
+  <div v-if="!user || !repo" class="home content">
+    <authorize-user class="authorize" />
+    <welcome-world />
+  </div>
+  <flux-note v-else :key="routeKey" :user="user" :repo="repo" />
+  <new-version class="new-version" />
+</template>
+
 <style lang="scss" scoped>
 .home {
   display: flex;

tsconfig.json

@@ -12,7 +12,7 @@
     "sourceMap": true,
     "baseUrl": ".",
     "resolveJsonModule": true,
-    "types": ["node", "vite/client"],
+    "types": ["node", "vite/client", "vite-plugin-pwa/vue"],
     "paths": {
       "@/*": ["src/*"]
     },