Firebase ♥️ Web

Get to know what Firebase improved support for web apps even more like Google Analytics, Remote Config, Cloud Messaging, and Performance Monitoring.

Transcript

1. GDG Thailand Firebase Thailand Organized by Firebase ♥ Web Thanongkiat Tamtai Doosoft
2. #FirebaseDevDay
3. #FirebaseDevDay Google Analytics for Firebase
4. #FirebaseDevDay
5. #FirebaseDevDay Integrations with other services - BigQuery - Crashlytics - Firebase Cloud Messaging - Firebase Remote Config - Firebase A/B Testing - Firebase Predictions - Google Tag Manager
6. #FirebaseDevDay var firebaseConfig = { apiKey: "api-key", authDomain: "project-id.firebaseapp.com", databaseURL: "https://project-id.firebaseio.com", projectId: "project-id", storageBucket: "project-id.appspot.com", messagingSenderId: "sender-id", appId: "app-id", measurementId: "G-measurement-id", };
7. #FirebaseDevDay
8. #FirebaseDevDay const analytics = firebase.analytics() analytics.logEvent('login', { eventParameters }) firebase.auth().onAuthStateChanged( async user => { user && analytics.setUserId(user.uid) }) firebase.auth().onIdTokenChanged(async user => { user && analytics.setUserProperties({ userTokenParameters }) })
9. #FirebaseDevDay exports.sendCouponOnPurchase = functions.analytics.event('in_app_purchase').onLog((event) => { const user = event.user; const uid = user.userId; const purchaseValue = event.valueInUSD; const userLanguage = user.deviceInfo.userDefaultLanguage; const Platform = event.user.appInfo.appPlatform if (purchaseValue > 500 && Platform === ‘Web’) { return sendHighValueCouponViaFCM(uid, userLanguage); } return sendCouponViaFCM(uid, userLanguage); }); Integrate with Firebase Cloud Functions
10. #FirebaseDevDay Firebase Remote Config
11. #FirebaseDevDay
12. #FirebaseDevDay
13. #FirebaseDevDay
14. #FirebaseDevDay
15. #FirebaseDevDay
16. #FirebaseDevDay const remoteConfig = firebase.remoteConfig(); remoteConfig.settings = { minimumFetchIntervalMillis: 3600000, }; remoteConfig.defaultConfig = ({ 'welcome_message': 'Welcome', }); remoteConfig.fetchAndActivate().then(() => { showWelcomeMessage(); }) const welcomeMessage = remoteConfig.getValue('welcome_message')
17. #FirebaseDevDay Firebase Cloud Messaging
18. #FirebaseDevDay
19. #FirebaseDevDay
20. #FirebaseDevDay
21. #FirebaseDevDay
22. #FirebaseDevDay Message JSON representation { "name": string, "data": { string: string, ... }, "notification": { object (Notification) }, "android": { object (AndroidConfig) }, "webpush": { object (WebpushConfig) }, "apns": { object (ApnsConfig) }, "fcm_options": { object (FcmOptions) }, // Pick 1 "token": string, "topic": string, "condition": string }
23. #FirebaseDevDay Notification JSON representation { "title": string, "body": string, "image": string }
24. #FirebaseDevDay Webpush JSON representation { "headers": { string: string, // Urgency: ’low’, TTL: 600 , Content-Type: text/plain;charset=utf8 }, "data": { string: string, }, "notification": { object }, "fcm_options": { { "link": string } } }
25. #FirebaseDevDay POST https://fcm.googleapis.com/v1/projects/myproject-b5ae1/messages:send HTTP/1.1 Content-Type: application/json Authorization: Bearer ya29.ElqKBGN2Ri_Uz...PbJ_uNasm { "message": { "token" : <token of destination app>, "notification": { "title": "FCM Message", "body": "This is a message from FCM" }, "webpush": { "headers": { "Urgency": "high" }, "notification": { "body": "This is a message from FCM to web", "requireInteraction": "true", "badge": "/badge-icon.png" } } } }
26. #FirebaseDevDay WebAPI > Notification https://developer.mozilla.org/en-US/docs/Web/API/notification/Notification
27. #FirebaseDevDay https://tools.ietf.org/html/rfc8030
28. #FirebaseDevDay Firebase Performance Monitoring
29. #FirebaseDevDay const perf = firebase.performance()
30. #FirebaseDevDay const perf = firebase.performance()
31. #FirebaseDevDay
32. #FirebaseDevDay
33. #FirebaseDevDay const fooScreen = perf.trace('fooScreen') ngOnInit() { fooScreen.start() } ngOnDestroy() { fooScreen.stop() }
34. #FirebaseDevDay const fooQueryTrace = perf.trace('fooQuery') const fooQueryRef = firebase.firestore().collection('eiei') fooQueryTrace.start() const fooQueryRes = await fooQueryRef.get() fooQueryTrace.incrementMetric('totalFooSize', fooQueryRes.size) fooQueryTrace.putMetric('itemFooSize', fooQueryRes.size) fooQueryTrace.stop()
35. #FirebaseDevDay Monitor HTTP/S network requests example.com/*/animals/** • example.com/singapore/animals • example.com/australia/animals/spiders • example.com/australia/animals/marsupials/koala.png
36. Thank You! #FirebaseDevDay Helpful resources fb.com/FirebaseThailand fb.com/groups/FirebaseDevTH medium.com/FirebaseThailand Thanongkiat Tamtai