How to Build a Simple PWA Barcode Reader

3 min readApr 12, 2019

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 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:

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:

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

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

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.
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.