Added handling if the user is offline (#35)

src/App.vue

@@ -1,6 +1,8 @@
 <template>
-	<div id="app">
+    <div>
-		<nav class="navbar main-theme is-fixed-top" role="navigation" aria-label="main navigation" v-if="user.authenticated && user.infos.type === authTypes.USER">
+        <div v-if="isOnline">
+            <nav class="navbar main-theme is-fixed-top" role="navigation" aria-label="main navigation"
+                 v-if="user.authenticated && user.infos.type === authTypes.USER">
                 <div class="navbar-brand">
                     <router-link :to="{name: 'home'}" class="navbar-item logo">
                         <img src="/images/logo-full.svg" alt="Vikunja"/>
@@ -32,8 +34,12 @@
                 </div>
             </nav>
             <div v-if="user.authenticated && user.infos.type === authTypes.USER">
-			<a @click="mobileMenuActive = true" class="mobilemenu-show-button" v-if="!mobileMenuActive"><icon icon="bars"></icon></a>
+                <a @click="mobileMenuActive = true" class="mobilemenu-show-button" v-if="!mobileMenuActive">
-			<a @click="mobileMenuActive = false" class="mobilemenu-hide-button" v-if="mobileMenuActive"><icon icon="times"></icon></a>
+                    <icon icon="bars"></icon>
+                </a>
+                <a @click="mobileMenuActive = false" class="mobilemenu-hide-button" v-if="mobileMenuActive">
+                    <icon icon="times"></icon>
+                </a>
                 <div class="app-container">
                     <div class="namespace-container" :class="{'is-active': mobileMenuActive}">
                         <div class="menu top-menu">
@@ -92,12 +98,16 @@
                             <div class="spinner" :class="{ 'is-loading': namespaceService.loading}"></div>
                             <template v-for="n in namespaces">
                                 <div :key="n.id">
-								<router-link v-tooltip.right="'Settings'" :to="{name: 'editNamespace', params: {id: n.id} }" class="nsettings" v-if="n.id > 0">
+                                    <router-link v-tooltip.right="'Settings'"
+                                                 :to="{name: 'editNamespace', params: {id: n.id} }" class="nsettings"
+                                                 v-if="n.id > 0">
 										<span class="icon">
 											<icon icon="cog"/>
 										</span>
                                     </router-link>
-								<router-link v-tooltip="'Add a new list in the ' + n.name + ' namespace'" :to="{ name: 'newList', params: { id: n.id} }" class="nsettings" :key="n.id + 'newList'" v-if="n.id > 0">
+                                    <router-link v-tooltip="'Add a new list in the ' + n.name + ' namespace'"
+                                                 :to="{ name: 'newList', params: { id: n.id} }" class="nsettings"
+                                                 :key="n.id + 'newList'" v-if="n.id > 0">
 										<span class="icon">
 											<icon icon="plus"/>
 										</span>
@@ -108,7 +118,8 @@
                                 </div>
                                 <ul class="menu-list" :key="n.id + 'child'">
                                     <li v-for="l in n.lists" :key="l.id">
-									<router-link :to="{ name: 'showList', params: { id: l.id} }">{{l.title}}</router-link>
+                                        <router-link :to="{ name: 'showList', params: { id: l.id} }">{{l.title}}
+                                        </router-link>
                                     </li>
                                 </ul>
                             </template>
@@ -151,6 +162,13 @@
             </div>
             <notifications position="bottom left"/>
         </div>
+        <div class="app offline" v-else>
+            <div class="offline-message">
+                <h1>You are offline.</h1>
+                <p>Please check your network connection and try again.</p>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
@@ -174,9 +192,15 @@
 				currentDate: new Date(),
 				userMenuActive: false,
 				authTypes: authTypes,
+				isOnline: true,
 			}
 		},
 		beforeMount() {
+			// Check if the user is offline, show a message then
+			this.isOnline = navigator.onLine
+			window.addEventListener('online',  () => this.isOnline = navigator.onLine);
+			window.addEventListener('offline', () => this.isOnline = navigator.onLine);
+
 			// Password reset
 			if (this.$route.query.userPasswordReset !== undefined) {
 				localStorage.removeItem('passwordResetToken') // Delete an eventually preexisting old token

src/ServiceWorker/sw.js

@@ -1,4 +1,21 @@
 /* eslint-disable no-console */
+/* eslint-disable no-undef */
 
-console.log('Hello from the service worker');
+// Cache assets
+workbox.routing.registerRoute(
+    // This regexp matches all files in precache-manifest
+    new RegExp('.+\\.(css|json|js|eot|svg|ttf|woff|woff2|png|html|txt)$'),
+    new workbox.strategies.StaleWhileRevalidate()
+);
 
+// Always send api reqeusts through the network
+workbox.routing.registerRoute(
+	new RegExp('(\\/)?api\\/v1\\/.*$'),
+	new workbox.strategies.NetworkOnly()
+);
+
+// Cache everything else
+workbox.routing.registerRoute(
+	new RegExp('.*'),
+    new workbox.strategies.StaleWhileRevalidate()
+);

src/styles/theme.scss

@@ -315,3 +315,28 @@ h1,h2,h3,h4,h5,h6{
     text-align: right;
   }
 }
+
+.offline {
+  background: url('../public/images/llama-nightscape.png') no-repeat center;
+  -webkit-background-size: cover;
+  background-size: cover;
+  height: 100vh;
+
+  .offline-message {
+    text-align: center;
+    position: absolute;
+    width: 100vw;
+    bottom: 5vh;
+    color: $white;
+    padding: 0 1em;
+
+    h1 {
+      font-weight: bold;
+      font-size: 1.5em;
+      text-align: center;
+      color: $white;
+      font-weight: 700 !important;
+      font-size: 1.5em;
+    }
+  }
+}

todo.md

@@ -156,4 +156,8 @@
 ## Fancy stuff
 
 * [ ] PWA
+  * [x] Basics
+  * [ ] Should only show a small notification somewhere when offline
+  * [ ] Cache even api requests, but show a notification on lists "content may be outdated"
+  * [ ] Need a strategy to show all of this if the page is offline
 * [ ] Vuex