WIP AngularFireMessaging

firebase-messaging-sw.js

@@ -0,0 +1,8 @@
+importScripts('https://www.gstatic.com/firebasejs/4.9.0/firebase-app.js');
+importScripts('https://www.gstatic.com/firebasejs/4.9.0/firebase-messaging.js');
+
+firebase.initializeApp({
+  'messagingSenderId': '920323787688'
+});
+
+const messaging = firebase.messaging();

karma.conf.js

@@ -27,13 +27,22 @@ module.exports = function(config) {
       'karma-test-shim.js',
       'node_modules/firebase/firebase.js',
       'node_modules/firebase/firebase-firestore.js',
+
+      // This service worker is loaded by a service worker registration
+      { 
+        pattern: 'firebase-messaging-sw.js', 
+        included: false 
+      },
+
       'dist/packages-dist/bundles/core.umd.{js,map}',
       'dist/packages-dist/bundles/auth.umd.{js,map}',
       'dist/packages-dist/bundles/database.umd.{js,map}',
       'dist/packages-dist/bundles/firestore.umd.{js,map}',
       'dist/packages-dist/bundles/storage.umd.{js,map}',
+      'dist/packages-dist/bundles/messaging.umd.{js,map}',
       'dist/packages-dist/bundles/database-deprecated.umd.{js,map}',
       'dist/packages-dist/bundles/test.umd.{js,map}',
+
     ],
 
     port: 9876,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angularfire2",
-  "version": "5.0.0-rc.6",
+  "version": "5.0.0-rc.7",
   "description": "The official library of Firebase and Angular.",
   "private": true,
   "scripts": {

src/messaging/index.spec.ts

@@ -0,0 +1 @@
+export * from './messaging.spec';

src/messaging/index.ts

@@ -0,0 +1 @@
+export * from './public_api';

src/messaging/messaging.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { AngularFireModule, FirebaseApp } from 'angularfire2';
+import { AngularFireMessaging } from './messaging';
+import '@firebase/messaging';
+
+export function _getAngularFireMessaging(app: FirebaseApp) {
+  return new AngularFireMessaging(app);
+}
+
+export const AngularFireMessagingProvider = {
+  provide: AngularFireMessaging,
+  useFactory: _getAngularFireMessaging,
+  deps: [ FirebaseApp ]
+};
+
+export const STORAGE_PROVIDERS = [
+  AngularFireMessagingProvider,
+];
+
+@NgModule({
+  imports: [ AngularFireModule ],
+  providers: [ STORAGE_PROVIDERS ]
+})
+export class AngularFireMessagingModule { }

src/messaging/messaging.spec.ts

@@ -0,0 +1,51 @@
+import { COMMON_CONFIG } from './test-config';
+import { FirebaseApp as FBApp } from '@firebase/app-types';
+import { Observable } from 'rxjs/Observable'
+import { forkJoin } from 'rxjs/observable/forkJoin';
+import { TestBed, inject } from '@angular/core/testing';
+import { FirebaseApp, FirebaseAppConfig, AngularFireModule } from 'angularfire2';
+import { AngularFireMessaging, AngularFireMessagingModule } from 'angularfire2/messaging';
+import * as firebase from 'firebase/app';
+import 'firebase/messaging';
+
+xdescribe('AngularFireMessaging', () => {
+  let app: firebase.app.App;
+  let afMessaging: AngularFireMessaging;
+
+  beforeAll((done: any) => {
+    navigator.serviceWorker.register('/base/firebase-messaging-sw.js')
+    .then((registration) => {
+      app = firebase.initializeApp(COMMON_CONFIG, 'SW-REG');
+      app.messaging!().useServiceWorker(registration);
+      afMessaging = new AngularFireMessaging(app as any);
+      done();
+    })
+    .catch(e => {
+      console.error(e);
+      done.fail();
+    })
+  });
+
+  it('should exist', () => {
+    expect(afMessaging instanceof AngularFireMessaging).toBe(true);
+  });
+
+  it('should have the Firebase messaging instance', () => {
+    expect(afMessaging.messaging).toBeDefined();
+  });
+
+  it('should get request permission and get a token', (done) => {
+    afMessaging.requestToken.subscribe(token => {
+      expect(typeof token === 'string').toBe(true);
+      done();
+    }, done.fail);
+  });
+
+  it('should give me a token', (done) => {
+    afMessaging.getToken.subscribe(token => {
+      expect(typeof token === 'string').toBe(true);
+      done();
+    }, done.fail);
+  });
+
+});

src/messaging/messaging.ts

@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { FirebaseApp } from 'angularfire2';
+import { FirebaseMessaging } from '@firebase/messaging-types';
+import { requestPermission } from './observable/request-permission';
+import { from } from 'rxjs/observable/from';
+import { mergeMap } from 'rxjs/operators';
+
+@Injectable()
+export class AngularFireMessaging {
+  messaging: FirebaseMessaging;
+  requestPermission: Observable<void>;
+  getToken: Observable<string>;
+  tokenChanges: Observable<string>;
+  messages: Observable<{}>;
+  requestToken: Observable<string>;
+
+  constructor(public app: FirebaseApp) {
+    this.messaging = app.messaging();
+
+    this.requestPermission = requestPermission(this.messaging);
+
+    this.getToken = from(this.messaging.getToken()!);
+
+    this.tokenChanges = new Observable(subscriber => {
+      this.messaging.getToken()!.then(t => subscriber.next(t));
+      this.messaging.onTokenRefresh(subscriber);
+    });
+
+    this.messages = new Observable(subscriber => {
+      this.messaging.onMessage(subscriber);
+    });
+
+    this.requestToken = this.requestPermission.pipe(
+      mergeMap(() => this.tokenChanges)
+    );
+
+  }
+
+  deleteToken(token: string) {
+    return from(this.messaging.deleteToken(token)!);
+  }
+
+}

src/messaging/observable/request-permission.ts

@@ -0,0 +1,7 @@
+import { Observable } from 'rxjs';
+import { from } from 'rxjs/observable/from';
+import { FirebaseMessaging } from '@firebase/messaging-types';
+
+export function requestPermission(messaging: FirebaseMessaging): Observable<void> {
+  return from(messaging.requestPermission()!);
+}

src/messaging/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "angularfire2/messaging",
+  "version": "ANGULARFIRE2_VERSION",
+  "description": "The messaging module",
+  "main": "../bundles/messaging.umd.js",
+  "module": "index.js",
+  "es2015": "./es2015/index.js",
+  "keywords": [
+    "angular",
+    "firebase",
+    "rxjs"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/angular/angularfire2.git"
+  },
+  "author": "angular,firebase",
+  "license": "MIT",
+  "peerDependencies": {
+    "angularfire2": "ANGULARFIRE2_VERSION",
+    "@angular/common": "ANGULAR_VERSION",
+    "@angular/core": "ANGULAR_VERSION",
+    "@angular/platform-browser": "ANGULAR_VERSION",
+    "@angular/platform-browser-dynamic": "ANGULAR_VERSION",
+    "@firebase/app": "FIREBASE_APP_VERSION",
+    "@firebase/messaging": "FIREBASE_MESSAGING_VERSION",
+    "rxjs": "RXJS_VERSION",
+    "zone.js": "ZONEJS_VERSION"
+  },
+  "typings": "index.d.ts"
+}

