Ionic unable to load App ID or API Key - ios

I have an existing app that I am trying to add push notifications to. After following through Ionic's own tutorials on adding it, I'm stuck with the app reporting:
CORE: Unable to load app ID or API key, falling back to $ionicApp.getApp()...
I've been Googling around trying to find an answer with no luck. In the main app.js I have added ionic.service.core, ngCordova, and ionic.service.push, as well as the config code block with the ids filled in:
.config(['$ionicAppProvider', function($ionicAppProvider) {
$ionicAppProvider.identify({
app_id: 'APP_ID',
api_key: 'API_KEY'
});
}])
In index.html I have added all the needed resources, particularly:
<script src="lib/ionic-service-core/ionic-core.js"></script>
<script src="lib/ionic-service-push/ionic-push.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
I have run ionic config build, ionic prepare ios, ionic build ios, ionic config set dev_push true repeatedly with no luck.
What am I missing?

Related

How to save file with Capacitor on iOS?

I have the following code (adapted from this tutorial) that I use for saving files from backend:
import { FilesystemDirectory, Plugins } from '#capacitor/core';
const { Filesystem } = Plugins;
await Filesystem.writeFile({
path: "filename.txt",
data: "base64 data",
directory: FilesystemDirectory.Documents,
});
This codes works fine on Android, even creates the Documents directory in the root of internal storage. Unfortunately, on iOS no file is created, no mater what directory I use (I've tested it with Documents, Data and ExternalStorage).
When I put this code block inside try..catch, nothing is thrown, so the operation is supposedly completed successfully, just no file is saved. Tested on one Android device and two iOS.
iOS doesn't allow accessing file storage directly. I made it work with Ionic-native's FileOpener like this:
import { FileOpener } from '#ionic-native/file-opener/ngx';
import { FilesystemDirectory, Plugins } from '#capacitor/core';
const { Filesystem } = Plugins;
const result = await Filesystem.writeFile({
path: "filename.txt",
data: "base64 data",
directory: FilesystemDirectory.Documents,
});
this.fileOpener.showOpenWithDialog(result.uri, 'application/json')
It opens a dialog where you can select where to save your file. It's a bit confusing as the function's description is "Opens with system modal to open file with an already installed app" but saving works with it as well.
You need to also install cordova-plugin-file-opener2 and put ionic FileOpener to providers in app.module.ts. If you are not using Cordova otherwise, you don't need to do Cordova setups, it works alongside Capacitor as a separate plugin. As far as I'm aware, Capacitor doesn't provide a solution for downloading in iOS.
I've encountered the same problem (while having capacitor 4.2.0 only) and solved it by adding the following permissions in my Info.plist:
<key>UIFileSharingEnabled</key>
<string>YES</string>
<key>LSSupportsOpeningDocumentsInPlace</key>
<string>YES</string>
After this, using directory Directory.Documents has made me visible a Documents directory with the name of the app under the Files App.
Hope it helps.

Cordova 9 ios 5.1.1 - video playback from storage

I am trying for 3 days to get a video playback for cordova-ios 5.1.1 on Cordova 9 to work.
What is this app supposed do in short?
A video gets download to the device storage and should be playable from that device as an offline video player.
There were several problems I had to sort out first:
Stuck at Cordova 9 due to 'cordova-plugin-file-transfer' which is not yet compatible with Cordova 10 --> https://github.com/apache/cordova-plugin-file-transfer/issues/258
Unable to go with Cordova 10 yet, because suggested ways to download huge files on Cordova 10 gets the memory exhausted on the device, as the data is loaded to memory completly first
using cdvfile:// schema to open a local video for gives me a timeout, the video does not start
using a local server plugin did not work for me either
I really tried a lot of configurations and code to get this to work and spent a lot of time at git trying to figure out what I might be missing.
These are the plugins I tried for a working concept of an offline video player:
https://github.com/apache/cordova-plugin-wkwebview-engine
https://github.com/oracle/cordova-plugin-wkwebview-file-xhr
https://github.com/TheMattRay/cordova-plugin-wkwebviewxhrfix
https://github.com/floatinghotpot/cordova-httpd
https://github.com/communico/cordova-httpd
https://github.com/nchutchind/cordova-plugin-streaming-media
This is my content security policy:
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline'
'unsafe-eval' cdvfile: data: gap: content: blob:">
The documentation on this on the web is a bit confusing mixing old stuff that apperently does not work anymore.
Please keep in mind I am not asking you for working code, but a concept that does still works and you did successfully use to play huge video files from the device storage using an HTML5-video tag on Cordova 9 with platform ios 5.1.1.
...but some helping codelines are still appreciated of course :-)
Thank you for telling me what does definately work and what's not anymore.
I was able to solve the issue. Here is a solution that worked for me for all people that might have trouble with this.
Basically I had a configuration error and some filename/filepath issues with this.
I can confirm the upper concept works with this platform and plugins:
Cordova 9 # ios 5.1.1
cordova-plugin-file-transfer 1.7.1 "File Transfer"
cordova-plugin-streaming-media 2.3.0 "StreamingMedia"
cordova-plugin-wkwebview-engine 1.2.1 "Cordova WKWebView Engine"
cordova-plugin-wkwebview-file-xhr 2.1.4 "Cordova WKWebView File XHR Plugin"
Don’t forget to add all settings to your config.xml according to the wkwebview plugin.
Make sure to set the download path like this (the documentation suggests using cdvfile://)
fileTransfer.download(encodeURI(url), cordova.file.dataDirectory + '/' + filename,...
Video playback goes like this:
window.plugins.streamingMedia.playVideo(cordova.file.dataDirectory + "/" + filename, options)
The content security policy looks like this:
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">

Ionic Geolocation Permission issue on iOS

I have a problem with the GeoLocation Plugin at ionic3.
I added all the import stuff. The <edit-config> part too. I can see this in my plist file:
<key>NSLocationWhenInUseUsageDescription</key>
<string>Get Position</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>Get position</string>
So I think it works. But it doesn't; it works for Android but not for iOS.
I call this method:
this.geolocation.getCurrentPosition().then((resp) => {
alert("geo " + resp.coords.latitude);
// resp.coords.latitude
// resp.coords.longitude
}).catch((error) => {
alert(error.code);
alert(error.message);
});
I got the Error.code 2 and the Error.message: "Origin does not have permission to use Geolocation service".
What should I do?
I had this exact problem -- I had to manually add this privacy setting in the *.plist file in XCode itself (found in resources/).
Under Key you type Privacy - Location When In Use Usage Description, or at least start typing it, and it will autocomplete. Type should be String and Value should be the message you want to popup to the user explaining why you need access to location data.
I had the same problem. I used Ionic v4 with React, Cordova v9, cordova-ios v4.5.5. The problem in my case happened because I didn't inject the Cordova JS script to the webview. To fix it, I added the following Bash script to Cordova's before prepare hooks ((cordova root)/hooks/before_prepare/inject_cordova.js):
#!/bin/bash
set -e
sed -E -i "" -e "s_(<head[^>]*>)_\1<script src=\"cordova.js\"></script>_" www/index.html
Where www/index.html is the path to your application main HTML file relative to the cordova project root.
The last line adds a <script src="cordova.js"></script> tag to the end of the HTML file when you run cordova prepare ios. As a result, the webview starts loading the Cordova scripts including the geolocation plugin and the application starts asking a permission to use the geolocation.

Integrating Ruby on Rails 4 app with Phonegap to build a native iOS app

I have created a ruby on rails responsive web application, I wanted to try and use this code to develop a native iOS app and possibly an android app using Phonegap. I followed this tutorial https://www.youtube.com/watch?v=LjIKElAP6_A in an attempt to use my app on my iPhone. When I follow the tutorial and run the app on my iPhone I just get a blank screen.
I used the following commands to set up my phone gap app:
phonegap create myappios com.testrails.myappios Myiosapp
phonegap platform add ios
cordova plugin add org.apache.cordova.console
cordova plugin add cordova-plugin-device
I then used the following code in my index.html file within the phone gap app:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
window.location.href = " http://localhost:3000/"
}
function onDeviceReady
{
//do your thing
}
</script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
</head>
<body onload="onBodyLoad()">
</body>
</html>
Followed by the command: phonegap build iOS.
I just get a blank screen when the app is opened on my phone. I think the tutorial I followed is outdated, or maybe I have done something wrong. Can anybody see any blatant errors above?
I have also looked into using Sencha and appcelerator but I'm not really sure what my best option here is.
I watched the video as well. I believe you need to execute phonegap build ios (all lowercase ios) and then your build will render content, vs a blank screen.

Ionic app crashes in iPhone 5 but not on the emulator

I'm testing my app with iPhone5 and suddenly with my new build , facebook login stopped working. (I'm using $cordovaOauth.facebook). It works in the iOS emulator by connecting to the same public web API.
My question is, how do you normally check the error logs when it crashes on the actual phone?
I'm using ubertesters to create my .ipa file. They have an SDK as well, but I couldn't get it running in my Ionic app. it gives the following error
Uncaught ReferenceError: cordova is not defined
I have setup the script as they say in the article.
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/ubertesters.js"></script>
I would appreciate if someone can tell me how to debug a situation like this (it works in the iOS emulator).
Please try to add type="text/javascript" to each line of your script. See the example below:
<script type="text/javascript" src="js/ubertesters.js"></script>
This should solve the issue with Ubertesters SDK integration.

Resources