I'm using JS classes in Cordova application like:
`
class CustomerController {
constructor() {
this.cs = new CustomerServices();
this.customerModelObj = new CustomerModel();
}
}
Then, I called the customerController.js as <script src="customerController.js"></script> in myindex.html`. Then I instantiated the class
`try{
var customerObj = new CustomerController()
}catch(error){
alert(error);
}`
I'm getting an error which is CustomerController is undefined when I build and run the android app.
What I have tried also, I used the crosswalk plugin to replace the original webview as I read it's by chromium and supporting new JS features with no luck.
I have upgraded Cordova to the latest version, created a new project, migrated my project files to the new project and installed ionic-webview plugin. Worked like a charm!
You might face some UI issues and need to put some efforts on it.
Related
The following service will show an error. missing using reference
services.AddJsEngineSwitcher(options => options.DefaultEngineName = ChakraCoreJsEngine.EngineName)
.AddChakraCore();
Install the following NuGet Packages
JavaScriptEngineSwitcher.ChakraCore
JavaScriptEngineSwitcher.Extensions.MsDependencyInjection
JavaScriptEngineSwitcher.Core
Then attach the following in starup.cs
using JavaScriptEngineSwitcher.ChakraCore;
using JavaScriptEngineSwitcher.Core;
using JavaScriptEngineSwitcher.Extensions.MsDependencyInjection;
When using the following code:
mainWindow.loadURL(`http://www.google.com/`);
I am not able to make a custom titlebar with css/html as i am not using an index.html as i would be able to if i was using this code:
loaderWindow.loadURL(`file:///${__dirname}/loader.html`);
Ive tried custom npm packages like electron-titlebar-windows & custom-electron-titlebar. Nothing seems to work when im displaying an external page from loadURL.
Here is my current implementation of custom-electron-titlebar, in the renderer process:
let MyTitleBar = new customTitlebar.Titlebar({
backgroundColor: customTitlebar.Color.fromHex('#03a9f4')
});
MyTitleBar.updateTitle('Test Title');
You should be able to use setTitle Documentation
mainWindow.webContents.on('did-finish-load', () => {
mainWindow.setTitle('Test Title');
});
I'm trying to make use of the tracking.js library in my vueJS application.
I've installed the package like so.
npm install --save tracking
I'm then defining the library in my main.js file
import tracking from 'tracking'
Object.defineProperty(Vue.prototype, '$tracking', { value: tracking });
Then in my component i'm trying to use the library like so
mounted() {
var tracker = new this.$tracking.ObjectTracker('webcam');
}
I feel I am calling the library wrong but the error message is
TypeError: this.$tracking.ObjectTracker is not a constructor
The problem is in the import statement, it seems that trackingjs does not support ES6 import. You have to have it in a sort of global scope
Object.defineProperty(Vue.prototype, '$tracking', { value: tracking });
new Vue({
created: function() {
var tracker = new this.$tracking.Tracker()
console.log(tracker)
}
})
Here JSFiddle example work as expected. Notice it's added only like a dependecy. i.e <script src="path/to/trackingjs">
I can't find out in the docs which is the best way to know, in an Ionic 2 app, if it's runnning in the browser (with the ionic serve command) or in the device/emulator.
Actually what I'm doing is check if the window object has an 'plugins' attribute, but I don't know if there is the best way.
if(!window['plugins']) {
//browser
}
Oh, I found in the docs the Platform object, which has some methods.
http://ionicframework.com/docs/v2/api/platform/Platform/
One is the is(key), that can match
import { Platform } from 'ionic-angular';
#Component({...})
export MyPage {
constructor(platform: Platform) {
this.platform = platform;
...
if(this.platform.is('core')) {
//it's in the browser
}
}
}
while the question is a bit old but still valid - one more option is to use
https://ionicframework.com/docs/native/device/ - the Device object provides platform property which is equal to 'browser' on browser. The plugin is available only when running webapp via cordova.
Just to add a little more to the solution given above, the following does seem to work ok:
import { Platform } from 'ionic-angular';
#IonicPage()
#Component({})
export class WhichPlatformPage {
isApp: boolean;
constructor(private platform: Platform) {
this.isApp = this.platform.is('core') || this.platform.is('mobileweb') ? false : true;
}
}
ionViewDidLoad() {
console.log(this.isApp ? 'Running from mobile' : 'Running from the browser');
}
This seems to work fine for me - the main difference from the previous answer is that we are also checking for the 'mobileweb' platform.
Interestingly, if you are using the ionic cordova build browser command, 'mobileweb' becomes 'mobile' - breaking this solution - as this is trying to emulate being on a device as much as possible. This was raised as an issue on GitHub here:
https://github.com/ionic-team/ionic/issues/11557
A solution was given as setting isApp with the following:
this.isApp = !document.URL.startsWith('http');
This works because the mobile apps start their pages with the 'file' protocol. However, if you read into the issue, Ionic are actually recommending against using the cordova browser platform currently, so you would be better off with the original solution.
Thought I'd update with an answer that works in case anyone arrives at this question.
This works as of the latest iOS and Android builds:
public isApp(): boolean {
return (
document.URL.indexOf('http://localhost') === 0 || // Android
document.URL.indexOf('ionic') === 0 || // iOS 11+ Ionic Web View
document.URL.indexOf('https://localhost') === 0 // iOS 10 Ionic Web View
);
}
See Ionic Webview readme for more info and caveats.
I found this solution resolved in Ionic forum which is using
this.isApp = (!document.URL.startsWith('http') || document.URL.startsWith('http://localhost:8080'));
it may have changes in the future releases though as ios/androd new release change comes
details discussed https://forum.ionicframework.com/t/how-to-determine-if-browser-or-app/89149/15
To give some background on my current project - I am working on a phonebook application for employees where there will be a button to create a new contact on the user's device. I am using the following plugin to handle this in my Ionic application:
http://cordova.apache.org/docs/en/latest/reference/cordova-plugin-contacts/
When attempting to access the plugin the way that the documentation states:
navigator.contacts
I had also tried to access via
window.navigator.contacts
It returns an undefined error. In the documentation it states that this will only be accessible after the deviceready event is fired - so my code was the following:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("Testing Navigation Contacts");
console.log(navigator.contacts);
}
I also tried to utilize the $ionicPlatform.ready functionality as done below:
$ionicPlatform.ready(function() {
var myContact = window.navigator.contacts.create({"displayName": "Test User"});
myContact.save();
});
The exact error message is listed below:
Error: undefined is not an object (evaluating 'navigator.contacts.create')
Any help would be much appreciated, guys. I'm at a loss of what else to try. Thanks for reading!
Mike
I have tried out the plugin and it works as expected. Have tested the same in device running on Android Marshamallow.
Have come up with a sample cordova app that uses this contact plugin to add a contact to the device. You can check out the sample in my github page
Since you are facing difficulties with plugins, i have added the plugin folder as well in the sample. You can copy the project, add android platform, build and test the same. Hope it helps
I had the same problem using this plugin. I think this is a version issue but the documentation has not been updated.
This is how I proceeded:
first import Contacts in your app.module.ts file
import { Contacts } from '#ionic-native/contacts';
...
...
providers: [
...
Contacts,
...
]
then import classes you want to use in your file
import { Contacts, Contact , ContactField, ContactName } from '#ionic-native/contacts';
...
constructor(private contacts: Contacts) {}
Now you can use you object
createContact(name, number){
let contact: Contact = this.contacts.create();
contact.name = new ContactName(null, '', name);
contact.phoneNumbers = [new ContactField('mobile', number,true),new ContactField('home', number+1,true)];
contact.save().then(
() => alert('Contact saved!'+ JSON.stringify(contact)),
(error: any) => alert('Error saving contact.'+error)
);
}
Here I create a contact with 2 phone numbers. Of course you can use the other functions find () and pickContact ().