I am newbie in IONIC 3, I just want to implement status bar to my app. I tried following methods.
import { App, Nav, Platform, Events, AlertController } from 'ionic-angular';
import { StatusBar } from '#ionic-native/status-bar';
constructor(public events: Events, public platform: Platform, publicstatusBar: StatusBar) {
this.statusBar.overlaysWebView(true);
this.statusBar.backgroundColorByHexString('#1972d2');
this.statusBar.isVisible;
}
and Changed in index.html page as solution mentioned in this link
<meta name="theme-color" content="#1976d2">
and also mentioned in config.xml page like this
<preference name="StatusBarBackgroundColor" value="#1972d2" />
<preference name="StatusBarOverlaysWebView" value="true" />
What might be the issue? Please help me.
Everything you did is correct.
There are 2 possible solutions:
the plugin StatusBar is not installed. Even if in an empty project in the app.component.ts is mentioned, is not installed properly. So you have just to follow this guide on the official documentation.
your android device does not support that feature. For example, there are different custom ROMs that manage the status bar in an unconventional way like MIUI, EMUI, etc. You can check that on this page that collects issues of the Cordova plugin.
Anyway, if you do everything listed above it should work but remember to make a build to be sure at 100%
EDIT: I've tested it on the MIUI and it works like a charm though, but on the issue page someone got a problem on some device. Maybe it's some particular version.
Related
We ran ionic build --prod for an Ionic Angular project to generate the www folder on a Debian 10 server. Set up the domain and everything works properly.
The problem is that when opening the app in Chrome and sometimes in Safari as well on desktop, the icons, buttons and some other elements don’t show up the same as on localhost when testing with ionic serve. Specifically, a new class is added to some elements “sc-ion” that causes problems in the UI (e.g. the icons don’t have the right line-height, the buttons’ text has a different color, etc.). Please see below some screenshots.
Do you know how we can remove the sc-ion class and keep the styling consistent with what gets displayed with ionic serve on localhost? I look forward to hearing your feedback.
Thanks for your help,
Andy
Hotjar was causing the issues.
I am just beginning to dip my toes into the PWA waters and have started by playing with the manifest.json on a site I am building. My goal is to get it to open up in fullscreen.
I am getting some very strange behavior on iOS.
I add the PWA to the home screen fine and it correctly uses the short name as specified by the manifest. But when I try to open it things go off the rails. The app seems to attempt to load in fullscreen per the manifest but then stops and the website instead opens in a new Safari tab, twice. I have two new tabs both pointing to the URL of the PWA.
Does anyone have any idea what is causing this strange behavior?
Hopefully this is not too late for you.
I had the same problem and I realize it is course by manifest link tag in the header:
<link id="manifest_link" rel="manifest" href="/manifest.json">
The moment you have this, any link or redirect from your PWA will launch Safari regardless of internal or external link.
One solution is to have the link remove from header with javascript after you load the file:
var manifestlink = document.getElementById("manifest_link");
document.head.removeChild(manifestlink);
However that might course some issues for android. You have to test your scenario with on both thoroughly.
I am self teaching Ionic framework i have loaded up the ionic start myApp tabs according to the Getting started page from Ionic framework (http://ionicframework.com/getting-started/)
Everything is good, up and running on my mac, can serve and can emulate. Now... when I used the ionic upload to the Ionic View app on my mobile its fine - everything as expected.
BUT when i changed something for example in the controller.js file:
.controller('AccountCtrl', function($scope) {
$scope.settings = {
enableFriends: true
};
});
to enableFriends:false
and I ionic upload again, then i 'sync to latest' on the Ionic View app on my iphone... I am still getting the enableFriends:true (because the option was set to true - switch is green)
Just to let you know, I ionic build ios before the ionic upload, I tried to delete the app in the Ionic View app on my phone and re uploaded it.
So I am suspecting that the controllers.js is cached... if yes.. how can i clear this cache??!!!
For anyone that may be viewing this that may be having a problem with this in Ionic V2 apps not updating in the Ionic View App the process to execute is:
ionic serve
ionic upload
clear app data on view app
You'll notice that when you run ionic serve the build process executes which will update your files. Then you upload and your changes will be there. I hope this helps someone in the future.
I just found a solution - but not sure its the correct way but it works!
in the ionic.project file...
{
"name": "someProject",
"app_id": "2312n33"
}
delete the app_id!!!!
{
"name": "someProject",
"app_id": ""
}
this will generate a new app and it works! However if there is a better way to do this like clearing the cache (maybe there is the right way) - please post.
UPDATE - 20 May 2015
Ionic View App just fixed the caching issue where sync'ed changes weren't showing - in Version 1.0.6 Therefore this should not be a problem anymore.
Have you looked into this more?
try using the $ionicConfigProvider and set the cache to 0
code line would look like the following:
angular.module('myApp' ['ionic', 'starter.controllers', 'starter.services'])
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$ionicConfigProvider.views.maxCache(0);
//the rest of your Router information below here
});
here is a link to the API where I found it
This may not be the best way, but is another option.
I have a web app, hosted in a phonegap application (i use phonegap build for this)
The setup is simple, but shouldn't really matter in this case. I'll tell you anyways because sometimes the devil is in the details, right? :)
The details
The phonegap app is really just the minimal setup with one single html. That html actually serves as a splashscreen - the background of HTML has an image. There is a meta refresh tag, set to redirect the page to an external url. I'll call it myurl.com from now.
The website at myurl.com is build using jquery mobile and angularjs. I use that adapter floating around to handle the problem with both frameworks wanting to manipulate the dom on page load. This is the domain the app is really hosted on and where the whole application is run.
The setup
One page has a link to an external page. That page has a bootload of javascript, showing some fancy stuff. If you click the link - your app takes you to that page. That is great! It actually works on all devices. On my desktop browser and android app, i simply hit the hardware (or browser) BACK button and i'm returned to my app at myurl.com. Iphone on the other hand doesn't have a back button :(
My first attempt is creating a landing page that has a back button/link and an iframe to host the fancy page. It works on desktop and android even though i get some exceptions/errors in the console. It doesn't load on iphone - i can only suspect security issues. I am told that what i'm trying to do with the iframe won't work which i think is true.
How do i deal with this? I actually tried the InAppBrowser like this:
var ref = window.open(url, 'random_string', 'location=yes');
And i checked my config.xml has this:
<preference name="stay-in-webview" value="false" />
I also added this to my page:
<script stype="text/javascript" src="phonegap.js"></script>
Leaving out the phonegap.js file since phonegap build promise to include the correct version.
It still opens the page in the same view/app without the possibility to go back - i get the excat same result as just opening the link the normal way.
Help me {insert jedi name here}, you're my only hope!
EDIT:
I found the problem. The phonegap.js file is automaticly deployed ON the device so only the first index.html (with the meta refresh) actually links correctly. The pages on myurl.com is not linking to the file. I placed the phonegap.js on myurl.com and it's working. Only problem, the phonegap.js is different per device - meaning only the device i picked the phonegap.js from is working - the other devices break!
Anywhere i can link to the native apps files? i tried file:///{path}/phonegap.js but it doesn't work. I can see/guess the path, which is different per device, but for iphone its
Payload{name}.app\www - it won't load from there though... i also tried
http://localhost/phonegap.js
but that doesn't work either.
Any ideas?
FINAL EDIT
I decided to go back to the drawing board and place all the html files on the device instead. I'll implement JSONP on my ajax api instead so i can let the API live on myurl.com and still access it from the phone. It's probably also the intended way to make a phonegap app - i just liked the other approach more...
I actually just answered a question like this the other day. You can find it here. In short, see below:
Ensure you have <script src="phonegap.js"></script> in each of your pages that wants to use the inappbrowser
You should NOT need to include a plug-in tag in your config.xml. I am pretty sure that around 2.5 they included inappbrowser in the core build functionality.
To open a link in the inappbrowser, use this javascript:
function openURL(urlString){
myURL = encodeURI(urlString);
window.open(myURL, '_blank');
}
This will open the passed URL in the inappbrowser. If you change window.open(myURL, '_blank'); to window.open(myURL, '_system'); it will open the passed URL in the system browser.
Finally, your item clicks look like this:
<a href='#' onclick='openURL("http://www.urlyouwant")/>
Also, depending on the version of phonegap you are using, stayinwebview is depreciated.
***Based on your edit: Do not put phonegap.js in your project directory. When you upload it to build, it will include it in your project.
I am using the Cordova official Facebook plugin and run into a weird issue...
The login process, which previously worked just fine for me, is now open in some native Android "black-screen" view without any styling.
The functionality works just fine - the authentication process succeeds, so there is a consistent connection with Facebook. The thing is, I am expecting a Facebook view instead of only the text content without any styling. Here is an example with Facebook native Hackbook app:
Tried running on two different devices - the issue remains.
Tried with cordova 2.2.0, then started a fresh project with 2.5.0 - the issue remains.
Please advice.
UPDATE:
Well, I have spent too much time on this issue, and it seems like this is the new Facebook SDK for Android.
I really wish I am wrong here, but here are examples from Facebook's flow for Android:
https://developers.facebook.com/docs/howtos/androidsdk/3.0/login-with-facebook/
Also - when checking the other sample apps in the SDK, all of them behave the same. The only one that shows a Facebook page is the Hackbook, and by it might be because this app is implemented with the old API (version 2):
https://developers.facebook.com/docs/getting-started/facebook-sdk-for-android/3.0/
Hackbook: another sample app demonstrating a selection of Graph API calls. Note that this sample is untouched from v2.0 of the SDK, and demonsrates the SDK's backward-compatibility.
UPDATE 2:
Ok, digging a bit more into it, it seems that there is no iframe involved here, the screen can be changed as you wish with a regular android activity theme added to the activity.
Here is an example of adding one of Androids default themes to the androidMenifest.xml (you can of course create your own Faceboke like theme ):
<activity android:name="com.facebook.LoginActivity"
android:theme="#android:style/Theme.Black.NoTitleBar"
android:label="#string/facebook_login" />