feat(core): support web-push notifications with OneSignal

juliomrqz · Jun 13, 2019 · 2adff5e · 2adff5e
1 parent 6952de3
commit 2adff5e
Show file tree

Hide file tree

Showing 17 changed files with 148 additions and 2 deletions.
diff --git a/packages/@statusfy/core/.gitignore b/packages/@statusfy/core/.gitignore
@@ -85,3 +85,4 @@ client/.tmp
 client/locales/*.js
 sw.*
 test/.tmp
+OneSignalSDK*
diff --git a/packages/@statusfy/core/client/assets/css/styles.css b/packages/@statusfy/core/client/assets/css/styles.css
@@ -535,7 +535,11 @@ main {
         @apply flex flex-col items-center py-6;
 
         > div {
-          @apply flex items-center py-6 text-center;
+          @apply flex flex-col items-center py-6 text-center;
+
+          p {
+            @apply my-4;
+          }
         }
       }
     }

diff --git a/packages/@statusfy/core/client/components/Subscribe.vue b/packages/@statusfy/core/client/components/Subscribe.vue
@@ -97,6 +97,17 @@
               "
             />
           </div>
+          <div v-if="tabs.webpush" v-show="selectedTab === 'webpush'">
+            <div v-if="isEnabledPushNotifications">
+              <strong>{{ $t("notifications.items.webpush.enabled") }}</strong>
+            </div>
+            <div v-else>
+              <p>{{ $t("notifications.items.webpush.description") }}</p>
+              <button class="btn" @click="enablePushNotifications">
+                {{ $t("notifications.items.webpush.enable") }}
+              </button>
+            </div>
+          </div>
         </div>
         <!-- eslint-enable -->
       </div>
@@ -111,7 +122,8 @@ export default {
   data() {
     return {
       isModalActive: false,
-      selectedTab: null
+      selectedTab: null,
+      isEnabledPushNotifications: false
     };
   },
   computed: {
@@ -142,12 +154,28 @@ export default {
       };
     }
   },
+  mounted() {
+    if (this.$statusfy.notifications.webpush) {
+      this.$OneSignal.push(() => {
+        this.$OneSignal.isPushNotificationsEnabled(isEnabled => {
+          this.isEnabledPushNotifications = isEnabled;
+        });
+      });
+    }
+  },
   methods: {
     toggleModal() {
       this.isModalActive = !this.isModalActive;
     },
     switchTab(key) {
       this.selectedTab = key;
+    },
+    enablePushNotifications() {
+      this.$OneSignal.push(() => {
+        this.$OneSignal.registerForPushNotifications().then(e => {
+          this.toggleModal();
+        });
+      });
     }
   }
 };

diff --git a/packages/@statusfy/core/client/locales/br-default.json b/packages/@statusfy/core/client/locales/br-default.json
@@ -95,6 +95,12 @@
       "support": {
         "title": "Suporte",
         "description": "Visite nosso <a href=\"{url}\" target=\"_blank\" rel=\"noopener\">Site de Suporte</a>."
+      },
+      "webpush": {
+        "title": "Push",
+        "description": "Notificações enviadas para o seu navegador.",
+        "enable": "Ativar Notificações",
+        "enabled": "As notificações estão habilitadas para este navegador."
       }
     }
   }

diff --git a/packages/@statusfy/core/client/locales/de-default.json b/packages/@statusfy/core/client/locales/de-default.json
@@ -95,6 +95,12 @@
       "support": {
         "title": "Support",
         "description": "Besuche unsere <a href=\"{url}\" target=\"_blank\" rel=\"noopener\">Support-Seite</a>."
+      },
+      "webpush": {
+        "title": "Push",
+        "description": "Benachrichtigungen, die an Ihren Browser gesendet werden.",
+        "enable": "Benachrichtigungen aktivieren",
+        "enabled": "Benachrichtigungen sind für diesen Browser aktiviert."
       }
     }
   }

diff --git a/packages/@statusfy/core/client/locales/en-default.json b/packages/@statusfy/core/client/locales/en-default.json
@@ -95,6 +95,12 @@
       "support": {
         "title": "Support",
         "description": "Visit our <a href=\"{url}\" target=\"_blank\" rel=\"noopener\">Support Site</a>."
+      },
+      "webpush": {
+        "title": "Push",
+        "description": "Notifications delivered to your browser.",
+        "enable": "Enable Notifications",
+        "enabled": "Notifications are enabled for this browser."
       }
     }
   }

diff --git a/packages/@statusfy/core/client/locales/es-default.json b/packages/@statusfy/core/client/locales/es-default.json
@@ -95,6 +95,12 @@
       "support": {
         "title": "Soporte",
         "description": "Visita nuestro <a href=\"{url}\" target=\"_blank\" rel=\"noopener\">Sitio de Soporte</a>."
+      },
+      "webpush": {
+        "title": "Push",
+        "description": "Notificaciones entregadas a tu navegador.",
+        "enable": "Activar Notificaciones",
+        "enabled": "Las notificaciones están habilitadas para este navegador."
       }
     }
   }

diff --git a/packages/@statusfy/core/client/locales/hu-default.json b/packages/@statusfy/core/client/locales/hu-default.json
@@ -95,6 +95,12 @@
       "support": {
         "title": "Támogatás",
         "description": "Látogassa meg a <a href=\"{url}\" target=\"_blank\" rel=\"noopener\">Támogatás weboldalunkat</a>."
+      },
+      "webpush": {
+        "title": "Push",
+        "description": "A böngészőbe küldött értesítések.",
+        "enable": "Értesítések engedélyezése",
+        "enabled": "Az értesítések engedélyezve vannak a böngészőben."
       }
     }
   }

diff --git a/packages/@statusfy/core/client/locales/it-default.json b/packages/@statusfy/core/client/locales/it-default.json
@@ -95,6 +95,12 @@
       "support": {
         "title": "Support",
         "description": "Visita il nostro <a href=\"{url}\" target=\"_blank\" rel=\"noopener\">Sito di Supporto</a>."
+      },
+      "webpush": {
+        "title": "Push",
+        "description": "Notifiche inviate al tuo browser.",
+        "enable": "Attivare le notifiche",
+        "enabled": "Le notifiche sono abilitate per questo browser."
       }
     }
   }

diff --git a/packages/@statusfy/core/lib/config/generate.js b/packages/@statusfy/core/lib/config/generate.js
@@ -1,4 +1,5 @@
 const fs = require("fs");
+const dotProp = require("dot-prop");
 const defaultsDeep = require("lodash/defaultsDeep");
 const { esm, logger, style, path } = require("@statusfy/common");
 
@@ -136,6 +137,25 @@ module.exports = function generateConfig(sourceDir, cliOptions) {
     if (siteConfig.analytics && siteConfig.analytics.ga) {
       nuxtConfig.workbox.offlineAnalytics = true;
     }
+
+    // onesignal notifications
+    const onesignalAppId = dotProp.get(
+      siteConfig.notifications,
+      "webpush.onesignal.appId"
+    );
+    if (onesignalAppId) {
+      nuxtConfig.modules.unshift("@nuxtjs/onesignal");
+
+      nuxtConfig.oneSignal = {
+        init: {
+          appId: onesignalAppId,
+          allowLocalhostAsSecureOrigin: true,
+          welcomeNotification: {
+            disable: true
+          }
+        }
+      };
+    }
   } else {
     const nuxtiPwaModuleConfig = nuxtConfig.modules.find(
       item => item[0] === "@nuxtjs/pwa"

diff --git a/packages/@statusfy/core/package.json b/packages/@statusfy/core/package.json
@@ -36,6 +36,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.19",
     "@nuxtjs/axios": "^5.5.4",
+    "@nuxtjs/onesignal": "^3.0.0-beta.16",
     "@nuxtjs/pwa": "^3.0.0-beta.16",
     "@statusfy/common": "0.3.2-beta.3",
     "@statusfy/markdown": "0.3.2-beta.3",
@@ -45,6 +46,7 @@
     "cross-env": "^5.2.0",
     "cross-spawn": "^6.0.5",
     "dayjs": "^1.8.14",
+    "dot-prop": "^5.1.0",
     "express": "^4.17.1",
     "feed": "^3.0.0",
     "helmet": "^3.18.0",

diff --git a/packages/@statusfy/core/test/config/__snapshots__/nuxt.spec.js.snap b/packages/@statusfy/core/test/config/__snapshots__/nuxt.spec.js.snap
@@ -113,6 +113,7 @@ Object {
   },
   "mode": "universal",
   "modules": Array [
+    "@nuxtjs/onesignal",
     "~/modules/statusfy",
     "@nuxtjs/axios",
     Array [
@@ -162,6 +163,15 @@ Object {
     "../.tmp/cli/node_modules",
     "../.tmp/advanced/node_modules",
   ],
+  "oneSignal": Object {
+    "init": Object {
+      "allowLocalhostAsSecureOrigin": true,
+      "appId": "onesignal-app-id",
+      "welcomeNotification": Object {
+        "disable": true,
+      },
+    },
+  },
   "plugins": Array [
     "~/plugins/axios",
     "~/plugins/vue-svgicon",
@@ -268,6 +278,11 @@ Object {
         "icalendar": true,
         "support": false,
         "twitter": false,
+        "webpush": Object {
+          "onesignal": Object {
+            "appId": "onesignal-app-id",
+          },
+        },
       },
       "serviceWorker": true,
       "short_title": "Short Title",
@@ -861,6 +876,7 @@ Object {
   },
   "mode": "universal",
   "modules": Array [
+    "@nuxtjs/onesignal",
     "~/modules/statusfy",
     "@nuxtjs/axios",
     Array [

diff --git a/packages/@statusfy/core/test/config/__snapshots__/site.spec.js.snap b/packages/@statusfy/core/test/config/__snapshots__/site.spec.js.snap
@@ -69,6 +69,11 @@ Object {
     "icalendar": true,
     "support": false,
     "twitter": false,
+    "webpush": Object {
+      "onesignal": Object {
+        "appId": "onesignal-app-id",
+      },
+    },
   },
   "serviceWorker": true,
   "short_title": "Short Title",

diff --git a/packages/@statusfy/core/test/config/fragments/config/advanced.js b/packages/@statusfy/core/test/config/fragments/config/advanced.js
@@ -24,5 +24,12 @@ module.exports = {
         color: "#3e4e88"
       }
     ]
+  },
+  notifications: {
+    webpush: {
+      onesignal: {
+        appId: "onesignal-app-id"
+      }
+    }
   }
 };
diff --git a/packages/demo/config.js b/packages/demo/config.js
@@ -1,3 +1,5 @@
+const oneSignalAppID = process.env.ONESIGNAL_APP_ID || '0c13819d-dd92-4c3e-a554-e7ab14c561af'
+
 module.exports = {
   title: 'Demo System Status',
   short_title: 'System Status',
@@ -50,6 +52,11 @@ module.exports = {
     support: {
       en: "https://statusfy.co/support",
       es: "https://statusfy.co/es/support"
+    },
+    webpush: {
+      onesignal: {
+        appId: oneSignalAppID
+      }
     }
   }
 }
diff --git a/packages/demo/test/__snapshots__/build-generate.spec.js.snap b/packages/demo/test/__snapshots__/build-generate.spec.js.snap
@@ -5,6 +5,7 @@ Object {
   "background_color": "#ffffff",
   "description": "A marvelous open source Status Page system",
   "display": "standalone",
+  "gcm_sender_id": "482941778795",
   "icons": Array [
     Object {
       "sizes": "16x16",

diff --git a/yarn.lock b/yarn.lock
@@ -2639,6 +2639,13 @@
   dependencies:
     "@nuxtjs/pwa-utils" "3.0.0-beta.16"
 
+"@nuxtjs/onesignal@^3.0.0-beta.16":
+  version "3.0.0-beta.16"
+  resolved "https://registry.yarnpkg.com/@nuxtjs/onesignal/-/onesignal-3.0.0-beta.16.tgz#88d31653c99308949c9551446746b39356a03cdc"
+  integrity sha512-wQViakFeEz21cz+WsRuJ+uKoxjmzT8w2CRr1FrzjZn8K4R4jqKWT7qP96YnxFHIR1/YErP+P22MkzNzawMNcUQ==
+  dependencies:
+    "@nuxtjs/pwa-utils" "3.0.0-beta.16"
+
 "@nuxtjs/opencollective@^0.2.0":
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/@nuxtjs/opencollective/-/opencollective-0.2.2.tgz#26a761ebf588cc92a422d7cee996a66bd6e2761e"
@@ -6367,6 +6374,13 @@ dot-prop@^4.1.0, dot-prop@^4.1.1, dot-prop@^4.2.0:
   dependencies:
     is-obj "^1.0.0"
 
+dot-prop@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.1.0.tgz#bdd8c986a77b83e3fca524e53786df916cabbd8a"
+  integrity sha512-n1oC6NBF+KM9oVXtjmen4Yo7HyAVWV2UUl50dCYJdw2924K6dX9bf9TTTWaKtYlRn0FEtxG27KS80ayVLixxJA==
+  dependencies:
+    is-obj "^2.0.0"
+
 download@^6.2.2:
   version "6.2.5"
   resolved "https://registry.yarnpkg.com/download/-/download-6.2.5.tgz#acd6a542e4cd0bb42ca70cfc98c9e43b07039714"
@@ -9175,6 +9189,11 @@ is-obj@^1.0.0, is-obj@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
   integrity sha1-PkcprB9f3gJc19g6iW2rn09n2w8=
 
+is-obj@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-2.0.0.tgz#473fb05d973705e3fd9620545018ca8e22ef4982"
+  integrity sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==
+
 is-object@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-object/-/is-object-1.0.1.tgz#8952688c5ec2ffd6b03ecc85e769e02903083470"