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

Firebase for the Web

Firebase for the Web

Otemuyiwa Prosper

November 26, 2016
Tweet

More Decks by Otemuyiwa Prosper

Other Decks in Programming

Transcript

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

    ❖ Blogger at goodheads.io ❖ Open Sourcerer ❖ Self-Acclaimed Evangelist ❖ Fire Ambassador ❖ Google Developer Expert @unicodeveloper
  2. #DevFest16 #DevFest16 Firebase for Web offers what? ❖ Authentication ❖

    Dynamic Links ❖ Hosting ❖ Realtime Database ❖ Storage ❖ Web Push Notifications via Cloud Messaging
  3. #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
  4. #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
  5. #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
  6. #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?
  7. #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?
  8. #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
  9. #DevFest16 #DevFest16 Firebase Dynamic links => Implementation can be found

    in the docs https://firebase.google.com/docs/dynamic-links/use-case s/web-to-app
  10. #DevFest16 #DevFest16 Firebase Storage You need no server, fam!!! Pictures,

    Video, Audio,.... Cast them upon me for I care for you - Firebase FIREBASE
  11. #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
  12. #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
  13. #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
  14. #DevFest16 #DevFest16 Firebase Cloud Messaging ❖ Import Firebase into the

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

    message in the service work. Helps for when the web page page isn’t open!