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.
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();
Did you findm the solution?
@akshay_kanchan your solution is working partially. Pressing back button will dismiss the modal but also going to the previous page. Any solution?
Using ionic 5, angular 12
Hi, I want a chat app like whatsapp which can show a list of users to whom I’ve chat. And then if i click the conversation i can have the chat of two users. I want this functionality using cloud firestore. any help would be appreciated.
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.
Each plugin page only documents the specific plugin code usage for that plugin, then, there is a common information page that documents framework specific configurations, such as the registering of providers for angular apps.
That “pressing tab” doesn’t autocomplete to /ngx is not a problem on the documentation or on the docs, but a problem on your IDE/Editor.
SALVE CEASAR!
I did not state that “tab not autocompleting to /ngx” is a problem, I simply stated that is is weird, I am indeed able to type /ngx myself.
Anyways, having a “common” information page should not be nececary if you could just state basic information for the implementation of a cordova plugin.
Also, be aware that the heathens of the north will beat you at the Battle of the Teutoburg Forest, so bls be prepared 
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
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.
Hello,
PM sent
Regards!
Seth
Hello,
I would be glad to assist you.
To discuss further in detail kindly reach me at garry@cisinlabs.com or Skype me: cis.garry
Looking forward for your response.
Thanks
Garry
thanks - i’m still having issues with this topic.
threw together a demo github repo - see the giffy: GitHub - j-d-carmichael/capacitor-demo
Not sure if you checked the link, but it contains a lot of information, because it supports multiple frameworks and every framework is different, so adding “basic” information to every plugin would basically mean to copy the whole page content into every plugin page, so, instead of that, a common page was created, linked as “setup”.
But they could probably link it on top so people don’t miss it.
I have indeed checked the link and it was very interesting, thank you for you contribution Ceasar!
Hello
Hope you are doing great
I can help you with your requirement
waiting for your response
Thanks
GSHRM
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?
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.
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
