PWA QR Scanner

5 min readJul 26, 2020

These days, during COVID-19, in my country there are lot more QR codes that are being used. For example: instead of handing out physical menus at a restaurant they ask you to scan a QR code to view the menu on their website.

So my quest begun to find a FREE QR code scanner. And there are a lot in the Google play store.

As you can see there are a lot of options. I tried some of them and what I noticed is that they are all riddled with ads. And I really do not like ads. So I decided to build one for myself.

You can find the application here: https://qr-scanner.eu/

You can find the source code on Github: https://github.com/zwaldeck/qr-scanner

Requirements

Free to use
No ads
Cheap to keep online
Scan QR codes
Create QR codes

How did I achieve this?

I started looking at Flutter to build a native app for IOS and Android but there is a quite expensive cost to get the app in the stores.

But the web is here for the rescue, with Progressive Web Apps(PWA) we can build almost a native app. So that’s what I did!

I used Ionic and Angular to build the QR code scanner. The good thing about using Ionic is that I can go native with some small changes instead of needing to rebuild the app completely.

Step 1: Building the scanner

I stared by building the screen to scan a QR code. This screen has te following functionalities:

Switch camera (If there are multiple)
Select a QR code image instead of scanning
Turn on/off flash (Still experimental)
Scan a QR

When you scan your QR code you will come to a details screen where you can take an action with the data of your scanned QR code. For example: If you scanned in a URL then you can just press a button to go to that URL.

All scanned QR codes are saved in IndexedDB. This makes sure we keep the apps state when we open it up again.

We can filter the history based on type or when the QR code was scanned. You also have the possibility to remove a scanned QR code.

For the QR code detail screen you are also able to favor that QR code and view the QR code itself as well.

Step 2: Building a QR code generator

In the app it is rather easy to generate a QR code (without fancy colors or logos in the middle). In the app it takes 3 steps to generate a QR code. The screenshot are below.

Step 1 asks for what type you want to create a QR code, will it be a contact, event, URL, email, … ?

Step 2 you will need to fill in a form with data that corresponds with the selected type.

Step 3 you will see the QR code and you have the ability to save this in the app as well for later use (Saving as an image is a feature to come).

From left to right: Step 1, Step 2 & Step 3

Step 3: Building & Deploying

The build is actually really simple. It just just a normal Ionic production build but there is one catch. Because we use Netlify to build and deploy to production I had to include the Ionic CLI as a local dev dependency and use that instead of the normal globally installed CLI.

Why Netlify?

The main reason is easy: It’s FREE! But that’s not the only thing I like about Netlify. It has a seamless integration with your git repo. So as this project is open source it would make sense that we let Netlify build and deploy our site when there is a commit on the master branch. When there is a push to the master branch it is live in less then 5 minutes without me having to do anything. Glorious continuous integration!

Thanks to Netlify I only have to pay for the domain name, so it’s quite cheap to keep the app online.

Bugs, issues, improvements & feature requests?

As this is a fresh PWA I susspect there will be some bugs and issues that you can encounter.

I would like to learn from this so it helps if you log these bugs on the Github issue board(Linked below). If you feel like contributing and solve the bug yourself, feel free to create a pull request.

If you have other improvements or feature request the same goes as stated above. Feel free to create tickets and/or pull requests.

Issue board: https://github.com/zwaldeck/qr-scanner/issues

Extra Resources

Thanks for ready the article, and please try the app out and let me know what you think.