I created a simple app using Meteor 1.3, which has only one method. It works like that: When a button is clicked, the method is invoked - it calculates a specific value and returns the result.
The app works perfectly on the localhost server, but when I launch it on my device with "meteor run android-device", it cannot access the method (simply opens the app, but nothing happens when I press a button.
Do you know how I could resolve this?
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import { ReactiveDict } from 'meteor/reactive-dict';
import './main.html';
Template.check.onCreated(function checkOnCreated() {
this.state = new ReactiveDict();
});
Template.check.events({
'click .checkit'(event, instance) {
Meteor.call('code.check', function(error, result){
if(error){
console.log('Error from the client side!');
} else {
instance.state.set('fett', result.titles[0]);
}
});
},
});
Template.check.helpers({
fett() {
const instance = Template.instance();
if (instance.state.get('fett')) {
return instance.state.get('fett');
} else {
return 'Value still not known...'
}
},
});
Ensure your smartphone's WiFi is turned on and it connected to the same WiFi network as you computer where meteor app is running. Then everything should work fine.
Also, I recommend to use chrome://inspect feature (more info here) in order to debug your app on Android. Then, you will be able quickly investigate any problems with mobile app.
Related
I have a React app that attempts to prevent a screen from sleeping when a component loads or on press of a button. For some reason it doesn't work in Samsung Internet. I does work in Chrome on Mac and in Chrome on Samsung phone. I can't find anything to suggest that this is a common problem. It looks like it is a supported feature. I do see the code being executed in logs, but the phone goes to sleep anyway. Is there anything that maybe should be enabled on the phone or in Samsung Internet settings of some sort?
Here is my implementation
async requestLock() {
Debugger.log('requesting wakeLock')
try {
if ('wakeLock' in navigator) {
this.wakeLock = await navigator.wakeLock.request('screen');
Debugger.log('wakeLock requested')
}
} catch (e) {
Debugger.log('wakeLock error');
}
}
async releaseLock() {
if (this.wakeLock) {
Debugger.log('releasing wakeLock')
await this.wakeLock.release();
Debugger.log('wakeLock released')
this.wakeLock = null;
}
}
I want to perform some actions when my app goes to the background—e.g., when pressing the home button. (I am testing on an Android device.)
I tried the following in my app.component.ts:
this.platform.ready().then(() => {
this.platform.pause.subscribe(async () => {
alert("Pause event detected");
//Do stuff here
});
this.platform.resume.subscribe(async () => {
alert("Resume event detected");
//Do stuff here
});
…
I also tried:
App.getState().then((result) => {
alert("state active?" + result.isActive);
});
No listener is triggered when the app goes to background (e.g., by pressing the home button). But when I start the app again, all events are triggered (in this case, the alerts), including the platform.pause event.
I am using Ionic 9 and Capacitor.
Am I misunderstanding something? What could be the problem?
You can use the event listeners provided in Capacitor's App API.
// Import the relevant stuff from Capacitor
import { Plugins, AppState } from '#capacitor/core';
const { App } = Plugins;
Then in your AppComponent class
this.platform.ready().then(() => {
App.addListener('appStateChange', (state: AppState) => {
if (state.isActive) {
console.log('App has become active');
} else {
console.log('App has become inactive');
}
});
})
Note that you can test this in a desktop browser as well by switching to another tab.
Ok... things work. The problem was, that I had both variants in code active.
I once wrote a quick ‘offline.html‘. Just be be sure I understood how offline PWA worked:
This is offline.html (My App Name)
I thought it worked as expected. So I deleted it and wrote a better one, with a back button, some info etc.
Now when this app is offline it starts on the page the manifest.json days, as expected.
However, if I try to refresh the page that spooky "offline.html" shows up. From nowhere.
I've tried to understand where it lurks, but I can't find it. (The new "offline.htmi" is there when I go to it in the web browser.)
I've tried Firefox offline on my mobile to see if the spoky "offline.html" jumps up there to. It does. 😐
I've cleared the cache in Chrome. The spoky "offline.html" is still there.
Any ideas?
(This is on Android 9)
Offline pages are not exactly stored in caches as regular cached items, there are stored quite differently, relative to the current installed service worker. I tried looking for an article to explain this more but can't walk around any currently.
However you'll have to unregister your service worker or learn how Updating service worker works,
The aim is to remove the lurking offline.html served to the new offline.html that exists.
This is what I finally landed on. It seems to work. The test for 404 is of course not optimal, but I leave it that way for now, hoping that the emerging standard will address this issue soon.
async function setupServiceWorker() {
let reg;
if (navigator.serviceWorker.controller) {
console.log("Active service worker found, no need to register");
// new Popup("registered service worker, .active.scriptURL", reg.active.scriptURL, null, true).show();
reg = await navigator.serviceWorker.getRegistration();
} else {
reg = await navigator.serviceWorker.register("service-worker.js", { scope: "./" });
console.log("Service-worker.js registered, scope: " + reg.scope);
}
try {
if (navigator.onLine) {
const newReg = await reg.update();
}
} catch (err) {
const is404 = err.message.match("404");
new Popup("err", is404 + " " + err.message).show();
if (is404) {
let wasUnregistered;
try {
wasUnregistered = await reg.unregister();
} catch (errUnreg) {
new Popup("unregister() service worker failed", errUnreg.message).show();
}
if (wasUnregistered) {
setTimeout(setupServiceWorker, 1000);
}
}
}
}
setTimeout(setupServiceWorker, 5000);
I have a button when pressing it performs the request for some data. So, in my ts file of the page where the button is, I call the function in my provider.
The main problem comes when I compile my application for android platform (Generate apk with ionic cordova build --release android, then I Sign the apk, align and install it). In that case, when I press the button nothing happens, I debugged the code (I added some alerts), but only the first line of the function (The alert that I added) is executed, never returns anything.
But.. If I run the app with the commands: ionic cordova run android -l and ionic serve -l. It works like a charm (The provider return the data requested)
I mean, the problem is only when I generate the APK to install it into my device
I also tried with HttpClient but the problem persists.
The code of my Provider is:
Search(path): Promise<any> {
// ------------- The alert is shown
return this.http.get(path)
.map(res => res.json())
.toPromise()
.then(
response => {
// ------------- The alert is not shown
if (typeof response.user.name !== "undefined") {
this.storage.set('users', JSON.stringify(response));
return response;
} else {
return null;
}
},
error => {
// ------------- The alert is not shown
return null;
});
}
I also tried with something like this:
Search(path): Promise<any> {
// ------------- The alert is shown
return null;
}
But, also in this case the return line is never executed, only the alert is shown.
The code when I call my provider function in the page where the button is:
this.APIService.Search(final_path).then(res => {
if (res) {
this.storage.get('users').then(responseJson => {
if (responseJson) {
this.navCtrl.push(ObtenerPage);
}
});
} else {
this.presentToast("Bad request");
}
});
i am using ion-google-place directive in my ionic project and when i run it in the ripple I can see that this directive works as expected, however when i deploy it on my Android phone the search bar comes up but when i type no drop down is shown.
I tried to debug the code and can see the issue to be around the following code:
var geocoder = new google.maps.Geocoder();
geocoder.geocode(req, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
scope.$apply(function () {
scope.locations = results;
});
} else {
// #TODO: Figure out what to do when the geocoding fails
console.log("error getting google place...");
}
});
the callback function is never called when running within the android phone, however from ripple its working.
Any ideas as to what I may be missing ?
EDIT 1:
I created a Blank Cordova project and added the refrences to angular and google map. Then added a button and added a ng-onclick to that button as below
$scope.onButtonClick = function () {
var api = new google.maps.places.AutocompleteService();
api.getPlacePredictions({ input: "Banga" }, function (results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
console.log("google place... success");
} else {
// #TODO: Figure out what to do when the geocoding fails
console.log("error getting google place...");
}
});
Now I see that google is not defined when debugging the Android Phone, where as same when being debugged in ripple, it is working.
is there something on the phone that can prevent the maps from being available to the app?
Regards
Kiran