We were developing a PWA app that needs us to scan QR codes if user in order to validate them. Now we knew how to integrate QR scanner in javascript but it was our first time PWA and we were clueless how we would achieve that in PWA.
Our Need?
We needed to implement QR code scanner functionality to confirm that users met with each other. Where one user shows QR code in their app and the other user needs to scan that QR code from the app.
To implement this we needed two things
QR CODE Generator (Which encode data)
QR CODE Scanner (Which decode data)
We went through the multiple libraries and amongst them, we used the following libraries.
angularx-qrcode to generate QR Code.
ngx-scanner to scan generated QR Code.
NOTE: Many times the scanner library does not scan QRs of all libraries. So you need to select a library accordingly.
Where we got stuck?
Once we got the requirement we decided to make POC for that. We followed the steps given in the library documentation and created a nice demo where we generate QR code with required encrypted data which was decode by the integrated QR scanner. We tested this after adding an app to the home screen and it worked.
Unfortunately we tested this in Android device and not in an IOS device. We knew IOS PWA supports camera features but were unaware that it does not support streaming in camera. Hence the QR scanning did not work in IOS PWA.
We had committed to deliver this feature to our client as we had tested the POC
Our workaround.
We were able to catch and handle errors generated while the user tried to scan QR code in and IOS device. So we decided to handle this by checking QR supportiveness of the devices before the user reached that screen. If the user is on an unsupported device we would not show the user scan button, instead of that we show the user an OTP screen that they can ask to other users. The OTP screen for other users has a toggle switch between the QR code and the OTP screen to manage the flow accordingly.
How should you start?
1) First understand the requirements clearly. Make small POC or demo before committing anything in PWA as there are too many things that are still not supported in IOS devices.
2) Find out a workaround that fulfils the system requirement without bothering users.
3) Select libraries whose community is more active and supports the latest version of the technologies being used.
Top comments (1)
One thing I love about Indians is that there are many of them and they introduce so many libraries to this community. The problem they discuss really help in other projects.