I have implemented one application in which the page will redirect to a page showing “no network” when the user gone offline. I have successfully implemented that. App navigates to the below screen when there is no network.In the below scenario the logic fails,’
Application fails to redirect to the " no network page " when the user opens the application for the first time or after kill during offline. In this case application launches the default root page say LoginPage.
Please find the logic below.
NetworkCheckProvider.ts
import { Injectable } from '#angular/core';
import { Network } from '#ionic-native/network';
import { Events } from "ionic-angular";
export enum ConnectionStatusEnum {
Online,
Offline
}
#Injectable()
export class NetworkCheckProvider {
private previousStatus;
constructor(private eventCtrl: Events,
private netWork:Network) {
this.previousStatus = ConnectionStatusEnum.Online;
}
public initializeNetworkEvents(): void {
this.netWork.onDisconnect().subscribe(() => {
if (this.previousStatus === ConnectionStatusEnum.Online) {
this.eventCtrl.publish('network:offline');
}
this.previousStatus = ConnectionStatusEnum.Offline;
});
this.netWork.onConnect().subscribe(() => {
if (this.previousStatus === ConnectionStatusEnum.Offline) {
this.eventCtrl.publish('network:online');
}
this.previousStatus = ConnectionStatusEnum.Online;
});
}
}
app.component.ts
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
this.networkCheck();
this.netWorkCheck.initializeNetworkEvents();
}
networkCheck() {
this.events.subscribe('network:online', () => {
this.generic.showToast("Network Available");
console.log('network connected!');
});
this.events.subscribe('network:offline', () => {
debugger;
if(this.nav.getActive().name!='NoInternetPage' || this.nav.getActive().name==null)
this.nav.push('NoInternetPage');
});
}
}
Please correct me if there is any mistake in my code. Also is there is any way to disable all click events during offline?
Thanks and Regards
Anand Raj
Related
I have set a cookie with nookies which store the values of all the products selected by user.
I want to fetch the cookie in server side using getServerSideProps and pass the value as props. I have to display the value of cookie on all pages.
When I tried getServerSideProps in _app.js. It did not worked and it did not even run the code.
Is there any way to do it?
As of now, there isn't a built-in way to do it, so I've resorted to doing the following.
First, I created a file that holds the getServerSideProps function I want to run on every page:
// lib/serverProps.js
export default async function getServerSideProps(ctx) {
// do something
return {
// data
};
}
Then in every page (yes, every, I can't find a workaround; it might even be helpful if you don't need the code to execute on server pages), do:
import getServerSideProps from "../lib/serverProps";
// other stuff...
export { getServerSideProps };
or
// other stuff...
export { default as getServerSideProps } from "../lib/serverProps";
If you want to add other code to run inside getServerSideProps for a specific page, you could do something along the lines...
import serverProps from "../lib/serverProps";
// other stuff...
export async function getServerSideProps(ctx) {
// do custom page stuff...
return {
...await serverProps(ctx),
...{
// pretend this is what you put inside
// the return block regularly, e.g.
props: { junk: 347 }
}
};
}
getServerSideProps does not work in _app.js. see docs.
you could use the older getInitialProps in your custom app component but then the automatic static optimisation is disabled, which is something Next.js bets on heavily.
it might be worth digging into your cookie use case and figure out if you really need to read it on the server side.
For those wanting to share state received from a page's getServerSideProps function to global components in pages/_app.tsx, I've pieced this solution together.
Create a shared getServerSideProps function to include on all pages
Create a shared useSetUserStorage custom hook to include on all pages
Listen for localStorage changes with custom event listener in global component (e.g. GlobalNav)
It's a work around, but is working for me so far (note that it includes some specifics to my use of getServerSideProps function).
It's a fair amount of code but hopefully this helps someone:
// src/pages/_app.tsx
import type { AppProps } from "next/app";
import GlobalNav from "../components/GlobalNav";
function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
return (
<>
<GlobalNav /> // <— your global component
<Component {...pageProps} />
</>
);
}
export default MyApp;
// src/utils/getServerSideProps.ts
import { ppinit, ppsession, sess } from "../authMiddleware";
import nc from "next-connect";
import { NextApiRequest, NextApiResponse } from "next";
import { User } from "../types/types";
interface ExtendedReq extends NextApiRequest {
user: User;
}
interface ServerProps {
req: ExtendedReq;
res: NextApiResponse;
}
interface ServerPropsReturn {
user?: User;
}
//
// Here we use middleware to augment the `req` with the user from passport.js
// to pass to the page
// src: https://github.com/hoangvvo/next-connect/tree/21c9c73fe3746e66033fd51e2aa01d479e267ad6#runreq-res
//
const getServerSideProps = async ({ req, res }: ServerProps) => {
// ADD YOUR CUSTOM `getServerSideProps` code here
const middleware = nc()
.use(sess, ppinit, ppsession)
.get((req: Express.Request, res: NextApiResponse, next) => {
next();
});
try {
await middleware.run(req, res);
} catch (e) {
// handle the error
}
const props: ServerPropsReturn = {};
if (req.user) props.user = req.user;
return { props };
};
export interface Props {
user?: User;
}
export default getServerSideProps;
// src/hooks.ts
import { useEffect } from "react";
import { User } from "./types/types";
export const useSetUserStorage = (user?: User) => {
useEffect(() => {
if (user) {
localStorage.setItem("user", JSON.stringify(user));
} else {
localStorage.removeItem("user");
}
// whether setting or removing the user, dispatch event so that `GlobalNav`
// component (which is above the page implementing this hook in the
// component hierarchy) can be updated to display the user status. we
// can't use `window.addEventListener('storage', handler)` as this only
// works for listening for events from other pages
document.dispatchEvent(new Event("localStorageUserUpdated"));
});
return null;
};
// src/pages/index.tsx (or any page)
import { useSetUserStorage } from "../hooks";
import { Props } from "../utils/getServerSideProps";
export { default as getServerSideProps } from "../utils/getServerSideProps";
export default function Home({ user }: Props) {
useSetUserStorage(user);
return (
<>
<h1>Welcome to my app {user?.username}</h1>
</>
);
}
// src/components/GlobalNav.ts (or another global component)
import { useEffect, useState, MouseEvent } from "react";
import { User } from "../types/types";
const GlobalNav = () => {
const [user, setUser] = useState<User | null>(null);
useEffect(() => {
const handleUserLocalStorage = () => {
const userString = localStorage.getItem("user");
try {
if (userString) {
setUser(JSON.parse(userString));
} else {
setUser(null);
}
} catch (e) {
// handle parse error
}
};
handleUserLocalStorage();
// this component (`GlobalNav`) lives at the application level, above the
// pages, but the pages receive the user object from `getServerSideProps`,
// so this listener listens for when a page tells us the user object has
// changed so we can update the `user` state here.
document.addEventListener(
"localStorageUserUpdated",
handleUserLocalStorage,
false,
);
return () => {
// remove listener if component unmounts
document.removeEventListener(
"localStorageUserUpdated",
handleUserLocalStorage,
);
};
}, []);
return (
<div>
{user?.username}
</div>
);
};
export default GlobalNav;
I used a slightly different technique. Every page, in my case, has its own getServerSideProps and I was looking for a more functional approach. Also I'm using GraphQL, but the idea is the same no matter which data fetching API you choose. A regular getServerSideProps would look like this -
export const getServerSideProps: GetServerSideProps = async (context) => {
const { slug } = context.query
const { data: profile } = await client.query({ query: GetProfileDocument, variables: { slug } })
return {
props: {
...(await getSelf(context)),
profile: profile?.GetProfile[0],
},
}
}
In the props you can see the await statement, which is called in all pages. And in the few cases I don't need it, it's gone. This is what getSelf looks like -
const getSelf = async (context: GetServerSidePropsContext<ParsedUrlQuery, PreviewData>) => {
const session = await getSession(context)
let self = null
if (session) {
const { data } = await client.query({
query: GetProfileDocument,
variables: { secret: session?.secretSauce as string },
})
self = data.GetProfile[0]
}
return { self, sessionData: session }
}
Hope it helped.
I use inappbrowser plugin in ionic 2 application like this :
import {InAppBrowser} from 'ionic-native';
and use it like this :
launch(url){
this.browser = new InAppBrowser( url, "_blank", "EnableViewPortScale=yes,closebuttoncaption=Done" );
this.browser.on("exit")
.subscribe(
() => {
this.close_event=true;
},
err => {
console.log("InAppBrowser Loadstop Event Error: " + err);
});
}
and in html :
<button ion-button icon-right color="danger" (click)="launch('https://www.example.com')">launch
<ion-icon name="refresh"></ion-icon>
when click on launch button for first time and after close browser, exit event not fire but when for second time click on launch button and after close browser exit event is fire
Perhaps the first time you click on Launch button, the device platform is not ready yet?
Try to put the calls to any InAppBrowser methods inside Plaform.ready(), like so:
...
import { Platform } from 'ionic-angular';
import { InAppBrowser } from '#ionic-native/in-app-browser';
...
export class HomePage {
private iab: InAppBrowser;
private platform: Platform;
private browser;
...
var launch = function(url) {
this.platform.ready().then(
() => {
this.browser = this.iab.create( url, "_blank", "EnableViewPortScale=yes,closebuttoncaption=Done" );
this.browser.on("exit").subscribe(
(event) => {
this.close_event = true;
},
(err) => {
console.log("InAppBrowser Loadstop Event Error: " + err);
}
);
}
);
};
...
}
according to my application , I have to notify user whenever he gets disconnected from a network .so in a provider i used two function , one returns true on online state and the other returns true on offline state. In app.component.ts am checking whether app is in online state or not by calling "isOnline()" of the provider.here the provider code..
import { Injectable } from '#angular/core';
import { Http } from '#angular/http';
import 'rxjs/add/operator/map';
import { Network } from '#ionic-native/network';
import { Platform } from 'ionic-angular';
import {Observable} from 'rxjs/Rx';
/*
Generated class for the Connectivity provider.
See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular 2 DI.
*/
declare var Connection;
#Injectable()
export class Connectivity {
onDevice: boolean;
myObservable :any;
constructor(public http: Http,public platform: Platform,public network:Network) {
console.log('Hello Connectivity Provider');
this.onDevice = this.platform.is('cordova');
/*
this.myObservable = Observable.create(observer => {
let result = this.isOffline();
observer.next(result);
});
*/
}
isOnline(): boolean {
if(this.onDevice && this.network.type){
return this.network.type !== Connection.NONE;
} else {
return navigator.onLine;
}
}
isOffline(): boolean {
if(this.onDevice && this.network.type){
return this.network.type === Connection.NONE;
} else {
return !navigator.onLine;
}
}
}
inside the constructor of app.component.ts am calling isOnline()
constructor(platform: Platform,public connectivityService: Connectivity) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Splashscreen.hide();
/*this.connectivityService.myObservable.subscribe((data) => {
console.log(data);
});*/
if(this.connectivityService.isOnline()){
console.log("online");
}
else {
console.log("offline");
}
});
this is working fine but, when i get disconnected from network ,i have to refresh the browser again then only am able to see the "offline" on console.how to notify user as soon as network is lost
onchange() method isn't working correctly..
https://github.com/driftyco/ionic-native/issues/1043
I used the solution from the github forum:
Observable.merge(this.network.onConnect(), this.network.onDisconnect())
.subscribe(e => console.log(e), err => console.error(err));
Have a look at the Ionic Native Network documentation.
Particularly the onChange() method:
onchange()
Returns an observable to watch connection changes
Returns: Observable<any>
I am getting this error this.network.onchange(...).subscribe is not a function and I am using ionic native 3.6.0. Looking at the Network native plugin this is how the code looks like.
/**
* Returns an observable to watch connection changes
* #return {Observable<any>}
*/
Network.prototype.onchange = function () {
return Observable.merge(this.onConnect(), this.onDisconnect());
};
Doing the same in your code can fix the issue
import { Observable } from 'rxjs/Observable';
Observable.merge(this.network.onConnect(), this.network.onDisconnect()).subscribe(() => {
this.getNetworkInfo();
});
Before I launches the app I will check with local storage if any user data available, If yes I will navigation to Home page else Login page.
Here I'm unable to retrieve stored data, Any inputs please...
Currently using Ionic 2 SQlite plugin.
Note: In browser it's working fine but on Android device it's not working.
app.component.ts : checking user data
loadUser() {
this.userSettings.getUser().then(user => {
this.userObj = JSON.stringify(user);
if (user) {
console.log('App : ', this.userObj);
this.nav.setRoot(HomePage,this.userObj);
} else {
console.log('App : No user data');
this.rootPage = LoginPage;
}
});
}
login.ts : Saving user data
this.userSettings.addUser(
userData.employeeCode,
userData.password,
userData.role
);
user-settings.ts : Storage file in providers
getUser() {
if (this.sql) {
return this.sql.get('user').then(value => value);
} else {
return new Promise(resolve => resolve(this.storage.get('user').then(value => value)));
}
}
addUser(employeeCode, password, role) {
let item = { employeeCode: employeeCode, password: password, role: role };
if (this.sql) {
this.sql.set('user', JSON.stringify(item)).then(data => {
this.events.publish('userObj:changed');
});
} else {
return new Promise(resolve => {
this.storage.set('user', JSON.stringify(item)).then(() => {
this.events.publish('userObj:changed');
resolve();
});
});
}
}
app.module.ts:
providers: [
{ provide: ErrorHandler, useClass: IonicErrorHandler },
AuthService,
SqlStorage,
UserSettings,
Storage
]
Thanks in advance.
Problem solved
After calling the sqlite operation in ngAfterViewInit it's working fine.
ngAfterViewInit() {
this.storage.get('user').then((user: any) => {
if (user) {
this.userCredentials = JSON.parse(user);
this.nav.setRoot(HomePage, this.userCredentials);
}
else {
this.rootPage = LoginPage;
}
});
}
[Source] (https://github.com/driftyco/ionic-conference-app/blob/master/src/pages/account/account.ts)
Cheers :)
As you point out that your code is working in Chrome, but not on your device, you might be calling sqlite before cordova's device.ready() has fired.
In app.component.ts ensure you call this.loadUser() in the following manner: (platform.ready() should already be in the constructor)
platform.ready().then(() => {
this.loadUser();
});
So I'm trying to get started with ionic 2 from ionic 1 and need some guidance on how to set up authentication in my project. Specifically I'm using firebase and angularfire2.
As a general approach should I either:
a. Check for session/localStorage on app.ts and set the rootPage to login if unauthenticated? Using this method if I log the user out and set the nav rootpage back to the login, the tabs are displayed at the bottom.
b. Create the login page as a modal which removes the problem of the tabs appearing at the bottom, but I'm not sure if I should be firing the modal from app.ts since I'm not sure if the application itself has a root view I should be referencing.
Also, should I set up the auth login and logout as a service and refactor it out rather than having it in the login page and the logout button in the profile controllers?
Here's my logic thus far using method A:
app.ts
export class MyApp {
rootPage: any;
local: Storage = new Storage(LocalStorage);
constructor(platform: Platform) {
this.local.get('user').then(user => {
if (user) {
this.rootPage = TabsPage;
} else {
this.rootPage = LoginPage;
}
});
platform.ready().then(() => {
StatusBar.styleDefault();
});
}
}
And in myProfile.ts
logout() {
this.local.remove('user');
this.user = null;
let modal = Modal.create(LoginPage);
this.nav.present(modal); //should I set the rootPage instead? if so how do I remove the tabBar or set the rootpage of the containing app root page
}
a. Check for session/localStorage on app.ts and set the rootPage to
login if unauthenticated? Using this method if I log the user out and
set the nav rootpage back to the login, the tabs are displayed at the
bottom.
You can use Angularfire2 Ionic Provider , Go to this link for more details Angularfire2 Auth with Ionic
import { Observable } from 'rxjs/Observable';
import { Injectable } from '#angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
// Do not import from 'firebase' as you'll lose the tree shaking benefits
import * as firebase from 'firebase/app';
#Injectable()
export class AuthService {
private currentUser: firebase.User;
constructor(public afAuth: AngularFireAuth) {
afAuth.authState.subscribe((user: firebase.User) => this.currentUser = user);
}
getauthenticated(): boolean {
return this.currentUser !== null;
}
signInWithFacebook(): firebase.Promise<any> {
return this.afAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider());
}
signOut(): void {
this.afAuth.auth.signOut();
}
displayName(): string {
if (this.currentUser !== null) {
return this.currentUser.facebook.displayName;
} else {
return '';
}
}
}
Then from App.ts Import the Provider you just created and then check for Auth status
constructor(public authService: AuthService) {
let authState = this.authservice.getauthenticated();
if (authState) {
this.rootPage = TabsPage;
} else {
this.rootPage = LoginPage;
}
}
And Finally for the Logout use Navigating from an Overlay Component
import { App } from 'ionic-angular';
constructor(
public appCtrl: App
) {}
setRoot(Page:any) {
this.appCtrl.getRootNav().setRoot(Page);
This will not display the Tabs in bottom.
Here's an example of an ionic login flow with a jwt stored in the local storage:
https://github.com/RedFroggy/ionic2-nfc-app/tree/master/app/pages/login