Skip to content

Shortening the Webpush process to a few lines of code.

Notifications You must be signed in to change notification settings

BFMarks/IterableWebPush

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Firebase Files

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

alt text

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.

image alt text

The key pair is your Firebase webpush certificate.

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

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

  3. 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.

  4. Add the users email to the email variable

  5. 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.

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

image alt text

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.

image alt text

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.

About

Shortening the Webpush process to a few lines of code.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published