Утечки персональных данных в России бьют все рекорды. За два года их совокупное число выросло – только вдумайтесь – в 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 будут получать всё больший функционал, всё сильнее приближаясь по удобству к нативным приложениям, позволяя обеспечить клиентам с разными мобильными ОС одинаковый пользовательский опыт и не уступающую обычным приложениям функциональность.
