✨ Basic push notification feature

Subscribe to individual launches, locations, rockets & launch service providers.
User will recieve notification reminder when launch is < T-10 minutes

Author: kalkih

.env.development

@@ -1,2 +1,3 @@
 VUE_APP_API_URL=
+VUE_APP_API_VAPID_PUBLIC_KEY=
 BASE_URL=

.env.production

@@ -1,2 +1,3 @@
 VUE_APP_API_URL=
+VUE_APP_API_VAPID_PUBLIC_KEY=
 BASE_URL=

README.md

@@ -33,6 +33,7 @@ cp .env.production .env.production.local
 ### Example environment
 ```env
 VUE_APP_API_URL=https://api.example.app
+VUE_APP_API_VAPID_PUBLIC_KEY=BIMSlo01XNTmTFT0rcrMluhMl0Vbls-t6DAXtbRBiFW_z_n9kF9KlxsEiyujlAEZhDDEJsxMlMxT86_OXxKNQeU
 BASE_URL=https://example.app
 ````
 

package-lock.json

@@ -7,11 +7,13 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "build:watch": "vue-cli-service build --watch --mode production",
     "build:report": "vue-cli-service build --report",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.15",
+    "@fortawesome/free-regular-svg-icons": "^5.13.1",
     "@fortawesome/free-solid-svg-icons": "^5.7.2",
     "@fortawesome/vue-fontawesome": "^0.1.5",
     "axios": "^0.19.0",

package.json

@@ -14,12 +14,13 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
+import notificationService from './services/notificationService'
 import TheNavbar from './components/TheNavbar.vue'
 import TheFooter from './components/TheFooter.vue'
 import TheMenu from './components/TheMenu.vue'
 import TheSearchScreen from './components/TheSearchScreen.vue'
 import TheBackground from './components/TheBackground.vue'
-import { mapState } from 'vuex'
 
 export default {
   name: 'App',
@@ -60,8 +61,9 @@ export default {
       this.applyTheme()
     },
   },
-  created () {
+  async created () {
     this.applyTheme()
+    notificationService.setupNotificationWatcher()
   },
 }
 </script>

src/App.vue

@@ -0,0 +1,20 @@
+import Api from './index'
+
+export default {
+  async subscribe (id, subscription) {
+    const req = await Api().post(`/notification/subscribe/${id}`, subscription)
+    return req.status === 200 ? req.data : undefined
+  },
+  async unsubscribe (id, subscription) {
+    const req = await Api().get(`/notification/unsubscribe/${id}`, subscription)
+    return req.status === 200 ? req.data : undefined
+  },
+  async subscribeTopic (id, topic, subscription) {
+    const req = await Api().post(`/notification/subscribe/${topic}/${id}`, subscription)
+    return req.status === 200 ? req.data : undefined
+  },
+  async unsubscribeTopic (id, topic, subscription) {
+    const req = await Api().post(`/notification/unsubscribe/${topic}/${id}`, subscription)
+    return req.status === 200 ? req.data : undefined
+  },
+}

src/api/notification.js

@@ -38,11 +38,11 @@
 </template>
 
 <script>
-import Tag from './Tag.vue'
-import Ticker from './Ticker.vue'
+import { mapActions } from 'vuex'
 import theme from '../mixins/themes.js'
 import launchMixin from '../mixins/launch.js'
-import { mapActions } from 'vuex'
+import Tag from './Tag'
+import Ticker from './Ticker'
 
 export default {
   components: { Tag, Ticker },

src/components/LaunchCard.vue

@@ -1,10 +1,16 @@
 <template>
   <div class="launch-list">
-    <h1 class="launch-list__header" v-if="title">
+    <div class="launch-list__header" v-if="title">
       <font-awesome-icon v-if="icon" :icon="icon"/>
-      <span>{{ filter }}</span>
-      <span>{{ search }}</span>
-    </h1>
+      <h1>
+        <span>{{ filter }}</span>
+        <span>{{ search }}</span>
+      </h1>
+      <subscribe-button
+        v-if="state && filter"
+        :id="filter" :topic="state"
+      />
+    </div>
     <launch-card-featured v-if="featured" :launch="featured" :forced="true" />
     <div class="launch-list__content">
       <h2 class="launch-list__heading">
@@ -20,7 +26,7 @@
             :launch="launch"
           />
         </section>
-        <base-button v-if="more.next" @click.native="fetchMoreNext" text="Load more" :loading="loading.next" />
+        <base-button class="launch-list__more-button" v-if="more.next" @click.native="fetchMoreNext" text="Load more" :loading="loading.next" />
         <h3 v-else class="launch-list__heading --medium">phew... that was the last one!</h3>
       </template>
       <h3 v-else class="launch-list__heading --tall">No upcoming Launches</h3>
@@ -38,7 +44,7 @@
             :ticker="false"
           />
         </section>
-        <base-button v-if="more.past" @click.native="fetchMorePast" text="Load more" :loading="loading.past" />
+        <base-button class="launch-list__more-button" v-if="more.past" @click.native="fetchMorePast" text="Load more" :loading="loading.past" />
         <h3 v-else class="launch-list__heading --medium">phew... that was the last one!</h3>
       </template>
       <h3 v-else class="launch-list__heading --tall">No past launches</h3>
@@ -48,12 +54,13 @@
 
 <script>
 import { mapState, mapActions } from 'vuex'
-import LaunchCard from './LaunchCard.vue'
-import LaunchCardFeatured from './LaunchCardFeatured.vue'
-import BaseButton from './BaseButton.vue'
+import LaunchCard from './LaunchCard'
+import LaunchCardFeatured from './LaunchCardFeatured'
+import BaseButton from './BaseButton'
+import SubscribeButton from './SubscribeButton'
 
 export default {
-  components: { LaunchCard, LaunchCardFeatured, BaseButton },
+  components: { LaunchCard, LaunchCardFeatured, BaseButton, SubscribeButton },
   name: 'LaunchList',
   props: {
     state: {
@@ -124,6 +131,13 @@ export default {
     }),
   },
   methods: {
+    ...mapActions({
+      getMoreNext: 'launches/getMoreNextLaunches',
+      getMorePast: 'launches/getMorePastLaunches',
+      unsetState: 'launches/unsetState',
+      getNext: 'launches/getNextLaunches',
+      getPast: 'launches/getPastLaunches',
+    }),
     fetchMoreNext: async function () {
       this.loading.next = true
       const fetched = await this.getMoreNext({
@@ -144,13 +158,6 @@ export default {
       if (fetched === 0) this.more.past = false
       this.loading.past = false
     },
-    ...mapActions({
-      getMoreNext: 'launches/getMoreNextLaunches',
-      getMorePast: 'launches/getMorePastLaunches',
-      unsetState: 'launches/unsetState',
-      getNext: 'launches/getNextLaunches',
-      getPast: 'launches/getPastLaunches',
-    }),
   },
   created: async function () {
     const { state, getQuery, filter } = this
@@ -178,23 +185,28 @@ export default {
     }
 
     &__header {
-      font-size: calc(.8em + 5vw);
       display: flex;
       flex-flow: column;
       justify-content: center;
       align-items: center;
       text-align: center;
       min-height: calc(35vh - 77px);
       margin: 0 10px;
+      font-size: 1.6em;
+      padding: 1em 0;
 
       @media only screen and (min-width: 640px) {
         min-height: calc(40vh - 77px);
-        font-size: 4em;
+        font-size: 2em;
       }
 
       svg {
-        margin-bottom: .4em;
-        font-size: 1.4em;
+        font-size: 4em;
+      }
+
+      .base-button {
+        font-size: .6em;
+        margin: 0;
       }
     }
 
@@ -231,7 +243,7 @@ export default {
       }
     }
 
-    .base-button {
+    &__more-button {
       margin: 60px 0;
       font-weight: 500;
       align-self: center;

src/components/LaunchList.vue

@@ -3,6 +3,9 @@
     class="launch-overview"
     :class="[{ '--placeholder': launch.placeholder }]">
     <template v-if="launch.id">
+      <div class="launch-overview__subscribe">
+        <subscribe-button class="--right" :id="launch.id"/>
+      </div>
       <h2 class="launch-overview__title">
         <span class="launch-overview__title--primary">{{ launch.rocket.name }}</span>
         <span class="launch-overview__title--secondary">{{ launch.mission.short }}</span>
@@ -75,6 +78,7 @@
 import { mapState } from 'vuex'
 import Ticker from './Ticker.vue'
 import BaseButton from './BaseButton'
+import SubscribeButton from './SubscribeButton'
 import LaunchOverviewRow from './LaunchOverviewRow'
 import LaunchOverviewItem from './LaunchOverviewItem'
 import launchMixin from '../mixins/launch.js'
@@ -86,6 +90,7 @@ export default {
     LaunchOverviewItem,
     Ticker,
     BaseButton,
+    SubscribeButton,
   },
   mixins: [ launchMixin ],
   computed: {
@@ -121,11 +126,11 @@ export default {
     align-items: center;
     flex-flow: column;
     padding: 1.4em;
+    padding-top: 0;
     min-width: 0;
     text-align: center;
     font-size: 13px;
     animation: fade-in .25s;
-    margin-top: 2em;
     width: 100%;
 
     > * {
@@ -150,6 +155,19 @@ export default {
       }
     }
 
+    &__subscribe {
+      display: flex;
+      justify-content: flex-end;
+      width: 100%;
+      font-size: .6em;
+      margin-top: 0;
+
+      @media only screen and (min-width: 640px) {
+        margin-top: $margin;
+        font-size: .8em;
+      }
+    }
+
     &__title {
       font-weight: 500;
       font-size: 1.8em;
@@ -179,7 +197,7 @@ export default {
     }
     &__desc {
       font-size: 1.2em;
-      line-height: 1.5em;
+      line-height: 2em;
     }
     &__watch {
       font-size: 1em;