Test cachingu scenerii

src/App.vue

@@ -1,10 +1,7 @@
 <template>
   <div class="app_container">
-    <!-- <div class="wip-alert">
+    <!-- <UpdateModal /> -->
-        <img class="icon-error" :src="iconError" alt="error" />
+    
-        <h2>Stacjownik tymczasowo nieaktywny!</h2>
-        <p>Absolutny zakaz wjazdu!</p>
-      </div> -->
     <header class="app_header">
       <div class="header_container">
         <div class="header_icons">
@@ -91,13 +88,15 @@ import options from '@/data/options.json';
 import StatusIndicator from '@/components/App/StatusIndicator.vue';
 import SelectBox from '@/components/Global/SelectBox.vue';
 import { useStore } from './store/store';
+import UpdateModal from './components/App/UpdateModal.vue';
 
 export default defineComponent({
   components: {
     Clock,
     StatusIndicator,
     SelectBox,
-  },
+    UpdateModal
+},
 
   setup() {
     const store = useStore();

src/components/App/UpdateModal.vue

@@ -0,0 +1,59 @@
+<template>
+  <section>
+    <!-- <h2>Ostatnie aktualizacje w Stacjowniku</h2>
+    <p>Tutaj będą pojawiać się informacje o kolejnych nowościach na stronie :)</p>
+
+    <ul>
+      <li v-for="update in updates">
+        <div>{{ update.date }}</div>
+
+        <div>
+          <span v-for="(line, l) in update.content" :key="l">{{ line }}</span>
+        </div>
+      </li>
+    </ul> -->
+
+  </section>
+</template>
+
+<script lang="ts">
+import { ReleaseAPIData } from '@/scripts/interfaces/github_api/ReleaseAPIData';
+import { defineComponent } from '@vue/runtime-core';
+import packageInfo from '../../../package.json';
+import axios from 'axios';
+
+const GH_LASTEST_RELEASE_URL = 'https://api.github.com/repos/Spythere/stacjownik/releases/latest';
+
+export default defineComponent({
+  mounted() {
+    this.fetchReleases();
+  },
+
+  data() {
+    return {
+      cardOpen: false,
+
+      updateBody: '',
+    };
+  },
+
+  methods: {
+    async fetchReleases() {
+      try {
+        const releaseData: ReleaseAPIData = await (await axios.get(GH_LASTEST_RELEASE_URL)).data;
+        if(!releaseData) return;
+
+        const tagVersion = releaseData.tag_name.slice(1);
+
+        console.log(packageInfo.version == tagVersion);
+
+        this.updateBody = releaseData.body;
+      } catch (error) {
+        console.error(`Wystąpił błąd podczas pobierania danych z API GitHuba: ${error}`);
+      }
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped></style>

src/components/App/UpdatesCard.vue

@@ -1,47 +0,0 @@
-<template>
-  <section
-    class="updates card"
-    v-if="cardOpen"
-  >
-    <h2>Ostatnie aktualizacje w Stacjowniku</h2>
-    <p>Tutaj będą pojawiać się informacje o kolejnych nowościach na stronie :)</p>
-
-    <ul>
-      <li
-        v-for="(update, i) in updates"
-        :key="i"
-      >
-        <div>{{update.date}}</div>
-
-        <div>
-          <span
-            v-for="(line, l) in content"
-            :key="l"
-          >{{line}}</span>
-        </div>
-      </li>
-    </ul>
-  </section>
-</template>
-
-<script>
-import { defineComponent } from "@vue/runtime-core";
-
-export default defineComponent({
-  data() {
-    return {
-      updates: {
-        date: "08/08/20",
-        content: [
-          "Lekko odświeżono wygląd strony, dodano nowy widok z pociągami online",
-          "Dodano animacje zmieniania widoków (zakładek)",
-          "Dodano przycisk zamykający kartę z filtrami",
-        ],
-      },
-    };
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-</style>

src/registerServiceWorker.ts

@@ -2,7 +2,7 @@
 
 import { register } from 'register-service-worker'
 
-if (process.env.NODE_ENV === 'production') {
+// if (process.env.NODE_ENV === 'production') {
   register(`${process.env.BASE_URL}service-worker.js`, {
     ready () {
       console.log('SW gotowy')
@@ -14,10 +14,10 @@ if (process.env.NODE_ENV === 'production') {
       console.log('SW: cached')
     },
     updatefound () {
-      console.log('SW: aktualizacja danych')
+      console.log('SW: nowa aktualizacja wykryta')
     },
     updated () {
-      console.log('SW: zaktualizowano dane');
+      console.log('SW: zaktualizowano dane, odśwież aplikację');
     },
     offline () {
       console.log('SW: tryb offline')
@@ -26,4 +26,4 @@ if (process.env.NODE_ENV === 'production') {
       console.error('SW: wystąpił błąd - ', error)
     }
   })
-}
+// }

src/scripts/interfaces/github_api/ReleaseAPIData.ts

@@ -0,0 +1,41 @@
+export interface Author {
+  login: string;
+  id: number;
+  node_id: string;
+  avatar_url: string;
+  gravatar_id: string;
+  url: string;
+  html_url: string;
+  followers_url: string;
+  following_url: string;
+  gists_url: string;
+  starred_url: string;
+  subscriptions_url: string;
+  organizations_url: string;
+  repos_url: string;
+  events_url: string;
+  received_events_url: string;
+  type: string;
+  site_admin: boolean;
+}
+
+export interface ReleaseAPIData {
+  url: string;
+  assets_url: string;
+  upload_url: string;
+  html_url: string;
+  id: number;
+  author: Author;
+  node_id: string;
+  tag_name: string;
+  target_commitish: string;
+  name: string;
+  draft: boolean;
+  prerelease: boolean;
+  created_at: Date;
+  published_at: Date;
+  assets: any[];
+  tarball_url: string;
+  zipball_url: string;
+  body: string;
+}

vue.config.js

@@ -1,8 +1,20 @@
 module.exports = {
   pwa: {
+    workboxPluginModule: 'GenerateSW',
     workboxOptions: {
-      skipWaiting: true,
+      navigateFallback: '/index.html',
-      clientsClaim: true,
+      runtimeCaching: [
+        {
+          urlPattern: new RegExp('^https://stacjownik.eu-4.evennode.com/api/getSceneries'),
+          handler: 'NetworkFirst',
+          options: {
+            cacheName: 'sceneries-cache',
+            expiration: {
+              maxAgeSeconds: 24 * 60 * 60, // 24 hours
+            },
+          },
+        },
+      ],
     },
   },
 };