PWA - How to access Cordova plugins in PWA web applications ?

Hi, I am using “cordova-plugin-qrscanner” in my ionic application. I am able to access all the features from this plugin when run my ionic app as either ios/android app(run on device or generate apk, ipa). But when I run this app as PWA(Progressive Web App), I cannot access any of the plug in features. Kindly guide me how can I access plug in features in PWA. Probably I am missing something linking plugin or something else. Any help with example would be a great help.

Cordova plugins will not work on the web. There are some that do have web versions, like Geolocation, Camera, but most do not.

You will need to find alternate solutions to that functionality if your app needs that function.

1 Like

cordova itself works on browser.

If the plugin you want to use supports browser platform, you can use it on browser, like @ionic-native/google-maps and cordova-plugin-googlemaps.
https://mapsplugin.github.io/ionic-googlemaps-quickdemo-v4/

You can’t access cordova plugins from the browser.

You just can’t!!!

The ionic/native stuff I think does confuse people into thinking this stuff can work. It’ll wrap some stuff but not others.

You’ll need an HTML5 version for what you need.

It seems the cordova-plugin-qrscanner supports browser platform at least.

@BasappaBaligar
I guess you execute your app as ionic serve.
But you need to execute ionic cordova run browser instead.

@BasappaBaligar

Hi, just tried that plugin. Works on native for mobile, couldn’t get it working via PWA - though in the notes it does say it wraps browser’s native qr reader.
Good luck

Dose it means we can use cordova plugins in PWA if the plugin supports browser platform? Because I need email-composer in PWA, I want to clarify it if it’s possible or not. Thanks.

For email composition you’ve got regular mailto anchor tags which have been around forever, which can carry the subject line and body.

This would be kinda ideal for the pwa situation

1 Like

And If I want firebase serve?
Is there a way to include the Cordova ?
I need for camera, google maps … local notifications would be great

1 Like

So Maybe we have to use Capacitor?
https://capacitor.ionicframework.com/docs/

Capacitor is a spiritual successor to Apache Cordova and Adobe PhoneGap, with inspiration from other popular cross-platform tools like React Native and Turbolinks, but focused entirely on enabling modern web apps to run on all major platforms with ease. Capacitor has backwards-compatible support for many existing Cordova plugins.

Is that a question? There’s a lot of advertising blurb right there.

I did an example of using a camera with PWA which works with Ionic3 and will work just fine for any other framework.

I suspect Capacitor will also work as it should be able to use the HTML5 PWA option but I’ve not tested that.

Thanks. Great example. I think I will try it :slight_smile:

No advertising :slight_smile: Until now I was just using Ionic for android and IOS. But now I am building also the cloud platform and I want to have the same code working for PWA and mobile … So I was wondering if I decided for capacitor… if it will still work for mobile?

I have lot’s of plugins. Local Notification for example I don’t know if there is another way? Anyway I am using together with background mode plugin to receive chat notifications… So I don’t think I will be able to have it working on pwa … What are your thoughts?

My cross-environment work for working with both PWA and native hasn’t depended on attempting to use the same dependency for both scenarios.

I tend to dependency inject based on the environment so if native one library gets called, otherwise another gets called instead. Those libraries are behind interfaces so I don’t need to write plugin specific code.

This is an example of dependency injection in action.

@Judgewest2000 I am sorry but what you said about not being able to run cordova plugins in the browser is incorrect. You can run cordova applications in the browser. It’s up to the plugin whether or not they support the browser platform.

The “browser” is a platform just like “ios” and “android”

For example, I can run Ionic Google Maps in the Browser, and it works perfectly.

The solution is to serve with:

ionic serve --cordova --platform browser

and build with

ionic build --cordova --platform browser

More info here https://github.com/ionic-team/ionic-cli/issues/3043

My above commands work for ionic 4, but it appears it can work for ionic 3 as well.

1 Like

No need to apologise.

I think if you try 99% of all Cordova plugins which aren’t the major ones (and including some major) you’ll find they will not work.

So much so to the point it’s a pointless laughable step for what is basically a website.

How do you get it working?

I get this error:

Native: tried calling Network.type, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator