Verificador de velocidade de internet

quasar.conf.js

@@ -20,7 +20,6 @@ module.exports = function (ctx) {
       // 'eva-icons',
       // 'themify',
       // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
-
       'fontawesome-v5',
       'roboto-font', // optional, you are not bound to it
       'material-icons' // optional, you are not bound to it

src/pages/Index.vue

@@ -55,6 +55,10 @@ export default {
         { label: 'Notificação',
           icon: 'notification_important',
           route: 'notification'
+        },
+        { label: 'Rede',
+          icon: 'wifi',
+          route: 'rede'
         }
       ]
     }

src/pages/Network.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <div class="row justify-center">
+      <div class="col-4">
+        {{ velocidade }} kbps
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Network',
+  data () {
+    return {
+      velocidade: navigator.connection.downlink
+    }
+  },
+  mounted () {
+    navigator.connection.onchange = (e) => {
+      this.velocidade = navigator.connection.downlink
+    }
+  }
+}
+</script>

src/router/routes.js

@@ -10,7 +10,7 @@ const routes = [
       { path: '/camera', name: 'camera', component: () => import('pages/Camera.vue') },
       { path: '/geolocation', name: 'geolocation', component: () => import('pages/Geolocation.vue') },
       { path: '/vibration', name: 'vibration', component: () => import('pages/Vibration.vue') },
-      { path: '/notification', name: 'notification', component: () => import('pages/Notification.vue') }
+      { path: '/rede', name: 'rede', component: () => import('pages/Network.vue') }
     ]
   }
 ]