Как создать простой считыватель штрих-кода PWA

Прогрессивные веб-приложения (PWA), проще говоря, — это веб-приложения, которые работают как нативные приложения на настольных и мобильных платформах. Преимущества PWA включают в себя возможность установки, обнаружения, связывания и так далее. В этой статье я пытаюсь сделать снимок простого проекта считывателя штрих-кода PWA, созданного с помощью Dynamsoft SDK штрих-кода JavaScript.

Почему ПВА

С того дня, как мобильные устройства стали мейнстримом, пользователи проводят больше времени в нативных приложениях, а не в Интернете.

Однако есть некоторые недостатки использования нативных приложений:

Для установки нативных приложений из магазина приложений требуется время.
Пользователи, как правило, устанавливают много приложений, но используют только некоторые из них, что приводит к пустой трате системного пространства.

Прогрессивные веб-приложения имеют собственные возможности приложений, такие как push-уведомления, автономная работа, фоновая синхронизация, доступ к датчикам и т. д.

Как работает прогрессивное веб-приложение

Основным компонентом PWA является сервис-воркер, который работает в фоновом режиме для кэширования веб-ресурсов и предоставления собственных возможностей.

Совместимость с браузером PWA

Совместимость с браузером важна для разработки веб-приложений. Вы можете найти функции PWA, поддерживаемые Chrome, Safari, Edge, Firefox и Opera, здесь: https://www.goodbarber.com/blog/progressive-web-apps-feature-compatibility-based-on-the-browser- а883/».

Создание и публикация считывателя штрих-кодов PWA

Скачайте Dynamsoft JavaScript Barcode SDK.

Получите БЕСПЛАТНУЮ 30-дневную пробную лицензию.

Получите исходный код приложения для чтения веб-штрих-кодов с https://github.com/dynamsoft-dbr/javascript-barcode/tree/master/examples/webworker/6.4.1.1.

Скопируйте dbr-6.5.0.2.min.js и dbr-6.5.0.2.wasm в корневой каталог проекта.

Стандартное прогрессивное веб-приложение должно соответствовать следующим критериям:

Хостинг через HTTPS.
Включите файл веб-манифеста.
Зарегистрируйте сервисного работника.

Создайте файл манифеста manifest.json:

С помощью файла манифеста ваше приложение может быть установлено на домашний экран Android и запущено как собственное приложение.

Создайте файл service-worker.js:

Приведенный выше код JavaScript кэширует все ресурсы, необходимые веб-приложению для работы в автономном режиме.

Зарегистрируйте сервис-воркер в app.js:

Теперь вы можете протестировать проект PWA с помощью Веб-сервера для Chrome или других веб-серверов. Две вещи, которые вы должны знать:

Проект опирается на файл wasm. Веб-сервер для Chrome может хорошо работать с файлом wasm. Для других веб-серверов необходимо добавить MIME-тип «application/wasm» в файл веб-конфигурации.
Поскольку веб-сервер для Chrome не поддерживает HTTPS, вы не сможете добавить считыватель штрих-кода PWA на главный экран Android.

Предлагаемый способ — отправить код на GitHub и активировать страницу GitHub в настройках репозитория. Затем перейдите на страницу своего проекта через https://‹GitHub ID›.github.io/‹Project Name›/.

Попробуйте мой считыватель штрих-кодов PWA.