I wrote a script to detect if there is a wifi connection or not. However, I noticed, that if the app starts when there is no wifi connection, the splashscreen will load and then i'll get a white screen. The console shows this error:
Failed to load resource: net::ERR_INTERNET_DISCONNECTED
this is my script for detecting the wifi and its placed in the '$ionicPlatform.ready':
$rootScope.$on('$cordovaNetwork:offline', function(event, networkState)
{
connectionerror($ionicPopup)
})
//display error msg and close the app.
function connectionerror($ionicPopup,$scope)
{
var myPopup = $ionicPopup.show({
title: 'Network Error',
content: 'No internet connectivity detected. Please try again.',
buttons: [
{
text: '<b>Retry</b>',
type: 'button-positive',
onTap: function(e)
{
if (!$cordovaNetwork.isOnline())
{
e.preventDefault();
}
else
{
$state.reload();
}
}
}]
});
}
How do I fix it so that after the splashscreen, if there is no wifi, the message would show ?
The error happens when you are trying to load a resource from your pc probably. If you are running ionic serve or ionic serve live and you disconnect the wifi, the app will try to load a template form your pc using wifi and won't be able to do it.
To test that script you should build the app and run it on a device.
If that's working, the controller should be working differently. It should look more like this:
.controller('controller', function($scope, $rootScope, $state, $ionicPopup, $cordovaNetwork){
$rootScope.$on('$cordovaNetwork:offline', function(event, networkState)
{
connectionerror()
})
//display error msg and close the app.
function connectionerror()
{
var myPopup = $ionicPopup.show({
title: 'Network Error',
content: 'No internet connectivity detected. Please try again.',
buttons: [
{
text: '<b>Retry</b>',
type: 'button-positive',
onTap: function(e)
{
if (!$cordovaNetwork.isOnline())
{
e.preventDefault();
}
else
{
//go to a state like index or home instead of reload. Reload resets the application and should be avioded in single page apps
$state.go('...');
}
}
}]
});
}
})
Related
i am trying to debug my code in react native here i have a axios post request the only responce is i get when there is a error is axios error
rather than that i am looking to debug my code just like in react js by inspect element and network tab
currently i open my app using npx react-native run-andoid this opens the app in a emulator and is really diffcult to debug my code can anyone suggest a better method for debugiing
var Data56 = {
name: name,
email: email,
babyname: babyname,
phone: nuber,
baby_date: date,
};
}
axios
.post('http://10.0.2.2:8000/api/register', Data56, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
})
.then(res => {
props.navigation.navigate('Home_scrren', {data: Data56});
})
.catch(error => {
alert(error);
});
}
Follow this Step:-
(1) First you need to shake the device and open the debug option, it will redirect you to chrome.
(2) You need to inspect that and open the console tab.
(3) You need to add breakpoints in VSCode or add breakpoints using chrome.
(4) then simply Reload the application, using that you can do step-by-step debugging.
if (__DEV__) {
global.XMLHttpRequest = global.originalXMLHttpRequest
? global.originalXMLHttpRequest
: global.XMLHttpRequest;
global.FormData = global.originalFormData
? global.originalFormData
: global.FormData;
fetch; // Ensure to get the lazy property
if (window.__FETCH_SUPPORT__) {
// it's RNDebugger only to have
window.__FETCH_SUPPORT__.blob = false;
} else {
/*
* Set __FETCH_SUPPORT__ to false is just work for `fetch`.
* If you're using another way you can just use the native Blob and remove the `else` statement
*/
global.Blob = global.originalBlob ? global.originalBlob : global.Blob;
global.FileReader = global.originalFileReader
? global.originalFileReader
: global.FileReader;
}
}
add this code to root index.js
turn on debug
Check tab network like web,
we can see request and response,
one more option, you can add reactotron or flipper, this tool will log anything like network redux action..., without open debug mode
Hope this help you
1]firstly you can see this video
2]exapmle with axios
3] 2nd go to your console window and press D and see your emulator like this like this
if you press d in console window and see your output in your emulator
like this then then on the last option "Debug"
it will navigate to chrome screen here is screenshot
then write click on a screen and see option like inspect here is
screenshot
then then new screen will appear and go to consol tab there you can
see your data like this
I This this will help you
I'm using axios and fetch data and you can see in chrome i will get all data in debug mood also I'm my step which one I post here
import React, { useEffect, useState } from "react";
import { View, SafeAreaView, Text, StyleSheet, ScrollView, TouchableOpacity, FlatList } from "react-native";
import axios from "axios";
const App = () => {
const [list, setList] = useState([]);
useEffect(() => {
getList()
}, [])
const getList = () => {
axios({
url: "https://fakestoreapi.com/users?limit=5",
}).then((res) => {
var response = res.data;
console.log(response)
setList(response)
})
}
return (
<FlatList
data={list}
renderItem={({ item }) =>
<Text>{item}</Text>
}
/>
)
}
export default App;
I've built a small alert service (wrapper for Angular AlertController) in my Ionic 4 project, it works perfectly when I view the project in "ionic serve" (browser), "ionic cordova emulate" (on my connected phone), "ionic cordova build android" (installing the app-debug APK manually on my phone) however when I build the release version of the app using "ionic cordova build android --prod --release" the "message" part of the Alert does not show. The header (title) and the buttons show and work fine still, but the message does not appear.
Here is my method which creates and presents the alert:
/**
* "Confirm" with callback or "Cancel" alert
*/
async confirmOrCancelAlert(title, message, callback) {
const alert = await this.alertController.create({
header: title,
message: message,
buttons: [
{
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
}, {
text: 'Confirm',
handler: () => {
callback();
}
}
]
});
await alert.present();
}
This is the code which called the method shown above, which is called from a button click:
/**
* Answer questions button event click
*/
answerQuestions() {
if (this.shift.getEarly() && (this.shift.getTimeToStart().asHours() > environment.alertTimes.answerQuestions)) {
var timeTo = this.durationFormatPipe.transform(this.shift.getStart());
var message = 'Your shift starts ' + timeTo + ', are you sure you want to answer questions now?';
this.alertService.confirmOrCancelAlert('You are early!', message, () => {
this.doAnswerQuestions();
});
} else {
this.doAnswerQuestions();
}
}
Here are two images showing the message messing from the release build but showing in the serve / emulate / debug builds:
Many thanks in advance for any and all advice.
I think it's a timing problem. when you call confirmOrCancelAlert() the timeTo is not prepared yet. so the type of message will be undefined.
try this:
answerQuestions() {
if (this.shift.getEarly() && (this.shift.getTimeToStart().asHours() > environment.alertTimes.answerQuestions)) {
var timeTo = this.durationFormatPipe.transform(this.shift.getStart());
var message = 'Your shift starts ' + timeTo + ', are you sure you want to answer questions now?';
setTimeout(() => {
this.alertService.confirmOrCancelAlert('You are early!', message, () => {
this.doAnswerQuestions();
});
}, 50);
} else {
this.doAnswerQuestions();
}
}
try this:
async confirmOrCancelAlert(title, myMessage, callback) {
const alert = await this.alertController.create({
header: title,
message: myMessage,
buttons: [
{
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
}, {
text: 'Confirm',
handler: () => {
callback();
}
}
]
});
await alert.present();
}
change the name to myMessage to make it different than property name. message: message will cause a problem I think I had the same problem last year. check it out and inform me of the results.
I am building an app that is using Google authentication through firebase and that needs to redirect the user from a login.vue component to an /hello path upon successful authentication.
I have first tried doing it the normal vue way:
this.$router.replace('/hello')
only to realise my Samsung Galaxy J5 wasn't having it...
All is working on other devices and browsers (so far) using the normal Vue routing tools but on some Android devices Vue is refusing to collaborate. I have read here some Android versions do not like the way the Vue dynamic routing transpiles to vanilla JS so I am attempting the following (still, no success).
This is my code on the created hook of component login.vue when Google auth (with redirection, not pop up) returns to it:
created() {
firebase.auth().getRedirectResult().then(result => {
var user = result.user;
if (user) {
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1;
if(isAndroid) { // NOT WORKING (stays on Login.vue although I am sure it's detecting it's an Android)
window.location.href = window.location.host + '/hello';
} else {
this.$router.replace('/hello') // this work perfectly
console.log(window.location.host + "/hello" ); // this is returning the intended address: localhost:8080/hello
}
} else {
toastr.warning("Oops something went wrong on login!");
}
}).catch(error => {
// dealing with redirection result errors from Google Authentication
});
This is my index.js routing file (I am doing some route guarding here so it may be useful for you to get a bigger picture if I paste the file):
import Vue from 'vue'
import Router from 'vue-router'
import firebase from '../firebase-config'
import {store} from '#/store/store'
import hello from '#/components/hello'
import login from '#/components/login'
import landing from '#/components/landing'
Vue.use(Router)
let router = new Router({
mode: 'history',
routes: [
{
path: '*',
redirect: '/landing'
},
{
path: '/',
redirect: '/landing'
},
{
path: '/landing',
name: 'landing',
component: landing
},
{
path: '/login',
name: 'login',
component: login
},
{
path: '/hello',
name: 'hello',
component: hello,
meta: {
requiresAuth: true
}
},
],
})
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
firebase.auth().onAuthStateChanged(function(user) {
if (!user) {
next({
path: '/landing'
})
} else {
next()
}
});
} else {
next()
}
})
export default router
Any thoughts?
I have basic Ionic application which I have disabled the back button on the app, is there a reason why the back button still works on an android device?
I am currently testing with ionic view.
here's my code:
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
$ionicPlatform.registerBackButtonAction(function(e) {
e.preventDefault();
}, 101);
})
According to ionic documentation
Your back button action will override each of the above actions
whose priority is less than the priority you provide.
And given that you want to completely disable the back button in all situations, and that the highest priority on actions in the referenced list is 500, you should provide a priority value more than 500, 600 for example. The code below should work when placed in $ionicPlatform.ready()
$ionicPlatform.registerBackButtonAction(function(e) {}, 600);
For anyone trying to sort this on Ionic 2:
http://www.codingandclimbing.co.uk/blog/ionic-2-android-back-button-13
and here's the actual post info:
In your app.ts, do the following to get the back button working as expected (mostly!):
initializeApp() {
this.platform.ready().then(() => {
this.registerBackButtonListener();
});
}
registerBackButtonListener() {
document.addEventListener('backbutton', () => {
var nav = this.getNav();
if (nav.canGoBack()) {
nav.pop();
}
else {
this.confirmExitApp(nav);
}
});
}
confirmExitApp(nav) {
let confirm = Alert.create({
title: 'Confirm Exit',
message: 'Really exit app?',
buttons: [
{
text: 'Cancel',
handler: () => {
console.log('Disagree clicked');
}
},
{
text: 'Exit',
handler: () => {
navigator.app.exitApp();
}
}
]
});
nav.present(confirm);
}
getNav() {
return this.app.getComponent('nav');
}
Note:
If you get errors about app not being a property of navigator:
1) Add a typings folder to your app root: e.g. app/typings
2) Add a file called: pluginshackyhacky.d.ts
3) Add for properties you need extended for TypeScript to compile.:
interface /*PhoneGapNavigator extends*/ Navigator {
app: any;
}
4) Add the pluginshackyhacky.d.ts to the compile in the tsconfig.json:
"files": [
"app/app.ts",
"app/typings/pluginshackyhacky.d.ts",
"app/typings/phonegap.d.ts"
]
You can see that I've also included the phonegap.d.ts file which includes a lot of missing properties/variables that allows TypeScript to compile without errors.
Hope this helps anyone having this problem.
Cheers.
Here is solution for Ionic 2:
constructor(
public platform: Platform, //Platform controller
public app: App, //App controller
) {
platform.ready().then(() => {
StatusBar.styleDefault();
Splashscreen.hide();
//Registration of push in Android and Windows Phone
platform.registerBackButtonAction(() => {
let nav = this.app.getActiveNav();
if (nav.canGoBack()){ //Can we go back?
nav.pop();
}else{
this.platform.exitApp(); //Exit from app
}
});
});
}
Change the priority from 101 to 100 to override the default hardware back functionality. If you had a priority of 100 already overriding the functionality, you could override that override with a priority of 101, if that makes sense.
$ionicPlatform.registerBackButtonAction(function(e) {
// android hardware back button was hit
}, 100);
Here is a list of all the priorities for the existing back button hooks
http://ionicframework.com/docs/api/service/$ionicPlatform/
I have a Sencha Touch 2 project and everything works great in the web browser. No errors in the console, and everything looks good. Once I package it with Phonegap and run it on a mobile device, however, things don't work as well.
I am using ext.device.notification.show in two places in my application. At first, I was doing requires: 'Ext.device.*' and while it worked in web, the app wouldn't run on mobile and eclipse would give me the error message Uncaught TypeError: Cannot read property 'name' of undefined. I switched over to requires: Ext.device.Notification (exact spelling and capitalization) and now the app runs but when I click a button that should create a message box, I get the error Uncaught TypeError: Cannot call method 'confirm' of undefined. The problem is I have no method called confirm. In one case I have a method called confirmItem, but for the second button that should be invoking a message box I have no method remotely close to "confirm."
I'll post one of the controllers below (this one has the confirmItem method):
Ext.define('MyApp.controller.MainController',
{
extend: 'Ext.app.Controller',
requires: ['Ext.device.Notification'],
config:
{
refs:
{
mainView: 'mainview',
btnConfirm: 'mainview button[action=confirmItem]',
},
control:
{
'btnConfirm':
{
tap: 'confirmItem'
},
mainView:
{
onSignOffCommand: 'onSignOffCommand'
}
}
},
// Transitions
getSlideLeftTransition: function ()
{
return {
type: 'slide',
direction: 'left'
};
},
getSlideRightTransition: function ()
{
return {
type: 'slide',
direction: 'right'
};
},
onSignOffCommand: function ()
{
var me = this;
console.log('Signed out.');
loginView = this.getLoginView();
//MainView.setMasked(false);
Ext.Viewport.animateActiveItem(loginView, this.getSlideRightTransition());
},
confirmItem: function ()
{
Ext.device.Notification.show(
{
title: 'Confirm',
message: 'Would you like to Confirm?',
buttons: ['No', 'Yes'],
callback: function (button)
{
if (button == "Yes")
{
MyApp.app.getController('MainController')
.confirmPickup();
}
else
{
console.log('Nope.');
}
}
});
},
confirmPickup: function ()
{
var me = this;
var loginStore = Ext.getStore('LoginStore');
mainView = this.getMainView();
mainView.setMasked(
{
xtype: 'loadmask',
message: ' '
});
if (null != loginStore.getAt(0))
{
var user_id = loginStore.getAt(0).get('id');
var name = loginStore.getAt(0).get('name');
var winner = loginStore.getAt(0).get('winner');
}
if (winner === 1)
{
console.log('success');
}
else
{
console.log('fail');
}
}
});
I only assume this is a problem because whenever I push the button that should be calling confirmItem I get the error. Am I using Ext.device.Notification correctly, or Have I missed something needed to make it work in Phonegap?
I found the solution! Everything was fine from a Sencha Touch point of view in terms of using requires: Ext.device.Notification but some things were missing on the Phonegap side. Specifically, I needed to install the appropriate plugins.
Open a terminal and type: Phonegap local plugin list to see your currently installed plugins. I had none. I went ahead and installed:
org.apache.cordova.device
org.apache.cordova.dialogs
org.apache.cordova.vibration
by using the following reference: http://docs.phonegap.com/en/3.0.0/cordova_device_device.md.html and selecting options from the menu on the left.