Coronavirus Lockdown: I Learnt More About QR Codes and Made a Generator PWA

#javascript #angular #webdev #pwa

I talk about my journey of discovering QR code detection in iOS and Android and developing a feature-rich QR code generator PWA using this knowledge.

Knowingly or unknowingly, we all have been using QR codes for a while now — to make payments, to open WhatsApp Web or open links from a print ad. In case you didn’t know, they look like this:

This pattern contains some information that one can read by pointing their phone camera at it. I recently discovered that my iPhone could detect QR codes of WiFi configurations and connect to them instantly. I sat down in amazement and wondered how much time had been wasted by all of humanity in sharing WiFi name and password with others.

Recent versions of both iOS and Android support QR code scanning in their native camera apps. I discovered the various types of QR codes supported by them — contacts, events, location, phone call and SMS to name a few — and made a PWA that generates codes for all these types. I named it Share By Cam because I figured it was a great way of sharing common data; and because a camera is required to complete the circle of sharing.

I looked up existing solutions and found one or more of the following problems with them:

They didn’t cover all types
They had complicated forms
They served too many ads
They sent data to a server
They did not work offline
They were not responsive

This list gave birth to the primary list of features of Share By Cam.

1. Covers Most Types

I couldn’t find any official documentation from Apple or Google that listed the types of QR codes their OS could detect. I scoured the internet for all available QR code generators and made a union list and built them:

Contact (vCard)
Email
Event (iCalendar)
Link
Location
Phone Call
SMS
Text
WiFi

A developer can also embed an app’s deeplinks (via Text) and initiate actions, making the possibilities infinite.

I also added WhatsApp Message via deeplinking since it is a popular activity that people do.

2. Simpler Forms

I added descriptive pre-filled values and verbose labels wherever necessary. I also attached short videos that explained the process succinctly.

3. No Ads

Clean, focused UI.

4. What Happens On Your Device, Stays On Your Device

I used this library to generate QR codes on the device itself. The data isn’t stored or sent anywhere — not to the URL, not to the local storage and most importantly, not outside your device.

5. Progressive Web App (PWA) for Offline Experience

By making the app a PWA, I enabled installing it as a native app. It also gained the ability to work in airplane mode.

6. Responsive Both Ways

Most people worry about just laptop, tablet and phone screens. I ensured that Share By Cam looked great on larger screens too.

QR codes speed-up the process of data sharing and also remove human error in doing so. Besides using a WiFi QR code to help guests join your network, I also recommend you have an emergency phone call QR code on your fridge or your desk, so you can call it during emergencies instead of looking for the contact buried in your phone. A contact QR code stuck at the back of your phone will also help others save your name and number properly.

I enjoyed writing this PWA and hope you will automate some aspect of your life using it.