DEV Community

loading...
Cover image for Coronavirus Lockdown: I Learnt More About QR Codes and Made a Generator PWA

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

Karmasakshi Goyal
Here to talk about the Web.
Originally published at Medium Updated on ・3 min read

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:

A QR code that takes you to Share By Cam

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.

Screenshot of Share By Cam

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

  1. They didn’t cover all types
  2. They had complicated forms
  3. They served too many ads
  4. They sent data to a server
  5. They did not work offline
  6. 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.

WiFi form of Share By Cam

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.

“Add to Home Screen” adds the web app as a native app to iOS home screen

Share By Cam working 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.

Share By Cam on larger screens

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.

Discussion (4)

Collapse
msbhikhe profile image
msbhikhe

Loved the app!

Collapse
andrea_guido profile image
andrea guido

Dear Karmasakshi are you able to decode a QR code of an exixsting green pass and modify adding data for another person to make it valid?

Collapse
ruslangonzalez profile image
Ruslán González

Nice work. Plans to make it Open Source?

Collapse
karmasakshi profile image
Karmasakshi Goyal Author

Great suggestion! I'll consider it after I've added all the planned features.