Hi I made a simple web with Flutter and I made it responsive, so I checked with chrome dev tools if all works properly and it does.
Like this picture, that is from Chrome dev tools
The thing is that when I deployed with firebase hosting, I tested it on an Iphone 8 plus with safari and the menu is not showing well, and I don't have any idea of why
As you can see the menu is cutted. Also if you know how to remove the annoying bottom white bar that is created only on mobile web I will appreciate it.
Related
I am having a problem when trying to navigate through a deployed Flutter web app in Safari and Mobile Devices.
I have like 4 different screens in the app, 3 of them works fine, but when I redirect user to the principal screen, it just shows a blank white screen. This happens only in Safari and in Mobile Devices browsers (Chrome/Safari). When using Chrome and a desktop it works as it should (all screens shows normally).
When debugging with Chrome it works perfectly too.
[EDIT]
Print console error with Safari
I tried the following:
Changing build type (--web renderer canvaskit / html --release)
Changing channel from master to beta
Updating Flutter and outdated packages
Cleaning build a hundred times
Debug with Safari but I don't think it's possible
I am making a website with flutter
codingfries.com
Can someone check what the hell is happening when I click on Desktop View on chrome browser in mobile phone. The website starts to behave weirdly.
This is supposed to happen as the layout changes. Width of screen changes when you emulate Desktop view on mobile phone. For handling such cases, flutter has media queries which can be used to change layouts based on screen size changes.
For more info refer the official documentation.
https://flutter.dev/docs/development/ui/layout/adaptive-responsive
I am examining PWA and Web Components technologies recently. As far as I have learned now Web Components is a new suit of tech,
Custom Elements, Shadow DOM, HTML Templates and HTML imports. Together with those Web Components enabling techs Web App Manifest, Service Workers, and certain performance improvement techniques used to make what is called as Progressive Web Applications.
What I wonder is when one "Adds to Home Screen" an application in a certain web browser what is the browser that opens it when it is launched from its home screen icon? Is it the browser it has been added to home screen from, or it is the default browser of the system no matter which browser it has been added to home screen from, or it is just a generic web view available on the host operating system at the moment like the one used in native web applications?
Lastly, is it possible for a developer coding her/his app to choose one?
Currently, for me, these combinations open a new "Standalone" window
I believe Android/Chrome is the only one that installs a WebApk
All the others are just shortcuts to open your website in that browser without the normal browser navigation items
I know of no options for the developer for how the shortcut opens your PWA
Android 8.10 - Chrome 67
Android 8.10 - Chrome (beta) 68
Android 8.10 - Edge 42
Android 8.10 - Opera 43
iOS 11.4 (simulator) - Safari
As test I created app shortcut of site https://pwa.rocks from browser:
Brave
Firefox
Chrome
and found that there were 3 different shortcut created for each of the browser. Launching each shortcut resulted in opening the respective browser that created it.
I believe there is no way of changing the default browser to launch the app by coding something in the app. I could not find a way of doing that, if someone knows how to do it, I will be interested to know about it
Here is similar question: What browser will PWA (Progressive Web App) use after adding to home screen?
We will develop an app that we would like to distribute in through the following channels:
Android and iOS apps through Google Play and iTunes (the app will
use notifications extensively and presence in Google Play and App store is required)
Web app to run in web browsers on mobile devices
Web app to run in web browsers on laptop and desktop computers. We would like to support Chrome, Internet Explorer (starting from IE9),
Firefox and Safari browsers.
Our understanding is that Ionic is developed targeting primarily 1. and that the web apps in 2. and 3. above are not really what Ionic is intended for. We have looked around to try to understand if Ionic likely works for 2. and 3. and also made some quick tests ourselves.
From one of the links at the end: "Your webapp will run in desktop browsers yes, as it is made of html, css and javascript. The phonegap specific javascript calls (accelerometer, compass, file, etc) won't. Basically, if you stick to standard yes you will be able to port relatively easily your app to most browser, the job at this point being mostly a work of theming."
From another one: "I do know that FireFox is simply not supported. I don't know how well Ionic works in IE X."
To try it out we have built a limited version of our app in Ionic. From what we can see the app works for 1, 2 and 3. For example, it runs without issues on FireFox that is mentioned as not supported in the quote above. This means that to us it looks like the first quote saying that the web app will work in desktop browsers is correct.
I understand that this is a fairly generic question and might be hard to answer, but since we have found contradicting information when looking we are trying to understand more before making a decision.
Any feedback would be appreciated.
Thanks,
Markus
Is it a good idea to use ionic to build mobile web version of a website?
Can Ionic Framework run in desktop web browser like Chrome, Mozilla, IE9+?
http://forum.ionicframework.com/t/ionic-components-on-ie/1826
Phonegap web app in regular desktop browsers
http://ionicframework.com/docs/overview/#css-sass
Ionic is tested for mobile only. Internet Explorer for example is not tested and does not properly handle a number of features in Ionic. Desktop browsers act differently than mobile browsers.
Ionic is focused on building native/hybrid mobile apps rather than
mobile websites.
As such, our browser support tends to be whatever Web View API is
available to native apps on a given platform. For Ionic 1.1.0
"xenon-xerus", that means UIWebView for iOS 7+, and Android 4.1 and
up. Windows Phone and FirefoxOS support is on our roadmap.
If it's cheaper for you to test everything on all different desktop browsers than to develop a version for it sharing the same controllers and services --- go ahead but it won't come "out of the box".
Also, I recommend looking at Electron to build desktop apps from webapps.
ionic is targting mobile apps only , but you can develop your desktop app using node webkit and angular material for example and share some code between your apps
How do you make a web app start up instantly - is it possible to make as fast as a native app that is already loaded?
I have developed a HTML5 web app that runs nicely on Iphone 4 with a splashscreen. But now I'm looking into performance:
I use a manifest file to ensure that all files are loaded from the local storage. I have checked both in chrome and mobile safari, that the files are stored correctly locally. Now performance it quite different depending on how I access my web app:
~4s When I load the web app in browser (not from a home screen icon).
~6s When I load from an "add to homescreen" icon
When I load in chrome browser it takes 234ms to load and render the whole page. I seems like the lack of speed is due to the rendering being pretty slow.
Any performance suggestions are very welcome.
I know from experience that a MacOSX device the Chrome App all of its previous versions/updates leaves in its App. This maybe also apply to ios, since it's is a stripped version of the MacOSX sysem.
It might help to delete the Chrome App from your iPhone and re-install it from the App store.
This way you be sure you have a clean copy op Chrome on the iPhone whithout all the previous Chrome versions.
I hope this helps.