Save 37% off PRO during our Black Friday Sale! »

Firebase for the Web

Firebase for the Web


Otemuyiwa Prosper

November 26, 2016


  1. #DevFest16 FIREBASE FOR THE WEB Prosper Otemuyiwa - @unicodeveloper

  2. #DevFest16 #DevFest16 WHO AM I? ❖ Technical Writer at Auth0

    ❖ Blogger at ❖ Open Sourcerer ❖ Self-Acclaimed Evangelist ❖ Fire Ambassador ❖ Google Developer Expert @unicodeveloper
  3. #DevFest16 #DevFest16 Firebase? what do you mean? LIGHT UP THAT

  4. #DevFest16 #DevFest16 Firebase for Web offers what? ❖ Authentication ❖

    Dynamic Links ❖ Hosting ❖ Realtime Database ❖ Storage ❖ Web Push Notifications via Cloud Messaging
  5. #DevFest16

  6. #DevFest16 #DevFest16 Firebase Authentication

  7. #DevFest16 #DevFest16 Firebase Authentication => Stop Overthinking it, Just Configure

    & Move On ❖ Email and password auth ❖ Google ❖ Facebook ❖ Twitter ❖ Github ❖ Custom auth ❖ Anonymous ❖ Account Linking - Link Multiple Auth providers to an acct
  8. #DevFest16 #DevFest16 Firebase Authentication var auth = firebase.auth(); Work with

    Email and Password Authentication auth.signInWithEmailAndPassword(email,pwd); => returns a promise to resolve user’s data auth.createUserWithEmailAndPassword(email, pwd); => returns a promise auth.onAuthStateChanged(user => {} ); => tracks auth state
  9. #DevFest16 ….Enable the type of auth provider that you want

  10. #DevFest16 ….app.js

  11. #DevFest16 ….app.js

  12. #DevFest16 ….Email Address Verification ….Password reset

  13. #DevFest16

  14. #DevFest16

  15. #DevFest16 #DevFest16 Firebase Realtime Database => REALTIME EVENTS • Value

    Event ◦ Add ◦ Edit ◦ Delete • Child Event ◦ Child_added - gets called when a child has been added ◦ Child_changed - Gets called when children have been changed ◦ Child_removed - gets called when children have been removed ◦ Add, Modified, Deleted ◦ Granular control over data synchronization ◦ Great for lists
  16. #DevFest16 #DevFest16 Firebase Dynamic links => Use Case • Great

    Mobile Website • Awesome and Beautiful Native App ...but conversion is higher on native than on the web?
  17. #DevFest16 Business Mindset Kicks In: • How do I double

    conversion rates? • Since native is doing really well, how do I convert more mobile web users to native? What do I do, @unicodeveloper?
  18. #DevFest16 …….let’s ask firebase

  19. #DevFest16 => Use Firebase Dynamic Links • Make your mobile

    app deep-linkable • Add “Open in app” links to your web pages • The user will be directed to the corresponding page in your app from the mobile website
  20. #DevFest16 #DevFest16 Firebase Dynamic links => Implementation can be found

    in the docs s/web-to-app
  21. #DevFest16 #DevFest16 Firebase Storage You need no server, fam!!! Pictures,

    Video, Audio,.... Cast them upon me for I care for you - Firebase FIREBASE
  22. #DevFest16

  23. #DevFest16

  24. #DevFest16 #DevFest16 Firebase Hosting • Production grade static hosting •

    Deploy web apps to a global CDN in a single command • Deployed apps automatically provisioned an SSL Certificate - BOOM!!! Install firebase tools to get started: • npm install -g firebase-tools Firebase deploy
  25. #DevFest16

  26. #DevFest16 #DevFest16 Firebase Cloud Messaging ❖ Send Push Messages to

    your users ❖ Get an FCM token ❖ Show a notification when a push message is received ❖ Crash Reporting ❖ Cloud Messaging ❖ Realtime Database ❖ Remote Config
  27. #DevFest16 #DevFest16 Firebase Cloud Messaging ❖ Baby Steps after initiating

    the Messaging Service • Create a service worker file • Get the FCM token How do you now show a notification: Two ways => • If the web page is closed, the message will be received in your service worker file. • If the web page is opened, the push message will be received inside your web page
  28. #DevFest16 #DevFest16 Firebase Cloud Messaging ❖ Import Firebase into the

    service worker file ❖ Initialize Firebase in the service worker
  29. #DevFest16 #DevFest16 Firebase Cloud Messaging ❖ Set handler to receive

    message in the service work. Helps for when the web page page isn’t open!
  30. #DevFest16 #DevFest16 Learning Resources pMOZgyg6XcIGBu2OX

  31. #DevFest16 #DevFest16 Any Questions?