I have a Flutter web app that uses firebase and I have two firebase projects(dev and prod).
I'll like to set up Flavors for this project(just web no mobile).
In mobile, I can use different GoogleService-Info.plist or google-services.json files for either flavor but I could not find anyway to do this on the web app as the configuration is done in the index.html file. Is there any way to do this? Maybe have different HTML files and specify which of them to be bundled while running the app?
Thanks.
You can use Firebase SDK auto-configuration. By relying on the reserved Hosting URL, you can deploy the same code to multiple Firebase projects.
On each of your Firebase projects, go to Project Overview -> Project settings. See here
Under "Your apps" select your web app. If you haven't, link your web app to a firebase hosting site.
In Firebase SDK snippet, select the automatic option. See here
Replace your current firebase configuration on index.html to:
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="/__/firebase/7.21.0/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="/__/firebase/7.21.0/firebase-analytics.js"></script>
<!-- Initialize Firebase -->
<script src="/__/firebase/init.js"></script>
That's it, this will allow you to use the same index.html for different flavors.
More Info here
See Flutter Firebase - Setting different deployment targets for iOS, Android, and Web.
This explains doing flavors for iOS and Android and Firebase SDK auto-configuration for the Web.
Related
I want to create a new project in flutter using VS, but I want this project without the web dependence just a mobile app dependence but each time I create a project it gives me the dependence of the web, not a mobile app
For Example, this what I get:
This what I want
You can generate a flutter app for only mobile platforms with flutter create tool by specifying platforms.
flutter create <app_name> --platforms=android,ios
In the same way you enabled flutter web support, disable it.
flutter config --no-enable-web
This removes web support so that future created projects will not generate a web folder. You may need to restart any open editors for the changes to take place.
When I am updating the logo of the PWA app the icon is not getting updated for the previously installed applications. However for newly installed apps I am getting the correct logo.
Did you try updating the new image icon in manifest.json & then showing a prompt to users to refresh the PWA?
You can try to have a look at the documentation for Android APK (from the question is not clear your target device: web or mobile).
Chrome will periodically compare the locally installed manifest against a copy of the manifest fetched from the network. If any of the properties in the manifest required to add the PWA to the home screen have changed in the network copy, Chrome will request an updated WebAPK, reflecting those new values.
This feature is not yet available for desktop, but planned in a future release.
Do you use any framework (Angular, React) to build your PWA? If you want to read more details about how to install an app on the homescreen or the web manifest properties, you can have a look here.
I am creating a flutter web app ,I want to connect my flutter web project with cloud firestore, is there any to connect my project to cloud firestore
I have try import cloud_firestore: ^0.12.5+2 in pubspec.yaml.
Because op depends on cloud_firestore >=0.3.0 which requires the Flutter SDK, version solving failed.
You can now use official cloud_firestore plugin in flutter web, just follow the instructions in readme page to integrate plugin.
The FlutterFire plugin that you found only targets iOS or Android.
If you're targeting the web, use the firebase-dart plugin.
Also see a similar answer I gave yesterday here: Is there a Dart interface to Firestore - with API as in https://firebase.google.com/docs/firestore/quickstart?
You need to add the following dependency to your package manager:
cloud_firestore: 0.13.4
There are a couple of extra steps to take when configuring for web. These involve adding some script references to your index.html file with Google's SDK reserved URL's (this assumes you will be deploying to google hosting or at least serving locally for testing purposes).
<script src="/__/firebase/7.9.2/firebase-app.js"></script>
<script src="/__/firebase/7.9.2/firebase-auth.js"></script>
<script src="/__/firebase/7.9.2/firebase-firestore.js"></script
<script src="/__/firebase/init.js"></script>
I previously wrote a step by step guide to connecting a Flutter Web app to Google Cloud Firestore, including an example contact form.
Refs :
https://medium.com/#mat_wright/connecting-a-flutter-web-form-to-google-cloud-firestore-f6bf7aa28f99
https://firebase.google.com/docs/hosting/reserved-urls
enter link description here
For configuring Firestore and Firebase for Flutter Web this link will help a lot. I have tried to document all the steps required to configure: Configure Firestore & Firebase with Flutter Web
maybe you need add
dependencies:
firebase_web: ^5.0.9
to your pubspec.yaml.
this page can help you https://pub.dev/packages/firebase_web
I want to develop a mobile app with flutter.io.
Can I also generate PWA with the framework? similar like we can generate with ionic.
No. Since Flutter is not html/JS/css based
But you can share code with an AngularDart app. More details here
There's currently 2 ways to have a PWA app on Flutter:
Use PWA PubDev library.
Flutter Channel Dev (at Feb 17, 2020 current version is 1.15.3)
If you opt to use Channel Dev, on existence project, use the terminal to hit the command:
flutter create .
if we create a new project, you would have a 2 files: manifest.json and index.html inside your web folder.
While checking index.html you would notice the following script:
if ('serviceWorker' in navigation) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('/flutter_service_worker.js');
});
}
This script creates the PWA support for you and be able to "install" the app on a device (this also includes MacOS)
Follow this GUIDE to complete your PWA functionalities.
i am building my first phonegap app and when i open the app i instantly redirecting (window.location) the user to my server where my web app is hosted. Is it possible to load the phonegap plugins from there? Because the "deviceready" event is not firing and i cannot call any plugin functions.
I can confirm that loading remotely does appear to allow access to native components (when scripts are properly loaded) and that cordova.jsdoes not appear to need to be loaded by the local index.html bootstrap.
Short answer: Yes
Some 'gotcha's'
You will have to supply correct cordova.js version for the platform browsing to your site.
you can look here for more info https://github.com/apache/cordova-js. This project hosts the core js elements, and builds the platform specific cordova.js lib
Any plugin api's your app wants to interact with must be pre-installed into the Native App
any plugin with native code will have to be added to the project and deployed to device bundled inside the app. There is no way to lazyload native code. The js portions of the plugin could be hosted on your server, however.
More information, some apps that do this
The PhoneGap Developer App uses a similar technique to what is describe above and what you want. The only difference is that it is meant as a dev tool, and the server is a local dev machine.
The Cordova App Harness also uses this technique of pre-bundling an app package with plugins, to be consumed by remotely hosted resources
You cannot, deviceready only functioning if the app run on mobile phone environment only. If web based or dekstop application, it won't trigger.
No , dont do that . loading remote website will not able to intract with your plugins . and the app will get rejected on istore too