Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Notifications with Firebase

Web Notifications with Firebase

Avatar for Filip Prochazka

Filip Prochazka

January 25, 2017
Tweet

More Decks by Filip Prochazka

Other Decks in Programming

Transcript

  1. Auth Login providers & User management Third party providers •

    Google • Facebook • … E-mail/password Integrated with DB
  2. Firebase library <script src="https://www.gstatic.com/firebasejs/3.6.2/firebase.js"></script> <script> // Initialize Firebase // TODO:

    Replace with your project's customized code snippet var config = { apiKey: "<API_KEY>", authDomain: "<PROJECT_ID>.firebaseapp.com", databaseURL: "https://<DATABASE_NAME>.firebaseio.com", storageBucket: "<BUCKET>.appspot.com", messagingSenderId: "<SENDER_ID>", }; firebase.initializeApp(config); </script>
  3. Show notification const data = payload.data; const notificationTitle = 'Your

    order state changed'; const notificationOptions = { body: `The order is now '${data.state}'.`, icon: '/images/shop-icon-128.png' }; return self.registration.showNotification(notificationTitle, notificationOptions);
  4. Hide the UI if we have the permission <template is="dom-if"

    if="[[!fcmActive]]"> <h2>Enable notifications?</h2> <p>We will send you notifications when order status changes.</p> <shop-button responsive> <a on-tap="_requestFcm" href="#">Enable</a> </shop-button> </template> <template is="dom-if" if="[[fcmActive]]"> <h2>You will be notified about order status changes</h2> </template>