How can an app be restarted in Nativescript? - nativescript

Can I force restart of an app in NS?
That is - close and restart.
Thanks
Can I force restart of an app in NS?
That is - close and restart.
Thanks

Here's the code I'm using to restart the app:
import { android as and } from "#nativescript/core/application";
if (isAndroid) {
const activity: androidx.appcompat.app.AppCompatActivity = and.foregroundActivity;
const intent: android.content.Intent = activity.getIntent();
activity.finish();
and.context.startActivity(intent);
} else if (isIOS) {
exit(0);
}
Android app is restarted but the iOS app only closes and needs to be started manually. I still haven't figured out how to properly restart it.

Related

Authentication problem with running ionic app using firebase on native device, everything works fine with live reload

Good morning!
I have a strange problem where i can run & authenticate my user on my ios device perfectly fine running the app using the command below.
ionic capacitor run -l --external
Using an emulator, it works sometimes, though not always.
When I try to deploy the app using Xcode, the app opens and looks normal, but if I try to send authentication requests to firebase, the app just keeps on loading, although the requests are successfully performed.
I first thought the problem was because of using LocalStorage so I rebuilt everything using Ionic Storage. But that didn't help.
I tried different versions of adding the Firebase SDK in Swift or in the Cocoa Pods file but the behaviour doesn't change so I don't believe that this is a issue with a wrong firebase configuration, what is the proper way to do this by the way - or is Ionic doing this for me already?
The output of Xcode doesn't provide any valuable information either.
2021-12-01 11:20:13.990875+0100 App[3162:27661] Writing analzed variants.
2021-12-01 11:20:14.125754+0100 App[3162:27661] KeyboardPlugin: resize mode - native
⚡️ Loading app at capacitor://localhost...
2021-12-01 11:20:14.552490+0100 App[3162:27661] Writing analzed variants.
⚡️ WebView loaded
⚡️ [log] - Angular is running in development mode. Call enableProdMode() to enable production mode.
⚡️ [log] - null
⚡️ To Native -> App addListener 60635511
2021-12-01 11:20:21.393141+0100 App[3162:27661] [Accessibility] WKContentView[#] set up: # pid: # MACH_PORT -830404096
login-function
loginWithEmail() {
let email: string = this.loginForm.get("email").value;
let password: string = this.loginForm.get("password").value;
this.loadingService.present({
message: "Logging in . . ."
});
this.authService
.loginWithEmail(email, password)
.then((result) => {
this.authService.SetUserData(result.user)
this.resetLoginForm();
this.loginSuccess();
this.router.navigateByUrl("/tabs/intensity");
})
.catch(error => {
console.log(error);
this.loginFailed(error);
});
}
login-success
loginSuccess() {
this.loadingService.dismiss();
this.toastService.present({
message: "Welcome back!",
duration: 3000,
color: "secondary"
});
}
login-with-email
import { AngularFireAuth } from "#angular/fire/compat/auth";
...
async loginWithEmail(email: string, password: string) {
return await this.afAuth.signInWithEmailAndPassword(email, password);
}
set user-data function
SetUserData(user) {
this.user = user;
const userRef: AngularFirestoreDocument<any> = this.afs.doc(`users/${user.uid}`);
const userData: User = {
uid: user.uid,
email: user.email,
displayName: user.displayName,
photoURL: user.photoURL,
emailVerified: user.emailVerified
}
return userRef.set(userData, {
merge: true
})
}
Running it multiple times some times I get this error.
API error: <_UIKBCompatInputView: 0x7fb965726040; frame = (0 0; 0 0); layer = <CALayer: 0x600002f718a0>> returned 0 width, assuming UIViewNoIntrinsicMetric
I am really stuck on this and would appreciate any help. Thank you & kind regards.
Ionic 6.18.1
Angular 12.1.5
Xcode Version 13.1 (13A1030d)

Firebase messaging issue when app is in foreground on Ionic 5 app

I am following the firebase docs for implementation of Cloud Messgaing.
Receiving and handling messages while my ionic app is in the background works fine but when handling same in foreground I am running into issues.
This is the code:
PushNotifications.addListener('pushNotificationReceived',
(notification : PushNotificationSchema) => {
alert("Push received while app open: " + JSON.stringify(notification));
const title = notification.notification.title;
const body = notification.notification.body;
const page = notification.notification.data.department;
alert ("Notification: department = " + page + " Title : " + title);
//console.log("NOTIFICATION REC IN APP FOREGROUND: " + title + " AND BODY : " + body);
if (page){
this.router.navigate(['/'+page]);
}
},
);
The first alert with details of the notification executes every time, but nothing after.
In the Xcode console I see an error but there is no description:
Any idea what the issue might be with my ionic code or how to determine the error thrown in Xcode would be appreciated.
Hope this is helpful for some as I found there are allot of potential answers out there but the only solution I found is as follows:
Add this to the capacitor.config.json of your Ionic project:
"plugins": {
"PushNotifications": {
"presentationOptions": ["badge", "sound", "alert"]
}
}
Then build / synch your ionic app:
ionic build
ionic cap sync
See Capacitor Docs here for more details.

Nativescript throwing Thread 1: EXC_BAD_ACCESS (code=1, address=0x1edf38) in Xcode only

I'm getting an error after upgrading to NS 7 and building in xcode. I can build successfully from the CLI, run the app and everything is fine but when I build in xCode and run on physical device or simulator and try to log in, I get this error.
In the log outputs self = (SAMKeychainQuery*) & password = (NSSTRING *) nil so it's not getting the password value but why would it have access to it when building from the CLI but not Xcode?
I'm running "#nativescript/core": "^7.0.13", "#nativescript/ios": "7.0.6", Xcode 12.
Here is my password textfield:
<TextField
:isEnabled="!processing"
ref="password"
class="input placeholderColor"
hint="Password"
secure="true"
v-model="user.password"
#loaded="passwordTextField"
:returnKeyType="isLoggingIn ? 'done' : 'next'"
fontSize="18"
/>
//login function
async login(user) {
try {
console.log("in login() in authservice")
const loginRequest = await firebase.login({
type: firebase.LoginType.PASSWORD,
passwordOptions: {
email: user.email,
password: user.password,
},
});
const handleLogin = await this.handleLogin(loginRequest);
return handleLogin;
} catch (error) {
return error;
}
}
My login() function isn't even firing when I build from Xcode but again all is well from the CLI.
Completely removing the #nativescript/secure-storage plugin then ns clean and reinstalling secure-storage plugin worked.
Still have no idea why it was working from CLI and not Xcode if the plugin wasn't functioning properly though.

Parse iOS Universal Links with Nativescript Angular?

Following the apple documentation and Branch's documentation here, I have set up a working universal link in my Nativescript Angular (iOS) app. But, how do I parse the link when the app opens?
For example, when someone opens the app from the link, I want to have my app read the link so it can go to the correct page of the app.
There is some helpful code in this answer, but I keep getting errors with it. This could be bc the code is written in vanilla JS and I am not translating it into Angular correctly. The use of "_extends" and "routeUrL" both cause errors for me.
And the Nativescript url-handler plugin does not seem to work without further code.
So, after setting up the universal link, and installing the nativescript url-handler plugin, I have entered the following in app.module.ts:
const Application = require("tns-core-modules/application");
import { handleOpenURL, AppURL } from 'nativescript-urlhandler';
declare var NSUserActivityTypeBrowsingWeb
if (Application.ios) {
const MyDelegate = (function (_super) {
_extends(MyDelegate, _super);
function MyDelegate() {
_super.apply(this, arguments);
}
MyDelegate.prototype.applicationContinueUserActivityRestorationHandler = function (application, userActivity) {
if (userActivity.activityType === NSUserActivityTypeBrowsingWeb) {
this.routeUrl(userActivity.webpageURL);
}
return true;
};
MyDelegate.ObjCProtocols = [UIApplicationDelegate];
return MyDelegate;
})(UIResponder);
Application.ios.delegate = MyDelegate;
}
...
export class AppModule {
ngOnInit(){
handleOpenURL((appURL: AppURL) => {
console.log('Got the following appURL = ' + appURL);
});
}
}
The trouble seems to be mostly with "_extends" and "_super.apply". For example, I get this error:
'NativeScript encountered a fatal error: TypeError: undefined is not an object (evaluating '_extends')
EDIT: Note that the nativescript-urlhandler plugin is no longer being updated. Does anyone know how to parse universal links with Nativescript?
I have figured out a method to get this working:
The general idea is to use the iOS App Delegate method: applicationContinueUserActivityRestorationHandler.
The syntax in the Nativescript documentation on app delegates did not work for me. You can view that documentation here.
This appears to work:
--once you have a universal link set up, following documentation like here, and now you want your app to read ("handle") the details of the link that was tapped to open the app:
EDIT: This code sample puts everything in one spot in app.module.ts. However, most of the time its better to move things out of app.module and into separate services. There is sample code for doing that in the discussion here. So the below has working code, but keep in mind it is better to put this code in a separate service.
app.module.ts
declare var UIResponder, UIApplicationDelegate
if (app.ios) {
app.ios.delegate = UIResponder.extend({
applicationContinueUserActivityRestorationHandler: function(application, userActivity) {
if (userActivity.activityType === NSUserActivityTypeBrowsingWeb) {
let tappedUniversalLink = userActivity.webpageURL
console.log('the universal link url was = ' + tappedUniversalLink)
}
return true;
}
},
{
name: "CustomAppDelegate",
protocols: [UIApplicationDelegate]
});
}
NOTE: to get the NSUserActivity/Application Delegate stuff to work with typescript, I also needed to download the tns-platforms-declarations plugin, and configure the app. So:
$ npm i tns-platforms-declarations
and
references.d.ts
/// <reference path="./node_modules/tns-platform-declarations/ios.d.ts" />
The above code works for me to be able to read the details of the tapped universal link when the link opens the app.
From there, you can determine what you want to do with that information. For example, if you want to navigate to a specific page of your app depending on the details of the universal link, then I have found this to work:
app.module.ts
import { ios, resumeEvent, on as applicationOn, run as applicationRun, ApplicationEventData } from "tns-core-modules/application";
import { Router } from "#angular/router";
let univeralLinkUrl = ''
let hasLinkBeenTapped = false
if (app.ios) {
//code from above, to get value of the universal link
applicationContinueUserActivityRestorationHandler: function(application, userActivity) {
if (userActivity.activityType === NSUserActivityTypeBrowsingWeb) {
hasLinkBeenTapped = true
universalLinkUrl = userActivity.webpageURL
}
return true;
},
{
name: "CustomAppDelegate",
protocols: [UIApplicationDelegate]
});
}
#ngModule({...})
export class AppModule {
constructor(private router: Router) {
applicationOn(resumeEvent, (args) => {
if (hasLinkBeenTapped === true){
hasLinkBeenTapped = false //set back to false bc if you don't app will save setting of true, and always assume from here out that the universal link has been tapped whenever the app opens
let pageToOpen = //parse universalLinkUrl to get the details of the page you want to go to
this.router.navigate(["pageToOpen"])
} else {
universalLinkUrl = '' //set back to blank
console.log('app is resuming, but universal Link has not been tapped')
}
})
}
}
You can use the nativescript-plugin-universal-links plugin to do just that.
It has support for dealing with an existing app delegate so if you do have another plugin that implements an app delegate, both of them will work.
Here's the usage example from the docs:
import { Component, OnInit } from "#angular/core";
import { registerUniversalLinkCallback } from "nativescript-plugin-universal-links";
#Component({
selector: "my-app",
template: "<page-router-outlet></page-router-outlet>"
})
export class AppComponent {
constructor() {}
ngOnInit() {
registerUniversalLinkCallback(ul => {
// use the router to navigate to the screen
});
}
}
And the callback will receive a ul (universal link) param that looks like this
{
"href": "https://www.example.com/blog?title=welcome",
"origin": "https://www.example.com",
"pathname": "/blog",
"query": {
"title": "welcome"
}
}
Disclaimer: I'm the author of the plugin.

