PWA (mobile) app: Read configuration from QR code

This is my 2nd write up on dev.to site. This article shows proof-of-concept, fully working with Chrome on Android.

A small background

I am a fan of mobile apps, I have developed a few apps (HTML + CSS + JS) using Cordova in past. One day i found out that there are PWA applications and since then I have loved them. Now I write apps as PWA/SPA ones using Quasar framework.

Apps need settings

As I have developed apps, some of them used configuration, often using dialog box. So, user fill/change configuration via standard dialog.

Sometimes I need special configuration of app (not related to user). Instead of fill API keys (or similar strange text string) manually we can use QR code. It assumes that we use QR library to mane reading QR code. And the app grows...

But wait! Many of us have QR reader app already installed on mobile phone. So, can we use it as an external source via clipboard? Yes, we can. :-)

Just scan QR code using external QR reader app, it stores text/config/whatever to clipboard.

Paste from clipboard

Nothing new, nothing fancy, yawn. One button and a function called on click event. And that's it!

vanilla JS code:

async function paste(input) {
  const text = await navigator.clipboard.readText();
  input.value = text;
}

VueJS code:

pasteFromClipboard: async function(){
  const text = await navigator.clipboard.readText();
  this.textFromClipboard = text;
}

Hope this help you :-)