feat: Push notifications using cloud messaging

package.json

@@ -30,6 +30,7 @@
     "@capacitor/core": "4.3.0",
     "@capacitor/haptics": "4.0.1",
     "@capacitor/keyboard": "4.0.1",
+    "@capacitor/push-notifications": "^4.1.2",
     "@capacitor/splash-screen": "^4.2.0",
     "@capacitor/status-bar": "4.0.1",
     "@ionic/angular": "^6.1.9",

src/app/components/auth/pages/profile/profile.page.html

@@ -24,6 +24,7 @@ <h2 class="section-header">Account</h2>
   </ion-row>
 
   <ion-progress-bar *ngIf="!userProfile$" type="indeterminate"></ion-progress-bar>
+  <ion-progress-bar *ngIf="images?.length < 0" type="indeterminate"></ion-progress-bar>
 
   <ion-item-group class="shadow-none rounded">
     <ion-item-divider>

src/app/components/home/home.page.html

@@ -10,9 +10,9 @@ <h2 class="section-header">{{welcomeMessage}}</h2>
       <button class="top-right-button" (click)="openProfile()">
         <ion-icon name="person-outline"></ion-icon>
       </button>
-      <button class="top-right-button" (click)="openNotification()">
+      <!-- <button class="top-right-button" (click)="openNotification()">
         <ion-icon name="notifications-outline"></ion-icon>
-      </button>
+      </button> -->
       <button id="open-modal" class="top-right-button" (click)="openModal()">
         <ion-icon name="add-outline"></ion-icon>
       </button>

src/app/components/home/home.page.ts

@@ -14,7 +14,12 @@ import { DocumentSnapshot } from '@angular/fire/firestore';
 import { OnlineStatusService, OnlineStatusType } from 'ngx-online-status';
 import { Subscription } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
-import { Router, ActivatedRoute } from '@angular/router';
+import {
+  ActionPerformed,
+  PushNotificationSchema,
+  PushNotifications,
+  Token,
+} from '@capacitor/push-notifications';
 
 @Component({
   selector: 'app-home',
@@ -54,6 +59,36 @@ export class HomePage implements OnInit, OnDestroy {
     this.checkOnlineStatus();
     this.presentingElement = document.querySelector('.ion-page');
     this.fetchImagePosts();
+    this.notificationStatus();
+  }
+
+  notificationStatus() {
+    PushNotifications.requestPermissions().then((result) => {
+      if (result.receive === 'granted') {
+        PushNotifications.register();
+      } else {
+
+      }
+    });
+
+    // On success, we should be able to receive notifications
+    PushNotifications.addListener('registration', (token: Token) => {
+    });
+
+    // Some issue with our setup and push will not work
+    PushNotifications.addListener('registrationError', (error: any) => {});
+
+    // Show us the notification payload if the app is open on our device
+    PushNotifications.addListener(
+      'pushNotificationReceived',
+      (notification: PushNotificationSchema) => {}
+    );
+
+    // Method called when tapping on a notification
+    PushNotifications.addListener(
+      'pushNotificationActionPerformed',
+      (notification: ActionPerformed) => {}
+    );
   }
 
   ngOnDestroy() {