diff --git a/docs/messaging/messaging.md b/docs/messaging/messaging.md index 65d3dfd71..647acd8ab 100644 --- a/docs/messaging/messaging.md +++ b/docs/messaging/messaging.md @@ -50,6 +50,34 @@ You can either use the `firebase-messaging-sw.js` file provided in the docs or y ], ``` +[Warning] Remember update the `firebase-messaging-sw.js` everytime you update the `firebase` in package.json. The missmatch version could lead to unable to receive notification in `foreground`, you can create your `firebase-messaging-sw.js` like this: + +```js +// 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/[the number of version matching with firebase in package.json]/firebase-app.js'); +importScripts('https://www.gstatic.com/firebasejs/[for example: 7.16.1]/firebase-messaging.js'); + +// Initialize the Firebase app in the service worker by passing in the +// messagingSenderId. + +firebase.initializeApp({ + apiKey: '', + authDomain: '', + databaseURL: '', + projectId: '', + storageBucket: '', + messagingSenderId: '' +}); + +// Retrieve an instance of Firebase Messaging so that it can handle background +// messages. +const messaging = firebase.messaging(); + + +``` + ### Requesting permission Once you have the Firebase Messaging Service Worker set up and installed, you need to request permission to send a user notifications. While the browser will popup a UI for you, it is highly recommend to ask the user for permission with a custom UI and only ask when it makes sense. If you blindly ask for permission, you have an extremely high chance of getting denied or blocked.