I made an app using Ionic, Capacitor, and Nextjs. I want to use Live Update via Appflow, which requires react-scripts build. Can’t I use this with nextjs? Please let me know if there is a way to do ionic deploy add without react-scripts.
I wrote detail issue in nextjs + ionic + capacitor example repository what I referred.
1 post - 1 participant
I have an Ionic app and Share Extension set up in X Code (both in the same App Group called ‘group.com.myapp’) and I am trying to share data from the Share Extension to my Ionic app. I have added some test code to the Share Extension that adds data to UserDefaults but whenever I try to read the data in my Ionic app, the data is null.
Steps:
My Share Extension code (using template generated by X Code) is below. Notice where I save test data to UserDefaults.
import UIKit
import Social
class ShareViewController: SLComposeServiceViewController {
override func isContentValid() -> Bool {
// Do validation of contentText and/or NSExtensionContext attachments here
return true
}
override func didSelectPost() {
// This is called after the user selects Post. Do the upload of contentText and/or NSExtensionContext attachments.
let userDefaults = UserDefaults(suiteName: "group.com.myapp")
userDefaults?.set("Testing group storage!", forKey: "groupStorageTest")
// Inform the host that we're done, so it un-blocks its UI. Note: Alternatively you could call super's -didSelectPost, which will similarly complete the extension context.
self.extensionContext!.completeRequest(returningItems: [], completionHandler: nil)
}
override func configurationItems() -> [Any]! {
// To add configuration options via table cells at the bottom of the sheet, return an array of SLComposeSheetConfigurationItem here.
return []
}
}
And in my Ionic app I just try to log the storage value.
const setOptions = async () => {
await Storage.configure({ group: 'group.com.myapp' });
};
setOptions();
const checkValue = async () => {
const { value } = await Storage.get({ key: 'groupStorageTest' });
console.log('storage:', value); // this always logs null; should be "Testing group storage!"
};
checkValue();
1 post - 1 participant
I am currently using ionic capacitor PushNotifications for Firebase cloud messaging. By the help of this I can get tokens.
Now I want to send notifications to all app users so I decided to use topics.
For this, I installed community/FCM plugin.
I also made suggested changes in the MainActivity.java file, no error during app build.
But after installation this FCM plugin, PushNotifications(token) stop working.
Even below code starts always retuning false.
if (isPushNotificationsAvailable) {
this.initPushNotifications();
}
Here is my MainActivity.java file:-
package io.ionic.starter;
import com.getcapacitor.community.fcm.FCMPlugin;
import android.os.Bundle;
import com.getcapacitor.BridgeActivity;
import com.getcapacitor.Plugin;
import java.util.ArrayList;
public class MainActivity extends BridgeActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Initializes the Bridge
this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
// Additional plugins you've installed go here
// Ex: add(TotallyAwesomePlugin.class);
add(FCMPlugin.class);
}});
}
}
Here my fcm.service.ts File:-
import { Component, Injectable } from '@angular/core';
import { Capacitor } from '@capacitor/core';
import { Router } from '@angular/router';
import { Storage } from '@ionic/storage';
import {
ActionPerformed,
PushNotificationSchema,
PushNotifications,
Token
} from '@capacitor/push-notifications';
// import { FCM } from '@capacitor-community/fcm';
const isPushNotificationsAvailable = Capacitor.isPluginAvailable('PushNotifications');
@Injectable({
providedIn: 'root'
})
export class FcmService {
public topicName = 'project';
constructor(
private router: Router,
private storage: Storage
) { }
initPush() {
//This Plugin is not available on web
if (isPushNotificationsAvailable) {
this.initPushNotifications();
}
}
// Request permission to use push notifications
// iOS will prompt user and return if they granted permission or not
// Android will just grant without prompting
private initPushNotifications() {
//console.log('Initializing HomePage');
PushNotifications.requestPermissions().then(result => {
if (result.receive === 'granted') {
// Register with Apple / Google to receive push via APNS/FCM
PushNotifications.register();
} else {
// Show some error
}
});
PushNotifications.addListener('registration', (token: Token) => {
alert('Push registration success, token: ' + token.value);
//Store Devive Token in session variable
this.storage.set("device_token", token.value);
// FCM.getToken()
// .then((r) => alert(`Token ${r.token}`))
// .catch((err) => console.log(err));
// now you can subscribe to a specific topic
// FCM.subscribeTo({ topic: this.topicName })
// .then((r) => alert(`subscribed to topic`))
// .catch((err) => console.log(err));
});
PushNotifications.addListener('registrationError', (error: any) => {
//alert('Error on registration: ' + JSON.stringify(error));
});
PushNotifications.addListener(
'pushNotificationReceived',
(notification: PushNotificationSchema) => {
//alert('Push received: ' + JSON.stringify(notification));
},
);
PushNotifications.addListener(
'pushNotificationActionPerformed',
(notification: ActionPerformed) => {
// alert('Push action performed: ' + JSON.stringify(notification));
const data = notification.notification.data;
//console.log('Action performed: ' + JSON.stringify(notification.notification));
if (data.detailsId) {
this.router.navigate(['/bid-project', data.detailsId]);
}
},
);
}
//Reset all Badge count
// resetBadgeCount() {
// PushNotifications.removeAllDeliveredNotifications();
// }
// move to fcm demo
// subscribeTo() {
// PushNotifications.register()
// .then((_) => {
// FCM.subscribeTo({ topic: this.topicName })
// .then((r) => alert(`subscribed to topic ${this.topicName}`))
// .catch((err) => console.log(err));
// })
// .catch((err) => alert(JSON.stringify(err)));
// }
// unsubscribeFrom() {
// FCM.unsubscribeFrom({ topic: this.topicName })
// .then((r) => alert(`unsubscribed from topic ${this.topicName}`))
// .catch((err) => console.log(err));
// }
}
After removing community plugin token generation started working as before.
Please tell me what wrong is with my code.
1 post - 1 participant
Key Requirements:
How? We use quizzes to create deep psychographic profiles of users and use social science and machine learning to privately connect them in group chats of 3.
Our Mission: Eradicate loneliness, and create life-changing friendships at scale.
Commitment: 35h/week
4 posts - 4 participants
Hi,
Please help me find a chat functionality like in whatsaApp. Where I can see a list of users I had chat with and on clicking that chat I can have one-on-one conversation screen. I’ve searched it but mostly end up finding group chats only.
1 post - 1 participant
I created a new ionic vue project using ionic start, created a list, then did a web deploy. On the browser, the app has a black background but when I check the test link on my phone the app has a white background. It turns out the app somehow inherits the OS theme I am using a dark theme on my machine theme. I didnt touch the CSS.
Is this intentional? If so, where is this set in the code?
1 post - 1 participant
I am trying to find out how to have the range slider next to a text field (type ‘number’). Something like this screenshot:
Is there any clean solution from ionic?
Let me know if you need more info.
Thanks.
1 post - 1 participant
I was wondering if ionic Range slider can have a logarithmic step. What I need is to implement something like a range between 0 to 65000 but with this kind of steps: 0 – 10 – 100 – 1000 – 10000 — 65000
1 post - 1 participant
How can I show a popover without giving focus to it?
Use case: I want to use it inside my editor for visual autocompleting feedback. 
1 post - 1 participant
I would like to know if it’s possible to align Ionic searchbar placeholder to the left side when unfocus?
as of right now the placeholder is currently centered when unfocus
<ion-searchbar
slot="bottom"
mode="ios"
autocomplete="off"
autocorrect="off"
spellcheck="false"
animated="true"
debounce="500"
clearIcon="close"
[placeholder]="placeholder"
[(ngModel)]="search"
(ionChange)="runSearch()"
></ion-searchbar>
ion-searchbar {
height: 40px;
padding: 0px;
border: 1px solid rgba(0, 56, 100, 0.4);
box-shadow: none !important;
border-radius: 6px;
margin: 8px 0 12px;
--border-radius: 6px;
--background: white;
--placeholder-color: red;
text-align: start !important; // not working
text-align: left !important; // not working
align-items: flex-start; // not working
&::placeholder {
text-align: left; // not working
}
}
1 post - 1 participant
Capacitor 3 on Ios generates this sometimes on app startup.
Any body seen something like this, an idea why they occur?
Ionic 6
Thanks
1 post - 1 participant
Originally published at: Building with Stencil: Tabs - Ionic Blog
As user interfaces (UI) go, tabs are a particularly useful pattern. The word “tab” invokes images of beige manila file folders. Early UI mimicked this physical property by placing buttons along the top of a dedicated space. Mobile devices, with their confined spaces, find the tab pattern in accordions, bottom button bars, and more. In…
1 post - 1 participant
my template (I have another topic on v-for not allowing for contructed onclick and attaributes constructed dynamically)
<template>
<ion-page>
<ion-content :fullscreen="true" >
<div id="container" v-if="type === a">
<ion-row class="typea" >
<ion-button
color="a1"
ref="first_button_1"
@click="setTarget( type, labels[0] )" alt="type 1">
{{labels[0]}}
</ion-button>
<ion-button
color="a2"
@click="setTarget( type, labels[1] )" alt="type 2">
{{labels[1]}}
</ion-button>
</ion-row>
<ion-row class="typea">
<ion-button
color="a3"
@click="setTarget( type, labels[2] )" alt="type 3">
{{labels[2]}}
</ion-button>
<ion-button
color="a4"
@click="setTarget( type, labels[3] )" alt="type 4">
{{labels[3]}}
</ion-button>
</ion-row>
<ion-button class="backbutton backbutton_a" @click="back" color="tertiary" >return to configuration</ion-button>
</div>
<div id="container" v-else>
<ion-row class="typeb" >
<ion-button
color="a1"
ref="first_button_2"
@click="setTarget( type, labels[0] )" alt="type1">
{{labels[0]}}
</ion-button>
</ion-row>
<ion-row class="typeb">
<ion-button
color="a2"
@click="setTarget( type, labels[1] )" alt="type2">
{{labels[1]}}
</ion-button>
</ion-row>
<ion-row class="typeb">
<ion-button
color="a4"
@click="setTarget( type, labels[2] )" alt="type4">
{{labels[2]}}
</ion-button>
</ion-row>
<ion-button class="backbutton backbutton_b" color="tertiary" @click="back" >return to configuration</ion-button>
</ion-content>
</ion-page>
</template>
when this page is shown, if type=‘a’, then ALWAYS the button color=“a3” is selected. if type b, then ALWAYS the back button is selected, and when accessibility is enabled, the button alt text is spoken in either case
i have tried all the things others have tried, $nextTick(), setTimeout
notice I am doing this in didEnter()… which SHOULD be after everything is completed according to the lifecycle doc
ref lifecycle ref
ionViewDidEnter - If you see performance problems from using ionViewWillEnter when loading data, you can do your data calls in ionViewDidEnter instead. *However, this event will not fire until after the page is visible to the user*,
ionViewDidEnter(){
console.log(" sending focus change, refs="+JSON.stringify(Object.keys(this.$refs),null,2));
const dest= ('first_button_'+this.prop[0])
console.log("dest="+dest)
this.$refs[dest].$el.focus();
}
prop is ‘1’ or ‘2’
the console shows(here for type 2)
[log] - sending focus change, refs=[
"first_button_2"]
⚡️ [log] - dest=first_button_2
trying to set the focus to the top or top/left button (this for blind user, stats show 1st button would be picked 75% of the time, so save them having to hunt for it. )
so, what am I missing?
ionic v = 6.16.3
1 post - 1 participant
Greetings. I’m trying to build a simple radio streaming android application using capacitor.js, ionic-vue, and howler.js. This is just a practice project as I’m new to the above-mentioned libraries. I followed the howler.js streaming radio docs and managed to get the application to work to my satisfaction (on the browser). The problem however arises when I generate an android apk and try to run the app on a native android device or android emulator. The radio stream just doesn’t play, it loads forever. It works perfectly fine when running it on the browser using ionic serve.
I’ve tried to search for a solution but to no avail. I gathered Howler.js has this html5: true option that essentially makes use of html5 audio that allows you to stream large audio files so I wonder if that has something to do with it but I set the value to true and it works fine on the browser but it still doesn’t work when I build the app into an android apk. The app UI renders just fine, when I click the play button to stream radio, it just loads indefinitely and never starts playing.
or maybe android requires certain permissions to play audio? Please assist. a code sample of the stream function is down below. Poorly written code but I am learning
1 post - 1 participant
I am using the cordova local notification plugin and at times when clicking on the notification, it opens the app and other times it takes a very long time to open the app - this is only happening on Android.
Anyone experience this as well?
1 post - 1 participant
Hi,
I have been looking for a solution for this for the past 2 months. I am currently using Ionic Capacitor as the native bridge and I have a problem with SSL Pinning on iOS. The plugin used is the HTTP Cordova plugin:
and
I want to point out that this method is working fine for Android. However, with iOS, I am receiving the following error on Xcode:
Connection 1: default TLS Trust evaluation failed(-9813)
Connection 1: TLS Trust encountered error 3:-9813
Connection 1: encountered error(3:-9813)
I am not sure how to fix this problem. I’ve googled everywhere, and most of the solution is for Android, and not iOS specifically.
Any help is very much appreciated. Thank you.
1 post - 1 participant
Hi,
I was wondering if a public API exists to use Appflow in an automated way.
I am creating a nocode app builder and I am using capacitor to create apps.
So I would need to compile some code on the fly.
Does this kind of feature exist in Appflow? Thanks
1 post - 1 participant
Hi there, I’m parsing a blob from an API using the Capacitor Blob Writer NPM package.
I would like to hash the blob as an MD5 and compare this to the MD5 hash returned from the API to check the integrity.
There is not much guidance in this regard online or on this forum. Any help would be appreciated.
Thanks!
2 posts - 2 participants
Greetings. I’m trying to build a simple radio streaming android application using capacitor.js, ionic-vue, and howler.js. This is just a practice project as I’m new to the above-mentioned libraries. I followed the howler.js streaming radio docs and managed to get the application to work to my satisfaction (on the browser). The problem however arises when I generate an android apk and try to run the app on a native android device or android emulator. The radio stream just doesn’t play, it loads forever. It works perfectly fine when running it on the browser using ionic serve.
I’ve tried to search for a solution but to no avail. I gathered Howler.js has this html5: true option that essentially makes use of html5 audio that allows you to stream large audio files so I wonder if that has something to do with it but I set the value to true and it works fine on the browser but it still doesn’t work when I build the app into an android apk. The app UI renders just fine, when I click the play button to stream radio, it just loads indefinitely and never starts playing.
or maybe android requires certain permissions to play audio? Please assist.
Stream Function
import { ref } from 'vue';
import {Howl} from 'howler';
let sound
const currentTrack = ref(null)
const isLoading = ref(false)
const isPlaying = ref(false)
const stations = ref([
{id : 0, title: "Gabz FM", image : "gabzfm.png", stream: "https://onlineradiobox.com/json/bw/gabz/play?platform=web", description: "Power to Engage your World The most preferred contemporary adult radio station in Botswana", playing: false, loaded:false},
{id : 1, title: "Yarona FM", image : "yaronafm.png", stream: "https://onlineradiobox.com/json/bw/yarona/play?platform=web", description: "Yarona FM is a national broadcaster based in Gaborone, Botswana. The Station’s core audience comprises of young, upwardly mobile youth within the 20-29 age bracket with spillage on either side of this age group.", playing: false, loaded:false},
{id : 2, title: "Duma FM", image : "dumafm.png", stream: "http://s3.voscast.com:10076/;", description: "Duma FM is a family radio station whose primary objective is to INFORM, EDUCATE AND EDUCATE! This allows us to bring together people from all walks of life through conversation and music.", playing: false, loaded:false}
])
const streamStation = (id) => {
isLoading.value = true
stations.value.forEach(station => {
station.playing = false
station.loaded = false
});
sound = new Howl({
src: [stations.value[id].stream],
html5: true,
onload: function() {
isLoading.value = false
stations.value[id].loaded = true
console.log('Loaded Track');
isPlaying.value = true
},
onplay: function() {
stations.value[id].playing = true
currentTrack.value = stations.value[id]
},
onpause: function() {
console.log('')
},
onend: function(){
isPlaying.value = false
}
});
sound.play();
}
const pauseStream = (id) =>{
stations.value[id].playing = false
//isPlaying.value = false
sound.pause()
}
const togglePlay = (id) =>{
if(stations.value[id].playing){
pauseStream(id)
}else{
if(sound == null){
console.log('hit block 1')
streamStation(id)
}else{
console.log('hit block 2 which means i am not null')
if(stations.value[id].loaded){
console.log('hit block 2A')
sound.play()
}else{
console.log('opening new stream')
sound.unload()
streamStation(id)
}
}
}
}
const streamRadio = () => {
return {stations, isLoading, isPlaying, streamStation, togglePlay, currentTrack}
}
export default streamRadio
Ionic-Vue Component
<template>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Radio Test App</ion-title>
</ion-toolbar>
</ion-header>
<ion-content >
<ion-slides>
<ion-slide v-for="station in stations" :key="station.id">
<ion-card class="card-main" style="border-radius:20px;padding-bottom:30px;height:20%">
<ion-card-content>
<ion-card class="radio-logo-bg" style="border-radius:20px">
<ion-card-content>
<img style="max-width:250px" :src="`/assets/stations/`+station.image"/>
</ion-card-content>
</ion-card>
<h2>{{station.title}}</h2>
<p><b style="color:black">{{station.description}}</b></p>
<br><br>
<ion-button class="radio-btn" @click="togglePlay(station.id)" :disabled="(isLoading)? true : false " style="display:block;width:30%;margin:auto">
<ion-spinner v-if="isLoading" name="bubbles"></ion-spinner>
<ion-icon v-if="station.playing" src="/assets/icon/pause.svg"></ion-icon>
<ion-icon v-else src="/assets/icon/play.svg"></ion-icon>
</ion-button>
<ion-img v-if="station.playing" src="/assets/wave2.gif"></ion-img>
</ion-card-content>
</ion-card>
</ion-slide>
</ion-slides>
</ion-content>
</ion-page>
</template>
1 post - 1 participant