How to debug an import binding name that is not found

I have a NativeScript application that I'm trying to add iBeacon support to using the iBeacon plugin. The application builds successfully and is synced to my phone (I'm using SideKick). When the app runs, it has a fatal javascript exception. The javascript error is reported at:
file:///app/tns_modules/tns-core-modules/ui/builder/builder.js:244:56: JS ERROR Error: Building UI from XML. #file:///app/app-root.xml:18:9
That line is where the page that attempts to access the iBeacon code is defined:
<Frame defaultPage="views/search/search-page"></Frame>
and the specific error is:
Importing binding name 'BeaconLocationOptions' is not found.
I'm assuming this occurs as part of the following import statement:
import {NativescriptIbeacon, BeaconCallback, BeaconLocationOptions, BeaconLocationOptionsIOSAuthType, BeaconLocationOptionsAndroidAuthType, BeaconRegion, Beacon } from 'nativescript-ibeacon';
The above import statement is what is documented as part of the iBeacon documentation.
There is a nativescript-ibeacon directory under node_modules in my project. The specific ios file seems to be there:
/Users/edscott/NativeScript/beacon-test/node_modules/nativescript-ibeacon/nativescript-ibeacon.ios.js
I'm not sure if it is a problem in my code or a problem with configuration - maybe something missing that stops the ibeacon files from being deployed properly to the device.
My code is in javascript, but I have installed the typescript plugin. It looks like this iBeacon plugin assumes the app is written in typescript.
I'm looking for help in determining what to try next.
FYI...I've tried pulling the source files out of the node_modules and incorporating them directly into my project. After resolving many issues with this approach, I eventually hit the same wall - a problem importing the code when running on the device.
Below is the code that is using the iBeacon plugin:
const observableModule = require("tns-core-modules/data/observable");
import {NativescriptIbeacon, BeaconCallback, BeaconLocationOptions, BeaconLocationOptionsIOSAuthType, BeaconLocationOptionsAndroidAuthType, BeaconRegion, Beacon } from 'nativescript-ibeacon';
function SearchViewModel() {
let callback = {
onBeaconManagerReady() {
// start ranging and/or monitoring only when the beacon manager is ready
this.nativescriptIbeacon.startRanging(this.region);
this.nativescriptIbeacon.startMonitoring(this.region);
},
didRangeBeaconsInRegion: function(region, beacons) {
console.log("didRangeBeaconsInRegion");
},
didFailRangingBeaconsInRegion: function(region, errorCode, errorDescription) {
console.log("didFailRangingBeaconsInRegion");
}
};
let options = {
iOSAuthorisationType: BeaconLocationOptionsIOSAuthType.Always,
androidAuthorisationType: BeaconLocationOptionsAndroidAuthType.Coarse,
androidAuthorisationDescription: "Location permission needed"
};
let nativescriptIbeacon = new NativescriptIbeacon(callback, options);
let region = new BeaconRegion("HelloID", "2f234454-cf6d-4a0f-adf2-f4911ba9ffa6");
const viewModel = observableModule.fromObject({
"beaconData": "not set yet",
"onTapStart": function() {
this.set("beaconData", "started");
console.log("tapped start");
if (!nativescriptIbeacon.isAuthorised()) {
console.log("NOT Authorised");
nativescriptIbeacon.requestAuthorization()
.then(() => {
console.log("Authorised by the user");
nativescriptIbeacon.bind();
}, (e) => {
console.log("Authorisation denied by the user");
})
} else {
console.log("Already authorised");
nativescriptIbeacon.bind();
}
},
"onTapStop": function() {
this.set("beaconData", "stopped");
console.log("tapped stop");
nativescriptIbeacon.stopRanging(region);
nativescriptIbeacon.stopMonitoring(region);
nativescriptIbeacon.unbind();
}
});
return viewModel;
}
module.exports = SearchViewModel;
I have created a playground for you here.
If you look into example, I am importing NativescriptIbeacon from the main folder and rest from the common folder.
P.S. This plugin has dependency on nativescript-permission
import { NativescriptIbeacon } from '../nativescript-ibeacon';
import {
BeaconRegion, Beacon, BeaconCallback,
BeaconLocationOptions, BeaconLocationOptionsIOSAuthType, BeaconLocationOptionsAndroidAuthType
} from "../nativescript-ibeacon/nativescript-ibeacon.common";
This answer solved my problem along with another modification. After splitting the import up I still had the same error. Then I read the following page about modules:
https://docs.nativescript.org/core-concepts/android-runtime/getting-started/modules
Based on this statement:
If the module identifier passed to require(moduleName) does not begin
with '/', '../', or './', then NativeScript will lookup the module
within the tns_modules folder
I assumed that maybe only require does the proper lookup into tns_modules.
I refactored the import to use require instead, and that worked. My changes are below. There may be a more efficient way to do this, but it worked for me.
const nsb = require("nativescript-ibeacon/nativescript-ibeacon.js");
const nsbc = require("nativescript-ibeacon/nativescript-ibeacon.common.js");
const NativescriptIbeacon = nsb.NativescriptIbeacon;
const BeaconCallback = nsbc.BeaconCallback;
const BeaconLocationOptions = nsbc.BeaconLocationOptions;
const BeaconLocationOptionsIOSAuthType = nsbc.BeaconLocationOptionsIOSAuthType;
const BeaconLocationOptionsAndroidAuthType = nsbc.BeaconLocationOptionsAndroidAuthType
const BeaconRegion = nsbc.BeaconRegion;
const Beacon = nsbc.Beacon;

Resources