Распознаем паспорт РФ в PWA: быстро, качественно, без сервисов/без утечек

Утечки персональных данных в России бьют все рекорды. За два года их совокупное число выросло – только вдумайтесь – в 40 раз. В 2021-м году таких инцидентов было всего четыре, в 2022 – свыше 140, а за первые семь месяцев 2023 года – уже 150.

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

Между тем, есть еще один способ ввода данных из документов – прямо на устройстве, без необходимости отправлять куда-то картинку. Он полностью исключает риск любой утечки. Речь идет о нашем мобильном SDK для распознавания паспорта. О том, как мы внедрили наш SDK в PWA (progressive web app), читайте под катом.

Прогрессивные веб приложения — технология, позволяющая сайту в браузере вашего смартфона стать похожим на нативное приложение. Иметь иконку на экране смартфона после установки, иметь сравнимую отзывчивость интерфейса, хранить кэш и “тяжёлые” с точки зрения скорости загрузки с сервера ресурсы прямо на клиентском устройстве и за счёт этого работать в офлайне, иметь доступ к железу и его вычислительным мощностям. Особым преимуществом PWA является избавление от необходимости размещаться в сторах приложений: если Android позволяет скачивать apk файл из любого источника, то в случае с iOS установить приложение можно только из официального стора, а PWA позволяют не заморачиваться с этим.

Вместе с популярностью PWA каждый год растёт и улучшается поддержка браузерами технологии WebAssembly.  WebAssembly позволяет использовать движок браузера для выполнения тяжелых с точки  зрения вычислений задач, в том числе по анализу изображений. Мы давно занимаемся развитием наших продуктов в этом направлении, благодаря WASM мы успешно распознаем баркоды, банковские карты, документы, счета, номера телефонов внутри браузера клиентского устройства. Работа с WASM позволяет вывести PWA на новый уровень.

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

• банковские карты и баркоды: 3.5mb gzip

• Паспорт РФ, карты и баркоды: 8.3 gzip

Как видите, кеширование WASM-модуля вместе с остальными ресурсами позволяет обойтись без необходимости каждый раз загружать ~8Мб с сервера. Механизм PWA, позволяющий кешировать ресурсы, называется Service Worker. Когда ваш сайт запрашивает ресурсы с сервера даже при отсутствии интернета, Service Worker перехватывает запрос и решает что с ним делать: вернуть ресурс из кеша, запросить по API обновление, вывести сообщение и прочее. Этого достаточно, чтобы ваше приложение могло работать быстрее привычного сайта (если ресурсы возвращаются из локального кеша) и было полностью или частично автономно.

Давайте рассмотрим демо-пример для распознавания паспорта РФ, в котором мы поместим в локальный кэш клиентского браузера весь сайт вместе с WASM файлами, так, чтобы они теперь загружались из локального кеша всегда. Это позволит работать приложению полностью оффлайн. Наш демо сайт состоит из:

• index.html — разметка страницы.

• app.js — входной скрипт веб страницы. Работа с камерой, передача потока изображений с камеры, отображение результата.

• worker.js — веб-воркер. Скрипт, принимающий поток изображений с камеры и работающий с WASM объектом.

• sw.js — сервис-воркер. Скрипт самого сервис воркера.

• moduleName.js — маленький скрипт, определяющий название WASM сборки для текущего браузера.

В главном скрипте веб страницы производим регистрацию сервисного воркера:

if ("serviceWorker" in navigator) {   navigator.serviceWorker.register("sw.js").then(     (registration) => {       console.log("Service worker registration succeeded:", registration);     },     (error) => {       console.error(Service worker registration failed: ${error});     }   ); } else {   console.error("Service workers are not supported."); }

В сам сервис воркер мы передаем массив адресов, предназначенных для кэширования. Для удобства чтения поделим массивы адресов по группам. Сначала мы добавим сам путь к файлу главной веб-страницы, основной скрипт  и веб-воркер ( именно это веб-воркер, обслуживающий  WASM ). 

// Files to cache const cacheName = 'smartenginesWasm'; const appShellHtml = [   'sample.html',   'app.js',   'worker.js', ];

Потом опишем массив графических ресурсов веб-страницы. Пусть это будут иконки.

const appShellIcons = [   'assets/icons/icon-48x48.png',   'assets/icons/icon-72x72.png',   'assets/icons/icon-96x96.png', ];

А для кэширования WASM файлов нужно сделать небольшое отступление. WASM в принципе поддерживается сейчас почти в любом браузере, однако существует набор оптимизаций, по-разному поддерживаемый современными (в первую очередь мобильными) браузерами (мы писали об этом тут). Поэтому наши WASM модули делятся на три группы, каждая из которых подгружается в зависимости от технологических возможностей браузера. Для их определения через importScripts() мы подключаем крохотный файл, который возвращает нам имя сборки, подходящей для кэширования для текущей среды исполнения:

importScripts('./moduleName.js');  const module =  await getModuleName();  const WasmUrls = {   'nosimd.nothreads': [     'bin/nosimd.nothreads/idengine_wasm.js',     'bin/nosimd.nothreads/idengine_wasm.wasm'   ],   'simd.nothreads': [     'bin/simd.nothreads/idengine_wasm.js',     'bin/simd.nothreads/idengine_wasm.wasm'   ],   'simd.threads': [     'bin/simd.threads/idengine_wasm.js',     'bin/simd.threads/idengine_wasm.wasm',     'bin/simd.threads/idengine_wasm.worker.js'   ], };

Далее мы собираем все адреса в единую кучку, и на событии, когда сервисный воркер готов, подсовываем ее ему:

const all = appShellHtml.concat(appShellIcons).concat(WasmUrls[module])  const cacheName = 'smartenginesWasm';  // Installing Service Worker  self.addEventListener('install', (e) => {   console.log('[Service Worker] Install');   e.waitUntil((async () => {     const cache = await caches.open(cacheName);     console.log('[Service Worker] Caching all: app shell and content');     await cache.addAll(all);   })()); });

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

// Fetching content using Service Worker  self.addEventListener('fetch', (e) => {   e.respondWith((async () => {     const r = await caches.match(e.request);     console.log([Service Worker] Fetching resource: ${e.request.url});                      if (r) return r;        const response = await fetch(e.request);     const cache = await caches.open(cacheName);     console.log([Service Worker] Caching new resource: ${e.request.url});     cache.put(e.request, response.clone());     return response;   })()); }); })()

Теперь же, после первой загрузки веб страницы для ее последующей работы сетевое соединение больше не требуется. Работу подобного PWA-приложения мы продемонстрируем на видео. 

Заключение

Распознавание документов прямо на устройстве, без необходимости куда-то отправлять картинку, имеет ряд неоспоримых преимуществ — всегда доступно, нет необходимости отправлять изображения с персональными данными пользователя на сторонние сервисы, результат распознавания всегда “полнее” и работа с ним гибче, есть возможность поднять качество распознавания, комбинируя результаты распознавания нескольких кадров. К тому же, с развитием различных фреймворков внедрение библиотеки распознавания становится всё проще — эта статья, иллюстрирующая внедрение в PWA, хороший тому пример.

В целом, современные PWA приложения могут во многом заменить классические приложения для мобильных телефонов в случаях когда приложению необходимо соединение с интернетом (допустим, это банковское приложение — вот свежее исследование на Forbes на эту тему). С развитием поддержки WebAssembly PWA будут получать всё больший функционал, всё сильнее приближаясь по удобству к нативным приложениям, позволяя обеспечить клиентам с разными мобильными ОС одинаковый пользовательский опыт и не уступающую обычным приложениям функциональность.