Hi,
I have successfully launched the PWA with Ionic 2. Now I want to access some native device features like camera, handling the mobile phone back button. I knew with cordova Ionic can provide the native device functionality. But much of the documentation is for hybrid apps and I want to know how to do the same on a browser environement like PWA.
Can some one guide me out to access the camera and device back button on PWA.
Thanks in advance!
regards,
Mano
How are you building your PWA?
Hi Sujan,
I am using the below commands to build my app
cordova platform add browser
cordova plugin add cordova-plugin-backbutton
npm run build browser --prod
But I don’t know how and where to capture the back button event…
regards,
Mano
In general, Cordova has little to do with PWAs. Yes, there is a Cordova browser platform. But that does not matter much, because very few plugins support it. You need to check the docs of each plugin you are using, to see if they support the browser platform. Most plugins only support Android and iOS. Some support Windows also, and some support only Android, or only iOS.
The approach I’ve taken is to use Angular 2 libraries for the desktop. (Example: ng2ImgTools), and to use Cordova only for apps on handheld devices.
First you should use ionic commands if you want to work with Ionic in a proper way:
ionic cordova platform add browser
ionic cordova plugin add cordova-plugin-backbutton
ionic cordova build browser --prod
Then you should be aware that there is a command ionic build that is meant for PWAs and doesn’t include Cordova in the build at all.
Right now you can use both, see Aaron’s comment on the possible problems with the browser platform though. But many people use it, also in production.
And last, I think there is a way to handle the back button in Ionic itself: https://ionicframework.com/docs/api/platform/Platform/#registerBackButtonAction
Thanks Aaron and Sujan of helping me to understand how Ionic handles cordova… I will try out with these guidelines and let you know in case of any clarifications.
regards,
Mano
Installed the above ionic cordova plugin and build the app for browser platform. But still I can't able to control the device back button from my PWA... here's my component.ts code -
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { TabsPage } from '../pages/tabs/tabs';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = TabsPage;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
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();
platform.ready().then((readySource) => {
console.log('Platform ready from', readySource);
// Platform now ready, execute any required native code
});
platform.registerBackButtonAction(function(event) {
event.preventDefault();
event.stopPropagation();
console.log('**clicked***');
},100);
});
}
}
Here my console.log output -
adding proxy for Device
adding proxy for SplashScreen
adding proxy for StatusBar
StatusBar is not supported
Ionic Native: deviceready event fired after 681 ms
StatusBar is not supported
Platform ready from cordova
Am I doing anything wrong here!
regards,
Mano
Please edit your post, it is not very readable at the moment.
Use the </> button above the input field to format your code, command line output or error message (select the text first, then click the button or wrap it in ``` manually). Check the preview if it looks better. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.
Hi Sujan,
In my console output I could see the “Ionic Native: deviceready event fired after 681 ms” which states that cordova is loaded properly and its ready to handle the events. But still unable to capture the back button event.
regards,
Mano
So, what is the best approach for building apps that are meant to run on a phones’ browser?
platform.registerBackButtonAction does not use Cordova, but maybe just is not supported on the browser.
I am not even sure if you can handle the back button at all in a PWA, sorry.
The back button in the browser can only be handled by the Browser app the user is using. What you want to do can only be done on the device/cordova.
This would be a nice article to do.
Hi bandito,
When I checked twitter lite (PWA), which is a browser app there they have handled the device back button similar to the browser back button.
Its not possible becoz of ionic - cordova browser app?
regards,
Mano
ionic build for a pure PWA, ionic cordova build browser for a PWA with some Cordova functionality (cordova-browser has only limited plugin support, you have to check each one individually)
For now nobody had looked at this I guess.
If you can debug the Twitter PWA and show the implementation, I am sure it can be ported to a Ionic PWA.
No what I meant was that the process of doing it might be different than the one implemented in Cordova. I would just follow the Twitter lite version. If you still require help I might do it tonight and reply to this post.
Regards,
Esteban Morales Morales
It would be great if you help me out to accomplish it.
Thanks
regards,
Mano
What exactly do you want to do with the back button?
I am developing a PWA where I have a categories page which list all the products. From this page If I tap on a particular product then it will take me to a product details page. From the product detail page If I move back (using browser back button) then I land on the categories page where I don’t face any difficulty.
But instead of browser back button If I tap on the mobile back button (android phone) then it closes the app completely with out any alert.
I want the mobile back button to move to the previous page (could be from browser cache) and double tap to show a toast msg asking for the exit confirmation.
Thanks
regards,
Mano