1

there.

I am developing Next.js App.

The app is needed custom service worker. I've implemented a push notification using Firebase Cloud Messaging. But I don't want to manage the environment variables in git.

Now, I'm implementing the feature by this code.

public/firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/8.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.8.1/firebase-messaging.js');

firebase.initializeApp({
  apiKey: "api-key",
  authDomain: "auth-domain",
  projectId: "project-id",
  storageBucket: "storage-bucket",
  messagingSenderId: "messaging-sender-id",
  appId: "app-id",
  measurementId: "measurement-id",
});

firebase.messaging();

firebase.messaging().setBackgroundMessageHandler((payload) => console.log('payload', payload));

I would like to achieve this with like:

importScripts('https://www.gstatic.com/firebasejs/8.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.8.1/firebase-messaging.js');

firebase.initializeApp({
  apiKey: process.env.NEXT_PUBLIC_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID,
});

firebase.messaging();

firebase.messaging().setBackgroundMessageHandler((payload) => console.log('payload', payload));

However, this javascript file must be placed in a public directory, and process.env.* cannot be used in a public direcotory.

How can I make this happen?

Wataru Ono
  • 31
  • 2
  • Why place in the public directory? – hulufei Sep 09 '21 at 09:04
  • And what will it do? Any request to firebase will still be made from your client side. Any curious user can extract your keys, etc. Also refer: [Is it safe to expose Firebase apiKey to the public?](https://stackoverflow.com/q/37482366). – brc-dd Sep 09 '21 at 09:26
  • @hulufei We are aware that files related to service workers must be placed in the `public` directory. Is this perception wrong? – Wataru Ono Sep 09 '21 at 10:45
  • I have given out a solution [here](https://stackoverflow.com/a/76818218/22182788) that helped me achieve this. – Mane Aug 02 '23 at 10:41

1 Answers1

0

I think you can just register and install service worker in your _app.js.

hulufei
  • 737
  • 1
  • 6
  • 17
  • I have already installed service worker in `_app.tsx`.And I can receive push notification in development environment. However, I can't receive that in production environment. – Wataru Ono Sep 13 '21 at 11:22
  • Are you missing the `.env.production` file? – hulufei Sep 13 '21 at 12:23
  • I solved the problem by referring to this article. Thank you for your help. https://stackoverflow.com/questions/62225339/how-to-use-process-env-in-a-react-service-worker – Wataru Ono Sep 14 '21 at 13:02
  • Which solution in that post worked for you? That post refers to CRA and not Nextjs. – Rafael Zasas Apr 11 '22 at 01:12