Create QR code scanner using React PWA

This article is part of React PWA series:

1. Create QR code scanner using React PWA
2. Generate QR code Price Tag using React
3. Simulate e-Wallet payment using React PWA

If you found that it is too time-consuming to build QR code scanner mobile app in Android Google Play Store or IOS App Store, there is an alternative using Progressive Web App (PWA).

React PWA just cost you few line of codes for QR code scanner, furthermore, cloud deployment is free, and PWA is installable, offer similar capabilities to iOS/Android/desktop apps.

Making a Progressive Web App in React

Start a new project by using the PWA custom template,

npx create-react-app my-app --template cra-template-pwa

You’ll get a src/service-worker.js file that serves as a good starting point for an offline-first service worker, it needs to be registered before it will be used. Look for the following in src/index.js file:

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://cra.link/PWA
serviceWorkerRegistration.unregister();

Change serviceWorker.unregister() to serviceWorker.register() will opt you in to using the service worker.

React Component for QR code scanner

What we need to build is a simple React component for QR code scanner, then import this component in src/App.js file:

// App.js
import React from 'react';
import Qrscan from './Qrscan';  // QR code scanner
function App() {
  return (
    <div>
      <Qrscan />
    </div>
  );
}
export default App;

Add react-qr-reader package

npm install --save react-qr-reader

There are some known issues with the react-qr-reader package.

Create a new folder Qrscan in src. Create two files in Qrscan folder, index.js and Qrscan.module.css

Deploy React PWA

PWA must be served over HTTPS. Vercel is the best place to deploy any https- secured frontend app. Please go thru the documentation on how to deploy app in Vercel.

PWA is installable

After the web app is deployed, try to access to the website using your mobile browser. (I am using Android chrome browser)

At the bottom, click the button to add the Web App icon to Home screen.

I built a website with PWA features, Random Graph PWA is a collection of React Components with source code. https://random-graph-pwa.vercel.app/

I have included the QR code scanner in this web app, can be accessed from the menu at top right or url https://random-graph-pwa.vercel.app/qrscan. The source code is available by clicking ‘Source Code’ button at bottom right.