src/messaging/public_api.ts

@@ -0,0 +1,3 @@
+export * from './observable/request-permission';
+export * from './messaging';
+export * from './messaging.module';

src/messaging/test-config.ts

@@ -0,0 +1,8 @@
+
+export const COMMON_CONFIG = {
+  apiKey: "AIzaSyBVSy3YpkVGiKXbbxeK0qBnu3-MNZ9UIjA",
+  authDomain: "angularfire2-test.firebaseapp.com",
+  databaseURL: "https://angularfire2-test.firebaseio.com",
+  storageBucket: "angularfire2-test.appspot.com",
+  messagingSenderId: "920323787688"
+};

src/messaging/tsconfig-build.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "module": "es2015",
+    "target": "es2015",
+    "noImplicitAny": false,
+    "outDir": "../../dist/packages-dist/messaging/es2015",
+    "rootDir": ".",
+    "sourceMap": true,
+    "inlineSources": true,
+    "declaration": false,
+    "removeComments": true,
+    "strictNullChecks": true,
+    "lib": ["es2015", "dom", "es2015.promise", "es2015.collection", "es2015.iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "paths": {
+      "angularfire2": ["../../dist/packages-dist"]
+    }
+  },
+  "files": [
+    "index.ts",
+    "../../node_modules/zone.js/dist/zone.js.d.ts"
+  ],
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "enableSummariesForJit": false
+  }
+}
+

src/messaging/tsconfig-esm.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig-build.json",
+  "compilerOptions": {
+    "target": "es5",
+    "outDir": "../../dist/packages-dist/messaging",
+    "declaration": true
+  },
+  "files": [
+    "public_api.ts",
+    "../../node_modules/zone.js/dist/zone.js.d.ts"
+  ],
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "enableSummariesForJit": false,
+    "flatModuleOutFile": "index.js",
+    "flatModuleId": "angularfire2/messaging"
+  }    
+}

src/messaging/tsconfig-test.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig-esm.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "angularfire2": ["../../dist/packages-dist"]
+    }
+  },
+  "files": [
+    "index.spec.ts",
+    "../../node_modules/zone.js/dist/zone.js.d.ts"
+  ]
+}

src/root.spec.js

@@ -12,6 +12,19 @@ export * from './packages-dist/database/list/snapshot-changes.spec';
 export * from './packages-dist/database/list/state-changes.spec';
 export * from './packages-dist/database/list/audit-trail.spec';
 export * from './packages-dist/storage/storage.spec';
+export * from './packages-dist/messaging/messaging.spec';
+
+// navigator.serviceWorker.register('http://localhost:9876/base/firebase-messaging-sw.js')
+// .then(registration => {
+//   debugger;
+//   const app = firebase.initializeApp({
+//     'messagingSenderId': '920323787688'
+//   }, 'MESSAGING');
+//   app.messaging().useServiceWorker(registration);
+// })
+// .catch(e => {
+//   console.error(e);
+// })
 
 // // Since this a deprecated API, we run on it on manual tests only
 // // It needs a network connection to run which makes it flaky on Travis

src/tsconfig.json

@@ -15,6 +15,7 @@
       "angularfire2/database": ["./database"],
       "angularfire2/firestore": ["./firestore"],
       "angularfire2/storage": ["./storage"],
+      "angularfire2/messaging": ["./messaging"],
       "angularfire2/database-deprecated": ["./database-deprecated"]
     },
     "rootDir": ".",