You shouldn’t be doing this, to be honest. If you need to load an external site, you could use capacitor’s browser plugin,
But loading other sites as an iframe is
- Bad user experience
- Deceiving
- A fast way to get any app rejected by the app stores.
↧
How to render facebook,twitter URL in ionic 5 app
↧
How to render facebook,twitter URL in ionic 5 app
Thanks for the reply and suggestion.
As per the requirement I need to render URL in app , can’t open in browser.
So is there any way other then using iframe ?
↧
↧
How to render facebook,twitter URL in ionic 5 app
Not if facebook/twitter have set the x-frame-options on in their header.
You need to change your requirements or tell your client/boss that it is not possible due to Facebook/Twitter not allowing it.
This is not an Ionic issue, just the nature of how websites can block being embedded.
↧
SyntaxError: Unexpected number in JSON at position 4 when trying to debug with VSCode (Android)
I made a new app using ionic start myApp2 tabs --capacitor. I get the app running in my Android device with ionic cap run android but I can’t debug using VSCode because No WebViews found after attaching my device id.
launch.json
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "android-webview",
"request": "attach",
"name": "Attach to Android WebView",
"webRoot": "${workspaceFolder}"
}
]
}
↧
SyntaxError: Unexpected number in JSON at position 4 when trying to debug with VSCode (Android)
or you can use Chrome Devtools: Open Chrome DevTools - Chrome Developers
↧
↧
SyntaxError: Unexpected number in JSON at position 4 when trying to debug with VSCode (Android)
Ok. I’m managed to debug myApp2 with capacitor using VSCode: Launching first the app from terminal with ionic cap run android and then clicking Start Debugging (Run menu). The debug process was not automatic like I expected.
↧
How to render facebook,twitter URL in ionic 5 app
This also acceptable?
↧
Ionic FCM plugin: topic subscription
I am very new to ionic and capacitor i think “cordova-plugin-fcm-with-dependecy-updated” isn’t compatible for capacitor but you can use Capacitor FCM by capacitor-community (GitHub - capacitor-community/fcm: Enable Firebase Cloud Messaging for Capacitor apps) hope this helps
↧
beforeRouteUpdate and beforeRouteLeave never called
I tried to do it in a fresh Ionic Vue app with blank template and still no success.
Here’s the repo for that: dftd/IonicVue-beforerouteleave · GitHub
↧
↧
How to use ionic react with bluetooth printer?
I have researched the ionic documentation and I found 1 plugin to work with a printer: Printer Plugin | Cordova-Plugin-Printer for Ionic Apps. But in this document, it just has the example for angular, I do not know how to use with ionic react, such as register plugin, choose a device, print content, setting up options, or something like this…
Has anyone worked with it before? or you can send me a guide link, an example… It will save my day! Thanks every one <3
↧
Required attribute not working on ion-select
Is there any way to have “native” validation on ion-select?
required attribute isn’t working since it’s technically just a hidden input.
↧
Similar example to "Ionic Infinite Scroll" from @Angular into @React
can you check this?
↧
What's the best way to save data from a form and access it from multiple pages in a mobile app?
I referenced this post previously – does that fit your description?
↧
↧
Ionicons hex icons codes
I can’t speak with certainty, because I use a different icon library, but I believe that “hex code for each icon” has not been a meaningful concept since Ionic dumped the notion of icon fonts in favor of SVG in Ionicons 4.
↧
Apple Pay via In-App Broswer?
From what I’ve seen, the main limitation for Apple Pay JS on a web page is that you need to use a SFafariViewController, which is what Capacitor’s In-App Browser generates.
My team’s main concern is that we might run into issues with protocol, because Apple requires https, and I gather it is not possible to force an app to use https:// instead of capacitor://, and can even lead to an app being banned if you try. But we’re not sure if the example linked to applies to using an in-app browser, that would essentially be opening a different webpage altogether.
Is it possible to setup a webpage that implements Apple Pay JS, open the page via an in-app browser, then direct users back to the app once payment is complete?
↧
Updating the state of the Home page component from an IonModal
TLDR: I am adding data to the Redux store from an Ionic Modal that should be displayed on the home page, but when the modal is closed the home page isn’t updating to show the new data.
I have an IonModal that I’m using to get data from an API. I then add the response data to a list in my Redux store which is being displayed on the Home Page.
Here is the Home page React Code:
export default function Home(): ReactElement {
const quotes = useSelector((state: any) => state.quotes);
const [data, setData] = useState([]);
useEffect(() => {
setData(quotes);
}, [quotes]);
return (
<IonPage>
<IonContent fullscreen>
<Modal />
{data.map((q: any) => {
return <p key={q?._id}>{q?.content}</p>;
})}
</IonContent>
</IonPage>
);
}
and here is the modal React code:
export default function Modal(): ReactElement {
const [showModal, setShowModal] = useState(false);
const dispatch = useDispatch();
const getData = async () => {
const quote = await axios.get("https://api.quotable.io/random");
dispatch(addQuote(quote.data));
setShowModal(false);
};
return (
<>
<IonButton onClick={() => setShowModal(true)}>Open Modal</IonButton>
<IonModal isOpen={showModal} onDidDismiss={() => setShowModal(false)}>
<IonButton onClick={() => getData()}>Get Data</IonButton>
</IonModal>
</>
);
}
When that getData() function is run in the modal I would expect the modal to be closed and the data to be shown on the home page but currently, the home page is not updating even though the data is in the redux store. I think it has something to do with the component not being mounted when the redux state is updated. If this is the case how would I make the component update when it is mounted?
I’m quite confused so any help or advice would be much appreciated, Cheers.
↧
Apple Pay and Google Pay do they work on Ionic?
Just to add to anyone looking at this that v1.1.0 of @capacitor-community/stripe does not support Stripe connect accounts and v3.0.3 does not support Apple Pay.
↧
↧
How to use DotEnv with Ionic v5?
Thank you Aaron! You’re a lifesaver.
↧
Accepting apple pay donations for multiple nonprofits
I realize this is a long shot putting this in the Ionic forum but if any any has experience with the App Store and donations for non profits via a 3rd party app any help is appreciated.
I have multiple nonprofits on my app/platform (limited company) and I would like to accept donations for them.
I use Stripe Connect and the money would go direct from my app to the nonprofits Stripe account without any fees taken.
Is this possible with the current App Store guidelines? Do I need to get each nonprofit on my platform to pay for an Apple Developer license and register as an approved nonprofit on benevity?
https://developer.apple.com/apple-pay/nonprofits/
Some of them are already registered on benevity and a couple already have a developer license too.
Or is this not possible at all and I need to direct them outside of the mobile app to donate?
TBA if I have to help 1000 nonprofits set up developer accounts and register a merchant id I would prefer to just use the web.
I would also offer Apple pay as a payment option as this is a requirement.
In 3.2.1 below I would be the 3rd party app.
3.2.1 (vi) Approved nonprofits may fundraise directly within their own apps or third-party apps, provided those fundraising campaigns adhere to all App Review Guidelines and offer Apple Pay support. These apps must disclose how the funds will be used, abide by all required local and federal laws, and ensure appropriate tax receofit.ipts are available to donors. Additional information shall be provided to App Review upon request. Nonprofit platforms that connect donors to other nonprofits must ensure that every nonprofit listed in the app has also gone through the nonprofit approval process. Learn more about becoming an approved nonpr
↧
Unrelated view is mounted
I’m using Ionic v5 Vue for a simple app.
{
path: '/account',
component: () => import('@/views/Account.vue'),
},
{
path: '/invoice',
component: () => import('@/views/Invoice.vue'),
},
And then in each component I do async stuff onMounted and also each component has ion-back-button to take the user back to dashboard.
The issue I’m having is that if I visit /account, go back and then go to /invoice the account is also mounted. I confirmed it by console logging from onMounted of /account.
What am I doing wrong?
↧