How can i detect in Ionic Vue if the app closes or if the app is send to the background?
this.platformor platform isn't available or does not work?!
You can subscribe to the appStateChange event, like described here: https://capacitorjs.com/docs/apis/app
Example:
import { App } from '#capacitor/app'
export default {
created () {
App.addListener('appStateChange', state => {
if (!state.isActive) { // if isActive is true, App got sent to foreground, if it is false, it got sent to the background
...
}
})
}
}
Related
I used pusher to add real-time updates to my web app. Like if a user hits the like button on a post, the number of likes increases instantaneously in the UI.
That works fine when I run the app locally (illustrative GIF).
But when I deployed the app to Vercel, Pusher doesn't update the UI, unless I navigate to another tab and then return back to my app tab (GIF).
Vercel logs show that everything works as expected. The React component subscribes properly to Pusher channel and gets the new data. However, the UI never updates while I'm viewing the tab.
// Setting up pusher
import Pusher from "pusher";
const pusher = new Pusher({
appId: PUSHER_APP_ID,
key: PUSHER_KEY,
secret: PUSHER_SECRET,
cluster: us2,
useTLS: false,
});
export default pusher;
// Subscribing the component to Pusher channel
useEffect(
function subscribeToPusher() {
const pusher = new Pusher(PUSHER_KEY, {
cluster: us2,
forceTLS: true,
});
const channel = pusher.subscribe("reviews");
channel.bind("updated", updateReview);
},
[]
);
// Listen to MongoDB's ChangeStream
changeStream.on("change", async (change) => {
console.log("change: ", change);
switch (change.operationType) {
case "update": {
const document = change.fullDocument;
pusher.trigger(collectionName, "updated", document);
break;
}
}
});
Note: the deployed version works as expected when I run npm run dev locally which is a bit strange.
It was Vercel. It worked once I tried Heroku.
I am using Ionic version 5.4.16 and i am trying to close the app by hardware back button with a alert message for confirm to exit. I have checked a lot of tutorials for the same and everywhere i saw 2 ways to achieve that --
this.platform.exitApp();
and
navigator.app.exitapp()
and
navigator.["app"].exitapp();
But none of these option are working in Ionic 5, its not recognizing the function exitApp().
So how to achieve the same if anyone has faced the same issue do suggest, thank you.
To close the app, you must configure the following:
import { Plugins } from '#capacitor/core';
const { App } = Plugins;
App.exitApp();
Try to paste this code.
public unsubscribeBackEvent: any;
ionViewDidEnter() {
this.initializeBackButtonCustomHandler();
}
initializeBackButtonCustomHandler(): void {
this.unsubscribeBackEvent = this.platform.backButton.subscribeWithPriority(999999, () => {
if(window.confirm('Do you want to exit the app?'))
{
navigator['app'].exitApp();
}
});
}
ionViewWillLeave() {
this.unsubscribeBackEvent.unsubscribe();
}
I hope it's done.
I'm working on a Flutter Web PWA app and having trouble with triggering the Add To Home Screen prompt from within the flutter app. I understand it can be triggered using Javascript with the code below, but how do I do this from my Flutter dart file?
buttonInstall.addEventListener('click', (e) => {
// Hide the app provided install promotion
hideMyInstallPromotion();
// Show the install prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the install prompt');
} else {
console.log('User dismissed the install prompt');
}
})
});
Currently, Flutter web can only prompt PWA installs from the browser. The issue with displaying PWA install prompt is it breaks the compatibility/design with Android/iOS builds as the feature is web-specific.
A different approach that you can take here is by displaying "PWA install" reminders when the app is run on web. Otherwise, it's best to file this as a feature request.
I created the pwa_install package specifically for this purpose.
1. Update index.html
<!-- Capture PWA install prompt event -->
<script>
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
deferredPrompt = e;
});
function promptInstall(){
deferredPrompt.prompt();
}
// Listen for app install event
window.addEventListener('appinstalled', () => {
deferredPrompt = null;
appInstalled();
});
// Track how PWA was launched (either from browser or as PWA)
function getLaunchMode() {
const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
if(deferredPrompt) hasPrompt();
if (document.referrer.startsWith('android-app://')) {
appLaunchedAsTWA();
} else if (navigator.standalone || isStandalone) {
appLaunchedAsPWA();
} else {
window.appLaunchedInBrowser();
}
}
</script>
2. Call PWAInstall().setup()
You can call this method in main.dart before calling runApp()
Future<void> main() async {
// Add this
PWAInstall().setup(installCallback: () {
debugPrint('APP INSTALLED!');
});
runApp(MaterialApp(home: App()));
}
3. Check if the Install Prompt is enabled
Before calling the promptInstall_() method, you can check if the Install Prompt is available using PWAInstall().installPromptEnabled.
installPromptEnabled will be true if:
The app was launched in a browser (It doesn't make sense to prompt a PWA install if the app is already running as a PWA)
The beforeinstallprompt event was captured.
promptInstall_() won't do anything if installPromptEnabled is false so you should check this flag before attempting to call the prompt.
4. Call PWAInstall().promptInstall_()
Finally, call PWAInstall().promptInstall_() to show the install prompt.
Note that this will not work on Safari since Safari does not implement the beforeinstallprompt method this package relies on.
I am using phonegap-barcodescanner-plugin to read qr while a service is reading instant payments on background.
I am detecting a new instant payment in the service and launching an event subscribed in the page where the barcodeScanner is launched
event.subscribe('instant-payment', (val) => {
console.log("Hi--------------", val)
this.navCtrl.pop()
});
the event is correctly fired and the log is ok but I'm trying to do a navCtrl.pop() and the Activity is never closed, I thought was going to work same way like cancelling scanner
scan() {
this.barcodeScanner.scan(this.options).then(barcodeData => {
if (barcodeData.cancelled == true) {
this.navCtrl.pop()
} else {
}
}).catch(err => {
console.log('Error', err);
});
}
Is there anyway to force close barcodeScanner and go back to the last "IonicPage".
Thanks for any help.
I am doing the following in an ionic application:
When a user is logged in, subscribe to their user ID topic
When a push notification arrives, console.log something.
this.authState.subscribe((state) => {
if (state) {
this.fcmPush.subscribeToTopic(state.uid);
this.fcmPush.onNotification().subscribe(notification => {
if (notification.wasTapped) {
console.log('Received in background', notification);
} else {
console.log('Received in foreground', notification);
}
});
}
});
Source: https://github.com/AmitMY/ionic-starter-firebase/blob/master/src/app/app.component.ts#L118
Sending a notification to my own topic arrives (after a few minutes), but I never see anything in console, both from outside the app, and inside the app.
What am I doing wrong?
Sending a notification from firebase messaging does not work.
However, using the sdk I must add:
click_action: "FCM_PLUGIN_ACTIVITY",
Which is in the usage guide but I missed