Although there is a valid manifest.json and <link rel="manifest" href="manifest.json"> in the head tag, chrome shows No Manifest Detected, service workers are installed successfully and http://127.0.0.1:8080/manifest.json is fine and accessible, but chrome not even requesting the manifest.json file! this is a flutter project which currently build for web using flutter build web --release
Finally I figured out the bug was introduced by flutter_native_splash which added some picture tag to the root of html page which caused the chrome not requesting the manifest.json, so moving the picture tag to body solved the issue.
https://pub.dev/packages/flutter_native_splash
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).
Flutter 2.0 working good and i successfully run web app by calling
flutter run -d chrome
but when generated build using flutter build web it build successfully but the output is not working in web browser. it is showing white screen only
Issue fixed by changing <base href="/"> to <base href="./">
Similar problem occurred in angular 2 beginning time
I’m unfortunately having difficulty deploying my ionic project for web. No matter what I do, commands such as 'ionic build, ‘ionic build --prod’, ‘ng build --prod’, or whatsoever always create a www folder that is incorrect. The index.html in this www folder is always blank when viewed from a browser.
I’ve tested this issue on other ionic projects as well (just generated some from templates) and the same issue occurs here, with the index.html in the www folder always being displaying a blank site. If possible, I’d appreciate any help if that’s OK!
ionic cordova platform add browser
ionic cordova run browser
ionic cordova build browser --prod
For testing purpose use ionic serve . It will rebuild automatically every time when you update your code.
have you changed the base href in index.html from
base href="/"
to
base href="."
When I build my Ionic 4 app, it presumes to run at the root of the domain. It puts <base href="/" /> in the Index.html, and so all subsequent requests target the root of the domain. I can make it work in a folder by changing the base to <base href="." />, but a little voice tells me I shouldn't be modifying a generated file.
Where is the configuration variable to let me run my app from a folder if I want to? Do I need to know the name of the folder at build time?
You can just go ionic serve in any folder and it will serve your application. If you mean in an production environment you'd run ionic cordova build <platform> and it'll generate the .apk if you specified the android environment or it will generate an XCode project if you specified iOS.
I am however unsure which platform you are building for. So your results may vary if you're building for the browser platform.
Hope I understood your question correctly.
I installed Cordova Plugin for OpenTok iOS in Ionic app
Using this
cordova plugin add https://github.com/songz/cordova-plugin-opentok/
When i refer it using this
< script type="text/javascript" charset="utf-8"
src="opentok.js">
in Index.html File
I get not found (404)
This is normal behavior, because cordoba serves the plugin on the mobile device. When you debug on your web, cordoba is inactive, so you need to provide these dependencies yourself.