bfmarks/iterablewebpush

Shortening the Webpush process to a few lines of code.

Firebase Files

Add the manifest.json file to the route of your project. It must be accessible from the URL, similar to this example:

Add the firebase-messaging-sw.js file right next to the manifest.json file.

Setup Project and Add Code

1. Create your project on the Firebase Console. Name your project

2. Open the Cloud Messaging tab of the Firebase console Settings pane and scroll to the Web configuration section.

3. In the Web Push certificates tab, click Generate Key Pair. The console displays a notice that the key pair was generated, and displays the public key string and date added.

The key pair is your Firebase webpush certificate.

4. Add the github code to your HTML file in the <script> section

5. Change the credentials to your firebase credentials and Iterable credentials. Don't forget the SENDER ID in the firebase-messaging-sw.js file.

6. Add the requestPermission() function to the place in your code that you want to trigger the permission popup. Typically, it’s right after signup once you have the user email.

7. Add the users email to the email variable

8. Call the deleteToken() function when a user refreshes the page as this will acquire the latest token and re-update it to the Iterable server. It is recommended to put this in periodically to ensure you have the most up-to-date browser token.

9. Got to your Iterable App and add your Server Key from Firebase.

TESTING:

Open the Chrome console (option+command+j), collect the current browser token from the console and add it the “Send test push” highlighted section in Iterable Integration page. You should receive a test push on your browser.

NOTES:

• The webpush popup will not appear if the page is front and center. It must be minimized or backgrounded.

• If the popup fails, Chrome may also need to be reset.