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.
Related
I created a flutter web application,
and I finished building it with the command ..
flutter build web --release ,
and then transferred it to a local server ,
The site does not work unless it is connected to the Internet ,
I want the site to work without an internet connection ,
As I work in an organization and some users do not have internet permissions .
Please, I want a solution to this problem .
Thanks
The problem is, that flutter has some dependencies, that can not be resolved when you, as the client, are offline. Mostly consisting of canvaskit and certain google fonts.
There are multiple solutions for that. The easiest being to use the html web-renderer:
flutter build web --release --web-renderer html
this should work for most applications, however it has lower performance than canvaskit, especially with high widget density.
Therefore you can also use canvaskit locally as it is automatically built when you build your release. But you have to set it as base url, by adding the following lines in your index.html:
<script>
window.flutterConfiguration = {
canvasKitBaseUrl: "/canvaskit/"
};
</script>
This makes sure your flutter application uses the local source for canvaskit. However, another problem could be the usage of google fonts, e.g. Roboto, as those often need to be downloaded as well. But you can just add those to the pubspec.yaml explicitly to account for that, like explained here.
Some sources for more informations:
flutter web-renderers
The same issue but on github
Making Flutter offline capable
Download and set locally from asset policy for your web application
Add link to local Canvaskit as bellow :
flutter build web --web-renderer=canvaskit
--dart-define=FLUTTER_WEB_CANVASKIT_URL=/canvaskit/
To make it work for a dev build, I incorporated Spanching's answer above in the following steps.
Run: flutter clean to clean up all build cache (this is important to have canvas kit re-downloaded in step 4 below).
Run: flutter pub get to download packages per pubspec.yaml
If you're using build runner: dart run build_runner build --delete-conflicting-outputs
At this stage you should have a clean /build folder (I also have an ios sub-folder as I'm also developing for iOS)
Run: flutter build web
At this stage you should have a clean /build/web added with a canvaskit folder underneath it. Full path: /build/web/canvaskit/
Then:
Open index.html under /web (note - do not open the one under /build/web)
Add the script mentioned in the answer above to the body of the html file. I just added it above the existing script that's already there.
Run your project in deubg mode (with Wifi turned off).
I want to know that if it is possible to make flutter app for web without using HTML, css or javascript and only using flutter and dart
Yes, it is absolutely possible to create a web app using flutter and dart.
To add web support in the existing flutter project you can run the command flutter create . and to release it run the command flutter build web
For testing your app in chrome you can use command flutter run -d chrome
You can disable android support using command flutter config --no-enable-android and disable ios support using command flutter config --no-enable-ios
Yeah, it is not need to build web app with HTML,CSS & JS, your flutter code alone will work.
Note: try flutter upgrade bcs v-2.0.0 stable release for web got released
Yes, you can use Dart/Flutter exclusively to build web apps. You don't need to write any HTML/CSS/Javascript.
You can setup your project from the terminal (like previous comments suggests), or you can use an IDE such Android Studio, or you can use Visual Studio.
If you use Android Studio, you can create a new Flutter Project, and select the 'web' platform only, and de-select Android and IOS.
I am currently using Dart/Flutter to build web apps only. Android Studio builds the HTML/CSS/Javascript for you. Then you just have to publish it into a web server (online or local).
Yes you can use Flutter for web apps but though it is in early stage of development about how the web app will be stable or not
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.
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.
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.