DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Coronavirus Lockdown: I Learnt More About QR Codes and Made a Generator PWA
Karmasakshi Goyal
Karmasakshi Goyal

Posted on • Updated on • Originally published at Medium

Coronavirus Lockdown: I Learnt More About QR Codes and Made a Generator 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:

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.

Top comments (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
Ruslan Gonzalez

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.

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.