GSI - Employe Self Service Mobile
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

214 lines
9.2 KiB

2 months ago
  1. <!-- BADGES -->
  2. ![Build Status](https://img.shields.io/github/workflow/status/firebase/firebase-js-sdk/Run%20All%20Tests.svg)
  3. [![Version](https://img.shields.io/npm/v/firebase.svg?label=version)](https://www.npmjs.com/package/firebase)
  4. [![Coverage Status](https://coveralls.io/repos/github/firebase/firebase-js-sdk/badge.svg?branch=master)](https://coveralls.io/github/firebase/firebase-js-sdk?branch=master)
  5. <!-- END BADGES -->
  6. # Firebase - App success made simple
  7. ## Upgrade to Version 9
  8. Version 9 has a redesigned API that supports tree-shaking. Read the [Upgrade Guide](https://firebase.google.com/docs/web/modular-upgrade) to learn more.
  9. ## Overview
  10. [Firebase](https://firebase.google.com) provides the tools and infrastructure
  11. you need to develop, grow, and earn money from your app. This package supports
  12. web (browser), mobile-web, and server (Node.js) clients.
  13. For more information, visit:
  14. - [Firebase Realtime Database](https://firebase.google.com/docs/database/web/start) -
  15. The Firebase Realtime Database lets you store and query user data, and makes
  16. it available between users in realtime.
  17. - [Cloud Firestore](https://firebase.google.com/docs/firestore/quickstart) -
  18. Cloud Firestore is a flexible, scalable database for mobile, web, and server
  19. development from Firebase and Google Cloud Platform.
  20. - [Firebase Storage](https://firebase.google.com/docs/storage/web/start) -
  21. Firebase Storage lets you upload and store user generated content, such as
  22. files, and images.
  23. - [Cloud Functions for Firebase](https://firebase.google.com/docs/functions) -
  24. Cloud Functions for Firebase is a serverless framework that lets you automatically run backend code in response to events triggered by Firebase features and HTTPS requests.
  25. - [Firebase Cloud Messaging](https://firebase.google.com/docs/cloud-messaging/js/client) -
  26. Firebase Cloud Messaging is a cross-platform messaging solution that lets you
  27. reliably deliver messages at no cost.
  28. - [Firebase Performance Monitoring](https://firebase.google.com/docs/perf-mon/get-started-web) -
  29. Firebase Performance Monitoring helps you gain insight into your app's performance issues.
  30. - [Google Analytics](https://firebase.google.com/docs/analytics/get-started?platform=web) -
  31. Google Analytics is a free app measurement solution that provides insight on app usage and user engagement.
  32. - [Remote Config](https://firebase.google.com/docs/remote-config/get-started?platform=web) -
  33. Firebase Remote Config is a cloud service that lets you change the behavior and appearance of your
  34. app without requiring users to reload your app.
  35. - [App Check](https://firebase.google.com/docs/app-check/web/recaptcha-provider) -
  36. App Check helps protect your backend resources from abuse, such as billing fraud and phishing. It
  37. works with both Firebase services and your own backends to keep your resources safe.
  38. - [Create and setup your account](https://firebase.google.com/docs/web/setup) -
  39. Get started using Firebase for free.
  40. This SDK is intended for end-user client access from environments such as the
  41. Web, mobile Web (e.g. React Native, Ionic), Node.js desktop (e.g. Electron), or
  42. IoT devices running Node.js. If you are instead interested in using a Node.js
  43. SDK which grants you admin access from a privileged environment (like a server),
  44. you should use the
  45. [Firebase Admin Node.js SDK](https://firebase.google.com/docs/admin/setup/).
  46. ### Install the SDK
  47. Install the Firebase NPM module:
  48. ```
  49. $ npm init
  50. $ npm install --save firebase
  51. ```
  52. ### Use Firebase in your app
  53. 1. Initialize Firebase in your app and create a Firebase App object:
  54. ```js
  55. import { initializeApp } from 'firebase/app';
  56. // TODO: Replace the following with your app's Firebase project configuration
  57. const firebaseConfig = {
  58. //...
  59. };
  60. const app = initializeApp(firebaseConfig);
  61. ```
  62. 2. Access Firebase services in your app
  63. Firebase services (like Cloud Firestore, Authentication, Realtime Database, Remote Config, and more) are available to import within individual sub-packages.
  64. The example below shows how you could use the Cloud Firestore Lite SDK to retrieve a list of data.
  65. ```js
  66. import { initializeApp } from 'firebase/app';
  67. import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
  68. // Follow this pattern to import other Firebase services
  69. // import { } from 'firebase/<service>';
  70. // TODO: Replace the following with your app's Firebase project configuration
  71. const firebaseConfig = {
  72. //...
  73. };
  74. const app = initializeApp(firebaseConfig);
  75. const db = getFirestore(app);
  76. // Get a list of cities from your database
  77. async function getCities(db) {
  78. const citiesCol = collection(db, 'cities');
  79. const citySnapshot = await getDocs(citiesCol);
  80. const cityList = citySnapshot.docs.map(doc => doc.data());
  81. return cityList;
  82. }
  83. ```
  84. ### Use a module bundler for size reduction
  85. The Firebase Web SDK is designed to work with module bundlers to remove any
  86. unused code (tree-shaking). We strongly recommend using this approach for
  87. production apps. Tools such as the [Angular CLI](//angular.io/cli),
  88. [Next.js](//nextjs.org/), [Vue CLI](//cli.vuejs.org/), or [Create
  89. React App](//reactjs.org/docs/create-a-new-react-app.html) automatically
  90. handle module bundling for libraries installed through npm and imported into
  91. your codebase.
  92. See [Using module bundlers with Firebase](/docs/web/module-bundling) for more information.
  93. ### Script include
  94. You can also load Firebase packages as script modules in browsers that support native ES modules.
  95. ```html
  96. <!-- use script module by specifying type="module" -->
  97. <script type="module">
  98. import { initializeApp } from 'https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-app.js';
  99. import { getFirestore, collection, getDocs } from 'https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-firestore-lite.js';
  100. // Follow this pattern to import other Firebase services
  101. // import {} from "https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-analytics.js";
  102. // import {} from "https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-app-check.js";
  103. // import {} from "https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-auth.js";
  104. // import {} from "https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-functions.js";
  105. // import {} from "https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-firestore.js";
  106. // import {} from "https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-storage.js";
  107. // import {} from "https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-performance.js";
  108. // import {} from "https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-remote-config.js";
  109. // import {} from "https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-messaging.js";
  110. // import {} from "https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-database.js";
  111. // TODO: Replace the following with your app's Firebase project configuration
  112. const firebaseConfig = {
  113. //...
  114. };
  115. const app = initializeApp(firebaseConfig);
  116. const db = getFirestore(app);
  117. // Get a list of cities from your database
  118. async function getCities(db) {
  119. const citiesCol = collection(db, 'cities');
  120. const citySnapshot = await getDocs(citiesCol);
  121. const cityList = citySnapshot.docs.map(doc => doc.data());
  122. return cityList;
  123. }
  124. </script>
  125. ```
  126. _Note: To get a filled in version of the above code snippet, go to the
  127. [Firebase console](https://console.firebase.google.com/) for your app and click on "Add
  128. Firebase to your web app"._
  129. ## Get the code (Node.js - server and command line)
  130. ### Install the SDK
  131. While you can write entire Firebase applications without any backend code, many
  132. developers want to write server applications or command-line utilities using the
  133. Node.js JavaScript runtime.
  134. You can use the same npm module to use Firebase in the Node.js runtime (on a
  135. server or running from the command line):
  136. ```
  137. $ npm init
  138. $ npm install --save firebase
  139. ```
  140. In your code, you can access Firebase using:
  141. ```js
  142. const { initializeApp } = require('firebase/app');
  143. const { getFirestore, collection, getDocs } = require('firebase/firestore');
  144. // ...
  145. ```
  146. If you are using native ES6 module with --experimental-modules flag (or Node 12+)
  147. you should do:
  148. ```js
  149. import { initializeApp } from 'firebase/app';
  150. import { getFirestore, collection, getDocs } from 'firebase/firestore';
  151. // ...
  152. ```
  153. Please see [Environment Support](https://firebase.google.com/support/guides/environments_js-sdk) for which packages
  154. are available in Node.js.
  155. ## Compat packages
  156. Version 9 provides a set of compat packages that are API compatible with Version 8. They are intended to
  157. be used to make the upgrade to the modular API easier by allowing you to upgrade your app piece by piece.
  158. See the [Upgrade Guide](https://firebase.google.com/docs/web/modular-upgrade) for more detail.
  159. To access the compat packages, use the subpath `compat` like so:
  160. ```js
  161. // v9 compat packages are API compatible with v8 code
  162. import firebase from 'firebase/compat/app';
  163. import 'firebase/compat/auth';
  164. import 'firebase/compat/firestore';
  165. ```
  166. ## Changelog
  167. The Firebase changelog can be found at
  168. [firebase.google.com](https://firebase.google.com/support/release-notes/js).
  169. ## Browser/environment compatibility
  170. Please see [Environment Support](https://firebase.google.com/support/guides/environments_js-sdk).