I'm developing an app with react-native (v0.60) and I need push notifications. I decided to use firebase as service but I have an error during initialisation.
Code:
import {AppRegistry} from 'react-native';
import Config from 'react-native-config'
import * as firebase from 'firebase/app'
import '#firebase/messaging'
import firebaseConfig from 'App/src/firebase.config'
import App from './App';
import {name as appName} from './app.json';
firebase.initializeApp(firebaseConfig)
const messaging = firebase.messaging()
messaging.usePublicVapidKey(Config.FIREBASE_KEY_PAIR)
AppRegistry.registerComponent(appName, () => App);
The problem is that I get the error:
ReferenceError: Can't find variable: IDBIndex
How can I fix this?
firebase only supports Authentication, Firestore & Realtime databases, Storage, and Functions on React Native. Other modules like Analytics are not supported through the Firebase JS SDK, but you can use expo-firebase-analytics for that. If you'd like access to the full suite of native firebase tools
please remove firebase.analytics();
It's because you have enabled Google Analytics for your app. Disable Analytics from the Firebase settings and again copy the Firebase file data from Firebase and replace it with the old firebase.js file in the project.
I would advise to use the React Native Firebase wrapper instead. As they say:
Although some features from the Firebase Web SDK will generally work with React Native, it is mainly built for the web and as such has a limited compatible feature set. In contrast we use the Firebase Native SDKs - this allows us to provide APIs to a vast majority of Firebase products and services.
please remove firebase.analytics(); form where ?
Related
I am trying to use Firebase SDK on my Google App Script app.
The documentation says it needs installing npm install firebase which is not possible via Google App Script.
So the following step would be:
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "***",
authDomain: "myapp.firebaseapp.com",
databaseURL: "https://myapp-default-rtdb.europe-west1.firebasedatabase.app",
projectId: "myappurl",
storageBucket: "myappurl.appspot.com",
messagingSenderId: "267227785525",
appId: "***",
measurementId: "G-K5CP51FRXR"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
But i get the error:
SyntaxError: Cannot use import statement outside a module linea:
It looks like i am not declaring it as a module.
I have checked for tutorials and help but only find the how-to for Node.js, Google Script is not talked about.
Note: I have installed 'FirebaseApp' library.
Anyone knows how to do what i need? Is that even possible to use SDK v9 on GAS?
While Google Apps Script and Node.js uses JavaScript as programming language, Node.js has several features that aren't included in Google Apps Script, one of them is the the npm packages handling.
One option might be to use the npm package "as a client-side library". Please start by reading https://developers.google.com/apps-script/guides/web, then checkout Use npm package on client side.
Some client-side libraries might work as server side JavaScript. Nowadays Google Apps Script has two runtimes, but one, Rhino, depends on the old Google Apps Script IDE that will be retired soon. To learn about the new runtime, V8, please read https://developers.google.com/apps-script/guides/v8-runtime.
Some npm packages have being "converted" into Google Apps Script libraries. You might try to find on by searching this site, a service like GitHub, etc. Another option is to ask for a software recommendation on https://softwarerecs.stackexchange.com.
Another option is to use the Firebase REST API directly in Google Apps Script by using the Url Fetch Service.
Related
Using an imported module inside Google App Script
How to integrate Firebase into Google Apps Script without using (deprecated) database secret
Cannot add Firebase library to Apps Script
Syntax error: SyntaxError: Cannot use import statement outside a module line: 1 file: Code.gs
What for should I link the web app to the Firebase Hosting site in the console? What are the benefits and effects?
The difference between the two is covered here: Whats the difference between firebase web app and firebase hosting.
The linking is mentioned in the documentation https://firebase.google.com/docs/web/setup#register-app, but the rationale and consequences are not explained.
The Firebase support documentation says:
You may need to link your web app to your Hosting site in the Project settings if you chose not to set up Hosting when you registered your web app with your Firebase project.
If you're using Firebase Hosting for your web app, you can use the reserved Hosting URLs to add Firebase SDKs and manage your Firebase configuration for your app.
In short, if you're using those special Hosting URLs that begin with __, in particular, /__/firebase/init.json, it helps to have linked your app to Hosting so that the configuration is complete. By my recollection, the config will then have a correct FCM config in this case.
You can configure partial import of the Firebase JavaScript SDK and only load the Firebase products that you need. If you're using a bundler (like Browserify or webpack), you can import individual Firebase products when you need them.
Note: You can use this option even if you use Firebase Hosting, but make sure to add your Firebase config object before initializing Firebase.
Install the Firebase JavaScript SDK:
a. If you don't already have a package.json file, create one by running the following command from the root of your JavaScript project:
npm init
b. Install the firebase npm package and save it to your package.json file by running:
npm install --save firebase
To include only specific Firebase products (like Authentication and Cloud Firestore), import Firebase modules:
// Firebase App (the core Firebase SDK) is always required and must be
listed first
import firebase from "firebase/app";
// If you are using v7 or any earlier version of the JS SDK, you should
import firebase using namespace import
// import * as firebase from "firebase/app"
// If you enabled Analytics in your project, add the Firebase SDK for
Analytics
import "firebase/analytics";
// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";
Initialize Firebase in your app:
// TODO: Replace the following with your app's Firebase project
configuration
// For Firebase JavaScript SDK v7.20.0 and later, measurementId is an
optional field
const firebaseConfig = {
// ...
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
In my Typescript-React-Firebase app, I've created a file with the following content:
import * as firebase from 'firebase/app';
import 'firebase/auth';
firebase.initializeApp({ ... });
export default firebase;
I'm then importing firebase from here in the other files in my project.
Is this correct / necessary? Could I just call initialize once in my top level component and then import firebase from firebase/app and firebase/auth? Is there a disadvantage to my approach?
This approach is quite common, as it allows you to centralize the Firebase configuration data and initialization call, while also simply using the Firebase SDK everywhere else.
When application load in browser, it gives following warning. So unable to create build for prod (ng build --aot --prod)
It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.
For the module builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):
CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');
ES Modules:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';
I am using following configurations
Angular CLI: 1.5.0
Node: 9.8.0
Angular: 5.1.3
"firebase": "^5.0.4",
"angularfire2": "^5.0.0-rc.10"
Please guide where I get wrong.
There is nothing really wrong, it is more a warning and a best practices tip.
Firebase is composed of different services/modules, e.g. the Real Time Database, Firestore, the Auth service, etc.
In the majority of projects one does not use ALL those services and therefore this warning indicates that instead of importing all the services with one global import it is better to only import the services you really need in your application. In such a way, your build will be optimized: the resulting build file(s) will only contain the Firebase SDK code that you need and will not contain the parts that are not used.
See this documentation item: https://firebase.google.com/docs/web/setup and in particular the part that says:
If you are using a bundler like Browserify or webpack, you can just
require() the components that you use.
Update following your comment:
With the import keyword, you should do as follows:
import messaging from 'firebase/messaging';
You did not share your Angular component code that's why I could not give you specific code. However, I guess, you include Firebase directly like this then it will show following warning.
import * as firebase from 'firebase'; // It will throw warning
import * as firebase from 'firebase/app'; // It will not throw any warning
Then include specific package acccording to your need.
import 'firebase/firestore';
import 'firebase/database';
import 'firebase/auth';
I add following code, it works for me
require("firebase/messaging");
When I try to use npm install to use firebase with React native, I am getting errors.
Then when I try to use require for the firebase module, it says that the document can't be found.
Is there a way to utilize the firebase API with React native instead?
Firebase uses WebSockets, which currently is not supported by React Native. As of now, there is no good solution to integrate Firebase with React Native.
In lieu of requiring firebase as a module, you can indeed use the firebase API instead. If you were doing a simple get request, your fetch function would look like this:
var url = "https://YourDatabaseName.firebaseio.com/some/val.json";
fetch(url)
.then((response) => response.json())
.then((responseData) => {
console.log(responseData);
})
.done();
For more information, you can check out a blog post I wrote about the topic here:
http://anuj.io/using-firebase-api-with-react/
Firebase dev here — as of v0.4.4 of React Native, WebSockets are now supported, and as of version 2.2.5 of Firebase's JS client, we've implemented the integration with React Native. Therefore, Firebase should now work in your React Native app!
There is a known issue with our authentication methods at the moment, but we're working on it.
Let us know if you have any questions!