Update README (#5214)

Author: hsubox76

packages/firebase/README.md

@@ -1,4 +1,4 @@
-[![Build Status](https://travis-ci.org/firebase/firebase-js-sdk.svg?branch=master)](https://travis-ci.org/firebase/firebase-js-sdk)
+<!-- TODO: Build/Test badges when available. -->
 
 # Firebase - App success made simple
 
@@ -36,25 +36,41 @@ you should use the
 
 ## Get the code (browser)
 
-### Script include
->This brings in all Firebase features. See
->["Include only the features you need"](#include-only-the-features-you-need)
->below for
->how to minimize download size by only including the scripts you need.
+We recommend only installing the features you need. The individually installable services are:
 
-Include Firebase in your web application via a `<script>` tag:
+- `firebase-app` - The core `firebase` client (required).
+- `firebase-app-check` - Firebase App Check (optional).
+- `firebase-analytics` - Firebase Analytics (optional).
+- `firebase-auth` - Firebase Authentication (optional).
+- `firebase-database` - The Firebase Realtime Database (optional).
+- `firebase-firestore` - Cloud Firestore (optional).
+- `firebase-storage` - Firebase Storage (optional).
+- `firebase-messaging` - Firebase Cloud Messaging (optional).
+- `firebase-functions` - Firebase Cloud Functions (optional).
+- `firebase-remote-config` - Firebase Remote Config (optional).
+- `firebase-performance` - Firebase Performance (optional).
+
+### Script include
+Include Firebase in your web application via `<script>` tags. Create a script tag for each of the individual services you use (include `firebase-app`
+first):
 
 ```html
-<script src="https://www.gstatic.com/firebasejs/${JSCORE_VERSION}/firebase.js"></script>
+<!-- Always required. -->
+<script src="https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-app.js"></script>
+<!-- Include only the services you use, for example auth and database below. -->
+<script src="https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-auth.js"></script>
+<script src="https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-database.js"></script>
+<!-- See above list for names of the other services. -->
 
 <script>
-  var app = firebase.initializeApp({
+  const app = firebase.initializeApp({
     apiKey: '<your-api-key>',
     authDomain: '<your-auth-domain>',
     databaseURL: '<your-database-url>',
     projectId: '<your-cloud-firestore-project>',
     storageBucket: '<your-storage-bucket>',
-    messagingSenderId: '<your-sender-id>'
+    messagingSenderId: '<your-sender-id>',
+    appId: '<your-app-id>'
   });
   // ...
 </script>
@@ -64,100 +80,76 @@ _Note: To get a filled in version of the above code snippet, go to the
 [Firebase console](https://console.firebase.google.com/) for your app and click on "Add
 Firebase to your web app"._
 
-### npm bundler (Browserify, Webpack, etc.)
+#### Alternative - all-in-one import
 
->This brings in all Firebase features. See
->["Include only the features you need"](#include-only-the-features-you-need)
->below for
->how to minimize bundle size by only importing the features you need.
+>This brings in all Firebase features. We recommend the method above to
+>minimize download size by only including the scripts you need.
+
+Include Firebase in your web application via a `<script>` tag:
+
+```html
+<script src="https://www.gstatic.com/firebasejs/${JSCORE_VERSION}/firebase.js"></script>
 
-The Firebase JavaScript npm package contains code that can be run in the browser
-after combining the modules you use with a package bundler (e.g.,
-[Browserify](http://browserify.org/), [Webpack](https://webpack.github.io/)).
+<script>
+  const app = firebase.initializeApp({ ... });
+  // ...
+</script>
+```
 
-Install the Firebase npm module:
+### NPM Bundler (Browserify, Webpack, Rollup, etc.)
 
+Install the Firebase NPM module:
 ```
 $ npm init
 $ npm install --save firebase
 ```
 
-In your code, you can access Firebase using:
+In your code, you can import the services you use:
 
 ```js
-var firebase = require('firebase');
-var app = firebase.initializeApp({ ... });
-```
-
-If you are using ES6 imports or TypeScript:
+// This import loads the firebase namespace along with all its type information.
+import firebase from 'firebase/app';
 
-```js
-import firebase from 'firebase';
-var app = firebase.initializeApp({ ... });
+// These imports load individual services into the firebase namespace.
+import 'firebase/auth';
+import 'firebase/database';
 ```
 
-### Include only the features you need
+Or if using `require()`:
 
-The full Firebase JavaScript client includes support for Firebase Authentication, the
-Firebase Realtime Database, Firebase Storage, and Firebase Cloud Messaging. Including
-code via the above snippets will pull in all of these features.
+_Use the `.default` import from `firebase/app` in order for
+typings to work correctly.
+See [release notes for 8.0.0](https://firebase.google.com/support/release-notes/js#version_800_-_october_26_2020)._
 
-You can reduce the amount of code your app uses by just including the features
-you need. The individually installable services are:
-
-- `firebase-app` - The core `firebase` client (required).
-- `firebase-auth` - Firebase Authentication (optional).
-- `firebase-database` - The Firebase Realtime Database (optional).
-- `firebase-firestore` - Cloud Firestore (optional).
-- `firebase-storage` - Firebase Storage (optional).
-- `firebase-messaging` - Firebase Cloud Messaging (optional).
-- `firebase-functions` - Firebase Cloud Functions (optional).
+```js
+const firebase = require('firebase/app').default;
+require('firebase/auth');
+require('firebase/database');
 
-From the CDN, include the individual services you use (include `firebase-app`
-first):
+const app = firebase.initializeApp({ ... });
+```
 
-```html
-<script src="https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-app.js"></script>
-<script src="https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-auth.js"></script>
-<script src="https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-database.js"></script>
-<script src="https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-firestore.js"></script>
-<script src="https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-storage.js"></script>
-<script src="https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-messaging.js"></script>
-<script src="https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-functions.js"></script>
+_The type information from the import statement will include all of the SDKs,
+not just the ones you have `required`, so you could get a runtime error if you
+reference a non-required service._
 
-<script>
-  var app = firebase.initializeApp({ ... });
-  // ...
-</script>
-```
+#### Alternative - all-in-one import
 
-When using the firebase npm package, you can `require()` just the services that
-you use:
+>This brings in all Firebase features. We recommend the method above to
+>minimize download size by only including the scripts you need.
 
 ```js
-var firebase = require('firebase/app');
-require('firebase/auth');
-require('firebase/database');
-
-var app = firebase.initializeApp({ ... });
+// This import loads all Firebase services, whether used in your code or not.
+import firebase from 'firebase';
 ```
 
-If you are using TypeScript with the npm package, you can import just the
-services you use:
+Or with `require()`:
 
 ```js
-// This import loads the firebase namespace along with all its type information.
-import firebase from 'firebase/app';
-
-// These imports load individual services into the firebase namespace.
-import 'firebase/auth';
-import 'firebase/database';
+// This import loads all Firebase services, whether used in your code or not.
+const firebase = require('firebase').default;
 ```
 
-_The type information from the import statement will include all of the SDKs,
-not just the ones you have `required`, so you could get a runtime error if you
-reference a non-required service._
-
 ## Get the code (Node.js - server and command line)
 
 ### NPM
@@ -177,8 +169,10 @@ $ npm install --save firebase
 In your code, you can access Firebase using:
 
 ```js
-var firebase = require('firebase');
-var app = firebase.initializeApp({ ... });
+const firebase = require('firebase/app').default;
+require('firebase/auth');
+require('firebase/database');
+const app = firebase.initializeApp({ ... });
 // ...
 ```
 
@@ -196,23 +190,6 @@ import 'firebase/database';
 
 _Known issue for typescript users with --experimental-modules: you have to set allowSyntheticDefaultImports to true in tsconfig.json to pass the type check. Use it with caution since it makes the assumption that all modules have a default export, which might not be the case for the other dependencies you have. And Your code will break if you try to import the default export from a module that doesn't have default export._
 
-Firebase Storage is not included in the server side Firebase npm module.
-Instead, you can use the
-[`google-cloud` Node.js client](https://github.com/GoogleCloudPlatform/google-cloud-node).
-
-```
-$ npm install --save google-cloud
-```
-
-In your code, you can access your Storage bucket using:
-
-```js
-var gcloud = require('google-cloud')({ ... });
-var gcs = gcloud.storage();
-var bucket = gcs.bucket('<your-firebase-storage-bucket>');
-...
-```
-
 Firebase Cloud Messaging is not included in the server side Firebase npm module.
 Instead, you can use the
 [Firebase Cloud Messaging Rest API](https://firebase.google.com/docs/cloud-messaging/send-message).