PWA application and qr-code?

Ionic Framework ionic-v3
1

Hi everyone,

Is it possible to create a PWA application with QRcode reader ability?

I was looking into the following library: https://ionicframework.com/docs/native/qr-scanner/ but I can’t figure out how this could be possible.

Does anyone have a clue regarding this?

Thanks,

Jon

2

See here:
https://github.com/bitpay/cordova-plugin-qrscanner#electron-or-nwjs-usage-without-cordova-browser
https://github.com/bitpay/cordova-plugin-qrscanner#browser

So yes, this is possible with a non-cordova build (ionic build) and a cordova browser build (ionic cordova build browser) (non supported by Ionic, but still working) .

3

Thanks,

So if I properly understand, I can use any compatible browser (chrome, edge, etc.) loading a ionic PWA app? Am I right?

If this is correct, it would be perfect. For the moment, when I try to use chrome and do a scan, I get the following error message: “Native: tried calling BarcodeScanner.scan, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator”. The camera doesn’t even load (nothing happens).

Regards,

Jon

4

If you use the cordova browser platform, and the plugin support browser in a serious way, yes.
But: Ionic team normally doesn’t advice you to do that but use ionic build to build a PWA.

So you can a) do it anyway and maybe have problems or b) not do it and find another way to use the functionality, as the first link I posted gives you an option to.

(I am happy that I don’t have to decide between a) and b) right now myself)

5

Hi,

Thanks again.

I am quite a newbie while developping PWA app and I can’t figure out how to do this on non cordova browser.

Any advise or examples?

Thanks,

Jon

6

What is the problem?
What have you tried?

In generall if you wnat to use the Cordova browser platform you add it with ionic cordova platform add browser and then build or run it with ionic cordova run browser.

7

Hi there, I’m trying too to make the cordova-plugin-qrscanner work in a “cordova-less” mode with an ionic app built without cordova.

I cannot manage to make window.QRScanner available at runtime in the browser (Chrome), it is always undefined.

How are we supposed to import the lib? I tried following the plugin’s README but it is very generic and not fit for an ionic app (with typescript etc.)

Has anyone managed to do this?

Thanks

8

Try:

import 'path/to/qrscanner/library.bundle.min.js';

And:

declare let QRScanner: any;

1 Like
9

Thanks for your help @robinyo,

I tried your code, and saw in the dev tools that the lib was indeed imported. But I still did not have access to the QRScanner object.
So I tried again multiple import variants, and finally, found this one to work :

import * as QRScanner from 'cordova-plugin-qrscanner/dist/cordova-plugin-qrscanner-lib.min';

QRScanner is then a global object instance.

It works!
At least, it works in my app as it used to work when I used it as a Cordova Plugin on an ios/browser platform…

I will try to push a sample app on GitHub as proof :wink:

Thanks again.

10

Your welcome.

Kind of like the moment.js Typescript example.

import * as moment from 'moment';

See: http://momentjs.com/docs/#/use-it/typescript/

1 Like
11

I tried testing my sample app on iOS Safari Mobile browser (without Cordova), and while it almost worked on Chrome 63 –
video preview is showing but scanning occurred once during all my testing – it did not work on iOS Mobile Safari.

Then I found this comment on an existing issue for the plugin : https://github.com/bitpay/cordova-plugin-qrscanner/issues/89#issuecomment-336454494

So basically, this plugin, used as a library, won’t work without Cordova on mobile browsers :frowning:

Here is my sample app: