Added PWA support

VATSIM-Radar · Nov 10, 2024 · dd128a2 · dd128a2
1 parent ce2b730
commit dd128a2
Show file tree

Hide file tree

Showing 10 changed files with 2,284 additions and 167 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@
 - Fixed rare case when airport would not show on map
 - You can no longer view airport arrival rate when overlay is collapsed
 - Added Share window to Filters & Traffic with ability to share current URL with friends - including overlay
+- Added PWA integration with ability to install VATSIM Radar on your PC or Phone (Chromium only)
 
 ## QA Changes
 

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -24,10 +24,6 @@ export default defineNuxtConfig({
                     sizes: '16x16',
                     href: '/favicon-16x16.png',
                 },
-                {
-                    rel: 'manifest',
-                    href: '/site.webmanifest',
-                },
                 {
                     rel: 'mask-icon',
                     href: '/safari-pinned-tab.svg',
@@ -62,6 +58,7 @@ export default defineNuxtConfig({
         server: true,
     },
     experimental: {
+        appManifest: true,
         asyncContext: true,
         clientFallback: false,
         defaults: {
@@ -127,6 +124,7 @@ export default defineNuxtConfig({
         '@pinia/nuxt',
         '@nuxt/eslint',
         '@nuxtjs/stylelint-module',
+        '@vite-pwa/nuxt',
     ],
     eslint: {
         checker: {
@@ -167,6 +165,38 @@ export default defineNuxtConfig({
     typescript: {
         typeCheck: true,
     },
+    pwa: {
+        client: {
+            periodicSyncForUpdates: 1000 * 60 * 5,
+        },
+        manifest: {
+            name: 'VATSIM Radar',
+            short_name: 'VR',
+            description: 'VATSIM Traffic Monitoring Service',
+            theme_color: '#3B6CEC',
+            orientation: 'portrait',
+            // @ts-expect-error tabbed not supported here
+            display_override: ['window-controls-overlay', 'tabbed', 'standalone'],
+            dir: 'ltr',
+            lang: 'en',
+            handle_links: 'not-preferred',
+            icons: [
+                {
+                    src: 'android-chrome-192x192.png',
+                    sizes: '192x192',
+                    type: 'image/png',
+                },
+                {
+                    src: 'android-chrome-512x512.png',
+                    sizes: '512x512',
+                    type: 'image/png',
+                },
+            ],
+        },
+        devOptions: {
+            enabled: true,
+        },
+    },
     vite: {
         build: {
             cssMinify: 'esbuild',

diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "@pinia/nuxt": "^0.7.0",
     "@prisma/client": "^5.22.0",
     "@turf/great-circle": "^7.1.0",
+    "@vite-pwa/nuxt": "^0.10.6",
     "adm-zip": "^0.5.16",
     "aws-sdk": "^2.1692.0",
     "chardet": "^2.0.0",
@@ -45,6 +46,7 @@
     "sqlite3": "^5.1.7",
     "svgo": "^3.3.2",
     "ua-parser-js": "2.0.0-rc.2",
+    "vite-plugin-pwa": "^0.20.5",
     "vite-svg-loader": "^5.1.0",
     "vue": "^3.5.12",
     "vue-router": "^4.4.5",

diff --git a/src/components/map/filters/MapFiltersTraffic.vue b/src/components/map/filters/MapFiltersTraffic.vue
@@ -86,7 +86,3 @@ watch(customUrl, val => {
     }
 });
 </script>
-
-<style scoped lang="scss">
-
-</style>
diff --git a/src/components/views/ViewHeader.vue b/src/components/views/ViewHeader.vue
@@ -33,6 +33,7 @@
                         :to="button.path"
                         :type="(button.path === route.path || button.children?.some(x => x.path === route.path)) ? 'primary' : 'secondary'"
                         :width="button.width"
+                        @click="button.action?.()"
                     >
                         <template
                             v-if="button.icon"
@@ -56,6 +57,7 @@
                                         :disabled="childrenButton.disabled"
                                         :to="childrenButton.path"
                                         :type="childrenButton.path === route.path ? 'primary' : 'secondary'"
+                                        @click="childrenButton.action?.()"
                                     >
                                         <template
                                             v-if="childrenButton.icon"
@@ -400,9 +402,12 @@ const notamCookie = useCookie<boolean>('notam-closed', {
     maxAge: 60 * 60 * 24,
 });
 
+const app = useNuxtApp();
+
 
 interface HeaderItem {
     text: string;
+    action?: () => any;
     path?: string;
     disabled?: boolean;
     width?: string;

diff --git a/src/components/views/ViewMapFooter.vue b/src/components/views/ViewMapFooter.vue
@@ -132,13 +132,6 @@
                     </div>
                 </div>
             </div>
-            <nuxt-link
-                class="map-footer_left_section map-footer__text"
-                no-prefetch
-                to="/privacy-policy"
-            >
-                Privacy Policy
-            </nuxt-link>
             <div
                 v-if="store.version"
                 class="map-footer_left_section map-footer__text"

diff --git a/src/layouts/default.vue b/src/layouts/default.vue
@@ -3,6 +3,7 @@
         v-if="!hadRestrictedAuth"
         class="app"
     >
+        <nuxt-pwa-manifest/>
         <view-header v-if="!store.config.hideHeader"/>
         <div class="app_content">
             <client-only>
@@ -12,7 +13,7 @@
             <slot/>
         </div>
         <common-popup
-            v-if="store.updateRequired"
+            v-if="store.updateRequired || $pwa?.needRefresh"
             v-model="updateRequired"
             disabled
         >
@@ -35,12 +36,6 @@
                 v-else
                 class="app_footer_info"
             >
-                <nuxt-link
-                    no-prefetch
-                    to="/privacy-policy"
-                >
-                    Privacy Policy
-                </nuxt-link>
                 <div v-if="store.version">
                     v{{ store.version }}
                 </div>
@@ -70,8 +65,12 @@ defineSlots<{ default: () => any }>();
 const store = useStore();
 const route = useRoute();
 const updateRequired = ref(true);
+const { $pwa } = useNuxtApp();
 
-const reload = () => location.reload();
+const reload = () => {
+    if ($pwa?.needRefresh) $pwa.updateServiceWorker();
+    else location.reload();
+};
 
 const theme = useCookie<ThemesList>('theme', {
     path: '/',

diff --git a/src/pages/roadmap.vue b/src/pages/roadmap.vue
@@ -279,7 +279,7 @@ const roadmap = reactive<Roadmap[]>([
             'Hoppie integration',
             {
                 title: 'PWA',
-                description: 'Basically PC version of VATSIM Radar',
+                status: 'completed',
             },
             'Bookmarks',
         ],

diff --git a/src/public/site.webmanifest b/src/public/site.webmanifest