↧
How to migrate ionic 5 application to ionic 7
↧
IOS | APNS Push Notification not Receiving
APNS its work or not in IONIC-5 capacitor?
and in import { PushNotifications, Token } from ‘@capacitor/push-notifications’;
already i am getting device token then why firebase plugin all this required ?
i am using PHP for server side i am sending through APNS but i am not receiving notification in my device how this is possible please help.
1 post - 1 participant
↧
↧
How to call the laravel api in my Ionic Vue? I can build apk of that but the api wasn't call
import { createApp } from ‘vue’;
import { IonicVue } from ‘@ionic/vue’;
import App from ‘./App.vue’;
import router from ‘./router’;
import VueSweetalert2 from ‘vue-sweetalert2’
import ‘sweetalert2/dist/sweetalert2.min.css’
import ‘@ionic/vue/css/core.css’;
import ‘@ionic/vue/css/normalize.css’;
import ‘@ionic/vue/css/structure.css’;
import ‘@ionic/vue/css/typography.css’;
import ‘@ionic/vue/css/padding.css’;
import ‘@ionic/vue/css/float-elements.css’;
import ‘@ionic/vue/css/text-alignment.css’;
import ‘@ionic/vue/css/text-transformation.css’;
import ‘@ionic/vue/css/flex-utils.css’;
import ‘@ionic/vue/css/display.css’;
import ‘./theme/variables.css’;
import axios from ‘axios’;
import ‘swiper/swiper-bundle.css’;
const mobileToken = localStorage.getItem(‘mobileToken’);
axios.defaults.baseURL = ‘http://bookbubblesonline.infinityfreeapp.com/api’;
axios.defaults.headers[‘Authorization’] = Bearer ${mobileToken};
const app = createApp(App)
.use(IonicVue)
.use(router)
.use(VueSweetalert2);
router.isReady().then(() => {
app.mount(‘#app’);
});
axios.defaults.baseURL = ‘http://bookbubblesonline.infinityfreeapp.com/api’;
This is my web hosting api and I cannot call that 
help me guys
4 posts - 2 participants
↧
Find a way to set camera aspect ratio as in native camera
Hello,
I’m actualy using @capacitor/camera and @capacitor-community/camera-preview on my app to take pictures.
By default, the app is using 16:9 as aspect ratio and I would like to know it it is possible to change it to 4:3 or something else.
I’m detecting that I’m missing some information on the bottom and the top of the image when I use 16:9 as aspect ratio.
Thank you in advance
1 post - 1 participant
↧
Official support for svelte framework
Is there a timetable/ plans to release buit-in support for Svelte?
1 post - 1 participant
↧
↧
Why are there no examples of nonlinear routing for tabs?
SO I am reading through the docs and I see that there are suggestions on what NOT to do when using nonlinear routing /tabs routing, but there are no examples of what to do and how to handle navigation when implementing nonlinear routing. I have questions on the actual act of navigation. EG: If I don’t just want a user to immediately route from an href, say if they are not authenticated in the app what are best practices? Do I need to create a store of app navigations and check against them or is there a way to access the routing via the vue-router. Any additional info on the topic would be great. Thanks!
3 posts - 2 participants
↧
Capacitor device list empty
Hi there!
When I try to run my app, I get this output:
$ ionic cap run android
[ERROR] No devices or emulators found
My phone is connected, verified using
$ adb devices
List of devices attached
42000768dc092300 device
Idk how to solve this, so I really hope someone else knows how.
Thanks in advance!
2 posts - 2 participants
↧
Google Play's New Rules for New Accounts
Originally published at: Google Play's New Rules for New Accounts - Ionic Blog
Google Play recently announced a new rule for new accounts - learn about how it can potentially affect your projects.
1 post - 1 participant
↧
Webpage not available error in production
We recently upgraded from cordova to capacitor and some of our users (not all) are seeing this error page when they open the app on Android.
We have the hostname set to stormcloudapp as that is what it was set to previously with cordova and is required for CORS.
1 post - 1 participant
↧
↧
Is there a way to get the IonNav instance from within a child? Similar to useRouter?
Let’s say I was in a component nested inside an IonNav instance, is there a way for me to easily get the current IonNav object os I can programmatically call .pop()?
1 post - 1 participant
↧
Cannot fetch on physical iPhone
I am having trouble with fetch on iOS physical device only. I am NOT using Capacitor HTTP. The fetch works fine on iOS Simulator, Android Emulator, Android Physical Device, but not on a iPhone Physical Device. The endpoint is not called and the request eventually times out.
Logs:
⚡️ TO JS {"value":"http:\/\/192.168.1.190:8080\/api"}
⚡️ [error] - {} <-- This is a console.error of the error in catch statement.
I tried adding the following to Info.plist. No luck.
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
1 post - 1 participant
↧
Ionic Framework Essentials: From Basics to Advanced Techniques
Embark on a transformative journey into mobile app development with “Ionic Framework Essentials: From Basics to Advanced Techniques.” This comprehensive guide is crafted to empower developers, whether newcomers to the Ionic ecosystem or seasoned professionals seeking to master advanced techniques. Dive into the heart of Ionic, unravel its foundational principles, and elevate your skills to create cutting-edge cross-platform applications.
Chapter 1:Introduction to Ionic
Understanding the Ionic Framework
Exploring the Benefits of Cross-Platform Development
Setting Up Your Development Environment
Chapter 2:Ionic Basics: Building Blocks
Components and Directives
Styling with Ionic’s CSS Framework
Navigation and Routing Essentials
Chapter 3:Working with Ionic Components
Harnessing the Power of UI Components
Customizing and Extending Ionic Components
Form Controls and Input Handling
Chapter 4:Advanced Styling Techniques
SCSS and Theming Strategies
Responsive Design for Various Devices
Animation and Transition Effects
Chapter 5:Data Management in Ionic Apps
Handling Data with Ionic Services
Integrating APIs and Fetching External Data
Offline Data Storage Strategies
Chapter 6:Authentication and Security
mplementing User Authentication
Securing Ionic Apps: Best Practices
OAuth Integration and Social Sign-In
Chapter 7:Optimizing Performance
- Code Splitting and Lazy Loading
- Performance Monitoring and Optimization Tips
- Debugging and Profiling Ionic Apps
Chapter 8: Testing and Debugging Techniques
Unit Testing with Ionic
Debugging Strategies for Cross-Platform Apps
Embracing Continuous Integration
Chapter 9: Advanced Routing and Navigation
Nested Routing and Tab Navigation
Route Guards and Navigation Hooks
Dynamic Routing Patterns
1 post - 1 participant
↧
How to apply Live Updates manually? (Ionic docs out-of-date)
The current “background” live updates seem to work sporadically and unreliably. I’m trying to change the live updates method to “none” to apply live updates manually. Unfortunately the API documentation seems to be out-of-date. It tells you to install “cordova-plugin-ionic” (to be able to use the Deploy plugin) even though this is removed when migrating from Cordova to Capacitor. Also, when I try to re-install this plugin, the app no longer even starts.
Please provide information on how to use the autoUpdateMethod “none” method to apply Live Updates manually without using Cordova plugins.
Current live updates API documentation:
1 post - 1 participant
↧
↧
Popover position is not correct when center IonPage
↧
Popover postion not correct when center IonApp
Hi,
I am building an app that can run on mobile and web. In the web version. I want to limit its width and make it in the centre. here is what I do
.custom-mx-auto {
margin-left: auto;
margin-right: auto;
}
.custom-max-w-3xl {
max-width: 48rem/* 768px */;
}
<IonApp className='mx-auto custom-max-w-3xl'>
<IonReactRouter>
....
</IonReactRouter>
</IonApp>
however, I have an issue is that when the screen width becomes larger, the popover position is not right. This only happens when the screen width becomes in large
after investigation, it turns out that margin-left: auto; and margin-right: auto; will influence how popover determines position.
I wonder if is there a solution to keep Ionapp in the centre. and when the screen becomes smaller, it will turn into a one-column app.
–
I tried to use grid. but hard to apply it with IonSplitPane when the screen becomes smaller, it just compresses the content rather than keeps the content’s width.
1 post - 1 participant
↧
Pass data with routerLink
How do I pass data between routed components with the routerLink template directive?
<div class="navbtn" [routerLink]="'/blog'">blubb</div>
I tried everything.
Fragments, queryparams, params, state, extras, etc. etc.
I managed to get it done with
this.Router.navigateByUrl(url, { state: extras })
But I have to use the routerLink template directive because of routerLinkActive.
Thank you in advance kind strangers 
"@angular/core": "13.3.11",
"@ionic/angular": "^6.3.2",
1 post - 1 participant
↧
How do I change the maximum memory?
I have this problem where it says
Error occurred during initialization of VM
Could not reserve enough space for 1572864KB object heap
So where do I cchange how much memory is availible?
Thanks in advance!!!
2 posts - 2 participants
↧
↧
Understanding push notifications code structure
Hello, I hope you’re all doing well
I managed to get pushed notifications on an emulator from firebase, registering on the app, getting the token, having my api prompt the firebase endpoint and back to the app again.
The thing I can’t quite understand and not finding clear material on is where do I put the code for adding listeners and registering for token.
For now I had them in my App.vue onMounted but now moved them to a button click (for testing),
If I do leave them in main.ts for example or the mounting of any page/component, wouldn’t every time the user opens the app or opens that page the app would run the code again and getting a different/same code needlessly?
Is that the way it’s supposed to be always getting a different token for each use and re-registering it in my api for this current user? Which I’m sure is not the case as it doesn’t make much sense.
I really could use some help on wrapping my head around this so I understand it better.
Thank you kindly, I hope you’re having a good day
Regards
1 post - 1 participant
↧
iOS push notification no sound
Hi,
I am using @capacitor/push-notifications plugin to receive push but on iOS there is no sound and no badge count.
For sending Push I am using a new HTPP from google firebase https://fcm.googleapis.com/v1/projects/{$project}/messages:send
On Android everything works well.
In capacitor config I have this settings: "plugins": { "PushNotifications": { "presentationOptions": ["badge", "sound", "alert"] } }
Any suggestions why there is no sound and badge on iOS?
Thanks a lot
1 post - 1 participant
↧
Clear Auth History Stack With 'react-router-dom'
Hello,
I was wondering if there is a way to clear the history of my auth stack before I navigate to my app stack.
I have 3 pages in the auth stack I have to pass through before authenticating. The code below only remove the last page as expected, but is there a way to remove all the past pages?
import { useHistory } from 'react-router-dom'
const Component = () => {
const history = useHistory();
const handleAuthentication = () => {
// logic
history.replace('/app');
}
}
The reason for this is that “swipe back” on phone is making the app go back to auth stack. I override the hardware back button listener to not do that. However, the “swipe back” on IOS and android were not overridden
Thanks!
ionic info:
Packages:
“@ionic/react”: “^7.4.2”,
“@ionic/react-router”: “^7.4.2”,
“react-router”: “^5.3.4”,
“react-router-dom”: “^5.3.4”,
“@types/react-router”: “^5.1.20”,
“@types/react-router-dom”: “^5.3.3”,
Ionic:
Ionic CLI : 7.1.1
Ionic Framework : @ionic/react 7.5.6
Capacitor:
Capacitor CLI : 5.4.1
@capacitor/android : 5.5.1
@capacitor/core : 5.5.1
@capacitor/ios : 5.5.1
Utility:
cordova-res : 0.15.4
native-run (update available: 2.0.0) : 1.7.4
System:
NodeJS : v20.10.0
npm : 10.2.3
OS : macOS Unknown
───────────────────────────────────────────────
Ionic CLI update available: 7.1.1 → 7.1.5
Run npm i -g @ionic/cli to update
───────────────────────────────────────────────
1 post - 1 participant
↧