When this key is set to NO, your app will not terminate when the user switches to another app. Instead, it will move to the background and enter a suspended state. This should prevent the black screen issue.
Here’s how you can modify your Info.plist file:
UIApplicationExitsOnSuspend
I am using ionic capacitor and while i click on app switcher i mean my application goes at the background then screen shows black.
2 posts - 2 participants
Originally published at: https://ionic.io/blog/the-magic-of-vite-and-native-in-2024-a-brief-overview
A look at what new tools are out there, the latest targets we can deploy to, and how tools like Ionic are utilizing Vite to provide the best-in-class experience for developers.
1 post - 1 participant
Hi, I’m using a custom icon within my accordion by adding the class ion-accordion-toggle-icon to an IonIcon within a IonItem, within an IonAccordion. The new icon is showing up as expected, but when it is expanded I need it to rotate 90 deg instead of 190 deg. It doesn’t look like there’s an attribute for controlling this, but I figured I could do it with CSS since there is an accordion-expanded class that gets applied to the accordion component. No matter what I try I’m not able to get a selector to apply styles to the icon within though.
I’ve tried straight CSS like this:
.accordion-expanded > [slot="header"] .ion-accordion-toggle-icon
And I’ve tried using the shadow part for the accordion like this:
ion-accordion::part(header expanded) .ion-accordion-toggle-icon
Neither of those worked. Anyone have a suggestion on how to make this work?
Also, is it just not possible to access elements through an ionic shadow part, like i’m trying to do here?
Here is the React code I’m using for the accordion:
<IonAccordion color={color} toggleIconSlot={toggleIconSlot} value={accordionValue}>
<IonItem color={color} data-test="accordion-item" lines="none" slot="header">
{header}
<IonIcon
className="ion-accordion-toggle-icon"
color={color}
icon={IconList.chevronRight as IconName}
slot={toggleIconSlot}
/>
</IonItem>
{content}
</IonAccordion>
Thanks!
1 post - 1 participant
I’m encountering an issue with push notifications in my Capacitor iOS app. The notifications work correctly when registering, but when I try to clear notifications by calling: PushNotifications.removeAllDeliveredNotifications(); , it is returning the error:
[error] - {“errorMessage”:“event capacitorDidRegisterForRemoteNotifications not called. Visit Push Notifications Capacitor Plugin API | Capacitor Documentation for more information”,“message”:“event capacitorDidRegisterForRemoteNotifications not called. Visit Push Notifications Capacitor Plugin API | Capacitor Documentation for more information”}
In my swift delegate, I have this code, which works perfectly fine when registering and receiving notifications, but doesn’t get called when clearing for some reason:
func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
Messaging.messaging().apnsToken = deviceToken
Messaging.messaging().token(completion: { (token, error) in
if let error = error {
NotificationCenter.default.post(name: .capacitorDidFailToRegisterForRemoteNotifications, object: error)
} else if let token = token {
NotificationCenter.default.post(name: .capacitorDidRegisterForRemoteNotifications, object: token)
}
})
}
All the notifications are building up in the notification center and the app badge is not being removed.
Any insights or suggestions would be greatly appreciated. Thank you!
1 post - 1 participant
Hi,
Unable to perform ionic cap sync:
[capacitor] 
Updating iOS native dependencies with pod install - failed!
[capacitor] update ios - failed!
[capacitor] [error] /usr/local/Cellar/cocoapods/1.15.2/libexec/gems/claide-1.1.0/lib/claide/command.rb:439:in `help!': [!] You cannot run CocoaPods as root. (CLAide::Help)
Thanks
2 posts - 2 participants
Hi! I’m using Ionic 7 version and I’m working with pages like login, register and home. I’ve just added this leaftlet map feature on the background; however I don’t know why everytime I’m transitioning between pages the general style of the page I’m going doesn’t load correctly. For example, when I try to change from register to login after pressing the button for doing so, the screen display only appears half of the interface at a half, which leads me to double click that button AND refresh the page I want to go so that I can view the style the way it actually is. I would appreciate if someone can help me to fix this issue. Thanks!
1 post - 1 participant
Is there an option to add a maker to the map using the native plugin that is a Text label and an image?
like this:
with the API its simple just passing the ‘label’ argument but in the native plugin its not present.
thanks for any help. o/
1 post - 1 participant
VERY SIMPLE QUESTION:
Is it possible to allow requests to servers hosted using self signed certificates?
As far I understood, the problem is the WebView.
Using Java code, I can trust my certificate, but access https inside the WebView I can’t.
MORE EXTENDED QUESTION:
I created an Ionic App that requests to an https server. (it doesn’t work).
And I created an Android Java App that requests the same server. (it works).
The Ionic app code: ionic app
The Java app code: java app
I created a very simple page in an Apache2 server on 192.168.1.27 using SSL (self signed certificate) and CORS enabled.
I created the certificate using:
sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout ./server.key -out ./server.crt -addext "subjectAltName = IP.1:192.168.1.27"
In the Ionic app I called:
this.http.get('https://192.168.1.27:8443').subscribe({
next: (response) => { console.log(response); },
error: (error) => { console.error(error); },
complete: () => console.log('completed!!!!')
});
I copied the server.crt to res/raw/server.crt in both apps.
I created the file xml/network_security_config.xml
I trusted the certificate, I allowed clear text traffic to 192.168.1.27 in both apps.
Using my Java Android app (on a physical device) the request call works fine.
Using ionic serve in another computer with another IP (192.168.1.2), my app works.
Using my Ionic app on an Android physical device I get this error:
If I open a browser using my Android cellphone, I can navigate to https://192.168.1.27:8443
On BridgeWebViewClient I overrided onReceivedSslError and printed a message to inspect if an ssl error is caught, and yes, I get an ssl error.
1 post - 1 participant
Hi there
As someone who is learning Ionic, I am finding inspiration from projects like these, https://youtu.be/2LbCnGrWv40
1 post - 1 participant
Hello Guys,
I am trying to capture the error that occurred on Webview cycle on native Android. I checked the capacitor provide addWebViewListener that provides useful information related to Webview but it doesn’t return error information in public void onReceivedError(WebView webView). So my main question is how I can access that information on native Android? Should I create another WebViewClient that is inherited from BridgeWebViewClient or there is the proper way to access webview errors?
1 post - 1 participant
basically I have an app that consist of events, there are events registered on different times. I have local notification through which user get to know that his event is there before 15 minutes according to the requirements. It is working when the app is in use but when the app is killed notification is not appearing i want local notification to be appear when the app is killed ! Ionic 7 Capacitor 5 What to do 
1 post - 1 participant
I have this error :error: node_modules/@stencil/core/internal/client/index.js: node_modules/@stencil/core/internal/client/index.js:Invalid call at line 4038: import( /* @vite-ignore */
I don’t understand why?
1 post - 1 participant
I need to create a meeting scheduler and my client would like to add virtual meetings. Since I am using Ionic Angular I wanted to know if this was possible?
1 post - 1 participant
Hello, please tell me, can I make a line break placeholder in ion-input if the word doesn’t fit within the input width?
1 post - 1 participant
Originally published at: https://ionic.io/blog/recapping-ngconf-2024
In March, the Angular community gathered in Salt Lake City for the annual edition of ngConf. Here are some of the most interesting things I learned there.
1 post - 1 participant
Hello,
I have an application where the user is able to select English or Spanish as a language. The language change propagates to every component except app.component.ts, which I am unable to change once it has loaded. It keeps it’s static values.
Attempts to create services to do this resulted in circular dependencies, and attempts to add ‘brute force’ javascript to change these titles was also unsuccessful.
Any help is appreciated, thank you. If more detail is needed, please let me know.
1 post - 1 participant
I’ve developed a mobile application for both Android and iOS using Capacitor, Ionic, and Angular. My header doesn’t have an overlay. I’d like the status bar to have the same background color as my header (which is dynamic). I tried adding the following code:
await StatusBar.setBackgroundColor({ color: '#00000000' }); // Colore trasparente
await StatusBar.setOverlaysWebView({ overlay: true }); // Per coprire la barra di stato
This is the result:
I’d like to have header similar to:
What is the best practice?
Thanks
1 post - 1 participant
I need to download a document from a remote server and save it locally for offline consultation. I developed this code but I am getting error.
I read that Filesystem has downloadFile() but I don’t understand as use it. So I created custom method in order to download file, convert to blob and then save it using plugin.
async downloadFile() {
const url = 'https://calibre-ebook.com/downloads/demos/demo.docx';
const filePath = 'demo.docx'; // Percorso locale dove salvare il file
try {
const response = await fetch(url, {
mode: 'no-cors'
});
const blob = await response.blob();
console.debug("BLOB:", blob);
await Filesystem.writeFile({
path: filePath,
data: blob,
directory: Directory.Documents,
encoding: Encoding.UTF8 // Puoi scegliere l'encoding del file
});
console.log('File saved successfully');
alert('File saved successfully');
} catch (error) {
console.error('Error occurred:', error);
alert ("Error occurred");
}
}
Error Occurred:
Error: NO_DATA
at returnResult ((index):956:32)
at cap.fromNative ((index):938:17)
at <anonymous>:1:18
Tested on Android Real Device.
Do I need to add any explicit permissions?
Thanks
2 posts - 2 participants
andriod app works locally but doesn’t pass a device token when put to beta built through ionic
has anyone else come across this issue?
1 post - 1 participant
I am facing heating and battery draining issues in iOS while recording audio. I am using a Cordova media plugin. The heating issue starts when I stop the recording and then start recording again. While recording, my mobile CPU usage goes up to 45%
1 post - 1 participant