Move quickstart-js snippets (#86)

Author: samtstern

lerna.json

@@ -10,10 +10,12 @@
     "functions",
     "functions-next",
     "installations",
+    "messaging",
     "perf",
     "perf-next",
     "remoteconfig",
-    "remoteconfig-next"
+    "remoteconfig-next",
+    "storage"
   ],
   "version": "1.0.0"
 }

messaging/index.js

@@ -0,0 +1,70 @@
+import firebase from "firebase/app";
+import "firebase/messaging";
+
+function getMessagingObject() {
+  // [START messaging_get_messaging_object]
+  const messaging = firebase.messaging();
+  // [END messaging_get_messaging_object]
+}
+
+function receiveMessage() {
+  const messaging = firebase.messaging();
+  // [START messaging_receive_message]
+  // Handle incoming messages. Called when:
+  // - a message is received while the app has focus
+  // - the user clicks on an app notification created by a service worker
+  //   `messaging.onBackgroundMessage` handler.
+  messaging.onMessage((payload) => {
+    console.log('Message received. ', payload);
+    // ...
+  });
+  // [END messaging_receive_message]
+}
+
+function getToken() {
+  const messaging = firebase.messaging();
+  // [START messaging_get_token]
+  // Get registration token. Initially this makes a network call, once retrieved
+  // subsequent calls to getToken will return from cache.
+  messaging.getToken({ vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
+    if (currentToken) {
+      // Send the token to your server and update the UI if necessary
+      // ...
+    } else {
+      // Show permission request UI
+      console.log('No registration token available. Request permission to generate one.');
+      // ...
+    }
+  }).catch((err) => {
+    console.log('An error occurred while retrieving token. ', err);
+    // ...
+  });
+  // [END messaging_get_token]
+}
+
+function requestPermission() {
+  // [START messaging_request_permission]
+  Notification.requestPermission().then((permission) => {
+    if (permission === 'granted') {
+      console.log('Notification permission granted.');
+      // TODO(developer): Retrieve a registration token for use with FCM.
+      // ...
+    } else {
+      console.log('Unable to get permission to notify.');
+    }
+  });
+  // [END messaging_request_permission]
+}
+
+function deleteToken() {
+  const messaging = firebase.messaging();
+
+  // [START messaging_delete_token]
+  messaging.deleteToken().then(() => {
+    console.log('Token deleted.');
+    // ...
+  }).catch((err) => {
+    console.log('Unable to delete token. ', err);
+  });
+  // [END messaging_delete_token]
+}

messaging/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "messaging",
+  "version": "1.0.0",
+  "scripts": {
+    "compile": "cp ../tsconfig.json.template ./tsconfig.json && tsc"
+  },
+  "license": "Apache-2.0",
+  "dependencies": {
+    "firebase": "^8.2.3"
+  }
+}

messaging/service-worker.js

@@ -0,0 +1,53 @@
+import firebase from "firebase/app";
+import "firebase/messaging";
+
+// See: https://github.com/microsoft/TypeScript/issues/14877
+/** @type {ServiceWorkerGlobalScope} */
+let self;
+
+function initInSw() {
+  // [START messaging_init_in_sw]
+  // Give the service worker access to Firebase Messaging.
+  // Note that you can only use Firebase Messaging here. Other Firebase libraries
+  // are not available in the service worker.
+  importScripts('https://www.gstatic.com/firebasejs/8.2.3/firebase-app.js');
+  importScripts('https://www.gstatic.com/firebasejs/8.2.3/firebase-messaging.js');
+
+  // Initialize the Firebase app in the service worker by passing in
+  // your app's Firebase config object.
+  // https://firebase.google.com/docs/web/setup#config-object
+  firebase.initializeApp({
+    apiKey: 'api-key',
+    authDomain: 'project-id.firebaseapp.com',
+    databaseURL: 'https://project-id.firebaseio.com',
+    projectId: 'project-id',
+    storageBucket: 'project-id.appspot.com',
+    messagingSenderId: 'sender-id',
+    appId: 'app-id',
+    measurementId: 'G-measurement-id',
+  });
+
+  // Retrieve an instance of Firebase Messaging so that it can handle background
+  // messages.
+  const messaging = firebase.messaging();
+  // [END messaging_init_in_sw]
+}
+
+function onBackgroundMessage() {
+  const messaging = firebase.messaging();
+
+  // [START messaging_on_background_message]
+  messaging.onBackgroundMessage((payload) => {
+    console.log('[firebase-messaging-sw.js] Received background message ', payload);
+    // Customize notification here
+    const notificationTitle = 'Background Message Title';
+    const notificationOptions = {
+      body: 'Background Message body.',
+      icon: '/firebase-logo.png'
+    };
+  
+    self.registration.showNotification(notificationTitle,
+      notificationOptions);
+  });
+  // [END messaging_on_background_message]
+}

storage/index.js

@@ -0,0 +1,33 @@
+import firebase from "firebase/app";
+import "firebase/storage";
+
+/**
+ * @param {File} file 
+ */
+function storageOnComplete(file) {
+  // The file param would be a File object from a file selection event in the browser.
+  // See:
+  // - https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications
+  // - https://developer.mozilla.org/en-US/docs/Web/API/File
+
+  const metadata = {
+    'contentType': file.type
+  };
+
+  // [START storage_on_complete]
+  const storageRef = firebase.storage().ref();
+  storageRef.child('images/' + file.name).put(file, metadata)
+    .then((snapshot) => {
+      console.log('Uploaded', snapshot.totalBytes, 'bytes.');
+      console.log('File metadata:', snapshot.metadata);
+      // Let's get a download URL for the file.
+      snapshot.ref.getDownloadURL().then((url) => {
+        console.log('File available at', url);
+        // ...
+      });
+    }).catch((error) => {
+      console.error('Upload failed', error);
+      // ...
+    });
+  // [END storage_on_complete]
+}

storage/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "storage",
+  "version": "1.0.0",
+  "scripts": {
+    "compile": "cp ../tsconfig.json.template ./tsconfig.json && tsc"
+  },
+  "license": "Apache-2.0",
+  "dependencies": {
+    "firebase": "^8.2.3"
+  }
+}