first commit

examples/with-firebase-cloud-messaging/.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/with-firebase-cloud-messaging/README.md

@@ -0,0 +1,29 @@
+# With Firebase Cloud Messaging example
+
+To demo how to implement firebase cloud messaging to send web push notification in next.js.
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-firebase-cloud-messaging with-firebase-cloud-messaging-app
+```
+
+```bash
+yarn create next-app --example with-firebase-cloud-messaging with-firebase-cloud-messaging-app
+```
+
+```bash
+pnpm create next-app --example with-firebase-cloud-messaging with-firebase-cloud-messaging-app
+```
+
+## Set your send id
+
+set your `messagingSenderId` in `public/firebase-messaging-sw.js` and `utils/webPush.js`
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+
+## How to send a notification
+
+https://firebase.google.com/docs/cloud-messaging/js/first-message,

examples/with-firebase-cloud-messaging/package.json

@@ -0,0 +1,16 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "firebase": "^7.6.2",
+    "localforage": "^1.7.3",
+    "next": "latest",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {}
+}

examples/with-firebase-cloud-messaging/pages/index.js

@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+import { firebaseCloudMessaging } from "../utils/webPush";
+
+const Index = () => {
+  useEffect(() => {
+    firebaseCloudMessaging.init();
+  }, []);
+
+  return <div>Next.js with firebase cloud messaging.</div>;
+};
+
+export default Index;

examples/with-firebase-cloud-messaging/public/firebase-messaging-sw.js

@@ -0,0 +1,12 @@
+/* global importScripts, firebase */
+importScripts("https://www.gstatic.com/firebasejs/7.9.1/firebase-app.js");
+importScripts("https://www.gstatic.com/firebasejs/7.9.1/firebase-messaging.js");
+
+firebase.initializeApp({
+  apiKey: "YOUR-API-KEY",
+  projectId: "YOUR-PROJECT-ID",
+  messagingSenderId: "YOUR-SENDER-ID",
+  appId: "YOUR-APP-ID",
+});
+
+firebase.messaging();

examples/with-firebase-cloud-messaging/utils/webPush.js

@@ -0,0 +1,35 @@
+import "firebase/messaging";
+import firebase from "firebase/app";
+import localforage from "localforage";
+
+const firebaseCloudMessaging = {
+  tokenInlocalforage: async () => {
+    return localforage.getItem("fcm_token");
+  },
+
+  init: async function () {
+    firebase.initializeApp({
+      apiKey: "YOUR-API-KEY",
+      projectId: "YOUR-PROJECT-ID",
+      messagingSenderId: "YOUR-SENDER-ID",
+      appId: "YOUR-APP-ID",
+    });
+
+    try {
+      if ((await this.tokenInlocalforage()) !== null) {
+        return false;
+      }
+
+      const messaging = firebase.messaging();
+      await Notification.requestPermission();
+      const token = await messaging.getToken();
+
+      localforage.setItem("fcm_token", token);
+      console.log("fcm_token", token);
+    } catch (error) {
+      console.error(error);
+    }
+  },
+};
+
+export { firebaseCloudMessaging };