How to Build a Simple PWA Barcode Reader

Xiao Ling /  / PWA / , ,

Progressive web apps (PWA), simply to say, are web apps that running like native apps on the desktop and mobile platforms. The advantages of PWA include installable, discoverable, linkable and so on. In this article, I’m trying to give a snapshot of a simple PWA barcode reader project that built with Dynamsoft JavaScript barcode SDK.

Why PWA

Since from the day that mobile became the mainstream, users are spending more of time in native apps rather than on the web.

However, there are some drawbacks of using native apps:

  • It takes time to install native apps from the app store.
  • Users tend to install many apps but only use a few of them, which is a waste to system space.

Progressive web apps feature native app capabilities, such as push notification, offline work, background sync, sensor access and so on.

How doe a Progressive Web App Work

The main component of PWA is a service worker that runs in the background for caching web resources and providing native capabilities.

PWA diagram

PWA Browser Compatibility

Browser compatibility is important for web app development. You can find the PWA features supported by Chrome, Safari, Edge, Firefox and Opera here: https://www.goodbarber.com/blog/progressive-web-apps-feature-compatibility-based-on-the-browser-a883/.

Building and Publishing PWA Barcode Reader

Download Dynamsoft JavaScript Barcode SDK.

Get a FREE 30-day trial license.

Get the source code of web barcode reader app from https://github.com/dynamsoft-dbr/javascript-barcode/tree/master/examples/webworker/6.4.1.1.

Copy dbr-6.5.0.2.min.js and dbr-6.5.0.2.wasm to the project root directory.

A standard progressive web app has to meet the following criteria:

  • Hosted over HTTPS.
  • Include a web manifest file.
  • Register a service worker.

Create a manifest file manifest.json:

{
    "name": "BarcodeReader",
    "short_name": "BarcodeReader",
    "description": "A progressive web app for reading barcodes.",
    "icons": [
        {
            "src": "icons/icon-192.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ],
    "start_url": "/javascript-barcode/examples/pwa/index.html",
    "display": "standalone",
    "theme_color": "#2F3BA2",
    "background_color": "#3E4EB8"
}

With the manifest file, your app can be installed to the Android home screen and be launched as a native app.

Create a service-worker.js file:

var cacheName = 'barcode-reader-1';
var filesToCache = [
  '/javascript-barcode/examples/pwa/',
  '/javascript-barcode/examples/pwa/index.html',
  '/javascript-barcode/examples/pwa/app.js',
  '/javascript-barcode/examples/pwa/style.css',
  '/javascript-barcode/examples/pwa/favicon.ico',
  '/javascript-barcode/examples/pwa/icons/icon-32.png',
  '/javascript-barcode/examples/pwa/icons/icon-128.png',
  '/javascript-barcode/examples/pwa/icons/icon-144.png',
  '/javascript-barcode/examples/pwa/icons/icon-152.png',
  '/javascript-barcode/examples/pwa/icons/icon-192.png',
  '/javascript-barcode/examples/pwa/icons/icon-256.png',
  '/javascript-barcode/examples/pwa/dbr-6.5.0.2.min.js',
  '/javascript-barcode/examples/pwa/dbr-6.5.0.2.wasm',
];

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    })
  );
});

self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');
  e.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (key !== cacheName) {
          console.log('[ServiceWorker] Removing old cache', key);
          return caches.delete(key);
        }
      }));
    })
  );
  return self.clients.claim();
});

self.addEventListener('fetch', function(e) {
  e.respondWith(
    caches.match(e.request).then(function(r) {
      console.log('[Service Worker] Fetching resource: '+e.request.url);
      return r || fetch(e.request).then(function(response) {
        return caches.open(cacheName).then(function(cache) {
          console.log('[Service Worker] Caching new resource: '+e.request.url);
          cache.put(e.request, response.clone());
          return response;
        });
      });
    })
  );
});

The JavaScript code above caches all resources required by the web app to make it work offline.

Register the service worker in app.js:

if ('serviceWorker' in navigator) {
    navigator.serviceWorker
        .register('/javascript-barcode/examples/pwa/service-worker.js')
        .then(function () {
            console.log('Service Worker Registered');
        });
}

You can now test the PWA project with Web Server for Chrome or other web servers. Two things you have to know:

  1. The project relies on a wasm file. Web server for Chrome can work well with wasm file. For other web servers, you have to add MIME type ‘application/wasm’ to the web configuration file.
  2. Since Web Server for Chrome does not support HTTPS, you will fail to add PWA barcode reader to Android home screen.

The suggested way is to push your code to GitHub and activate the GitHub page in repository settings. Then visit your project page via https://<GitHub ID>.github.io/<Project Name>/.

Try my PWA barcode reader.

PWA barcode reader

Desktop

PWA barcode reader desktop

Mobile

PWA add to home screen

Reference

Source Code

https://github.com/yushulx/javascript-barcode/tree/master/examples/web/pwa

About Dynamsoft Barcode Reader JavaScript Edition

Dynamsoft Barcode Reader JavaScript Edition is a JavaScript barcode scanning library based on the WebAssembly technology. It supports Code 39, Code 93, Code 128, Codabar, EAN-8, EAN-13, UPC-A, UPC-E, Interleaved 2 of 5 (ITF), Industrial 2 of 5 (Code 2 of 5 Industry, Standard 2 of 5, Code 2 of 5), ITF-14 QR code, Datamatrix, PDF417 and Aztec code. The library is capable of scanning multiple barcodes from static images and camera video stream.

Online Demo

dynamsoft javascript barcode reader