Découvrez comment le passage à une PWA a aidé MishiPay à développer son activité.
MishiPay permet aux clients de scanner leurs achats et de payer avec leur smartphone, au lieu de perdre du temps à faire la queue au moment du paiement. Grâce à la technologie Scan & Go de MishiPay, les clients peuvent utiliser leur propre téléphone pour scanner le code-barres des articles et les payer, puis quitter le magasin. Des études révèlent que la mise en file d'attente en magasin coûte environ 200 milliards de dollars par an au secteur mondial du commerce.
Notre technologie repose sur les fonctionnalités matérielles de l'appareil, telles que les capteurs et les caméras GPS, qui permettent aux utilisateurs de localiser les magasins équipés de MishiPay, de scanner les codes-barres des articles dans le magasin physique, puis de payer à l'aide du mode de paiement numérique de leur choix. Les premières versions de notre technologie Scan & Go étaient des applications iOS et Android spécifiques à une plate-forme, et les premiers utilisateurs l'ont particulièrement appréciée. Découvrez comment passer à une PWA a permis de multiplier les transactions par 10 et d'économiser 2,5 ans de mise en file d'attente.
10×
Augmentation du nombre de transactions
2,5 ans
Mise en file d'attente enregistrée
Défi
Les utilisateurs trouvent notre technologie extrêmement utile lorsqu'ils font la queue ou acheminent la commande, car elle leur permet d'éviter la file d'attente et de bénéficier d'une expérience fluide en magasin. Cependant, les utilisateurs n'ont pas choisi notre technologie malgré son intérêt, car le téléchargement d'une application Android ou iOS était compliqué. Il s'agissait d'un défi croissant pour MishiPay, et nous devions augmenter l'adoption par les utilisateurs tout en réduisant l'obstacle à l'entrée.
Solution
Les efforts que nous avons déployés pour créer et lancer la PWA nous ont aidés à éliminer les problèmes d'installation et à inciter les nouveaux utilisateurs à essayer notre technologie dans un magasin physique, à éviter la file d'attente et à bénéficier d'une expérience d'achat fluide. Depuis le lancement, nous avons constaté un pic important de l'adoption de notre PWA par les utilisateurs par rapport à nos applications spécifiques à la plate-forme.
Analyse technique détaillée
Localiser des magasins compatibles avec MishiPay
Pour activer cette fonctionnalité, nous utilisons l'API getCurrentPosition() ainsi qu'une solution de remplacement basée sur les adresses IP.
const geoOptions = {
timeout: 10 * 1000,
enableHighAccuracy: true,
maximumAge: 0,
};
window.navigator.geolocation.getCurrentPosition(
(position) => {
const cords = position.coords;
console.log(`Latitude : ${cords.latitude}`);
console.log(`Longitude : ${cords.longitude}`);
},
(error) => {
console.debug(`Error: ${error.code}:${error.message}`);
/**
* Invoke the IP based location services
* to fetch the latitude and longitude of the user.
*/
},
geoOptions,
);
Cette approche a bien fonctionné dans les versions précédentes de l'application, mais elle s'est par la suite avérée être un énorme problème pour les utilisateurs de MishiPay, pour les raisons suivantes:
- Localisation inexacte dans les solutions de remplacement basées sur l'adresse IP.
- Le nombre croissant de magasins compatibles avec MishiPay par région oblige les utilisateurs à faire défiler une liste et à identifier le magasin approprié.
- Parfois, les utilisateurs choisissent accidentellement le mauvais magasin, ce qui entraîne un enregistrement incorrect des achats.
Pour résoudre ces problèmes, nous avons intégré des codes QR uniques et géolocalisés sur les présentoirs de chaque magasin. Elle a ouvert la voie à une expérience d'intégration plus rapide. Il leur suffit de scanner les codes QR géolocalisés imprimés sur les supports marketing présents dans les magasins pour accéder à l'application Web Scan & Go.
De cette façon, il leur évitera de saisir l'adresse Web mishipay.shop pour accéder au service.
Scanner des produits
L'une des fonctionnalités essentielles de l'application MishiPay est la lecture de codes-barres, car elle permet à nos utilisateurs de scanner leurs propres achats et de voir le total cumulé avant même qu'ils n'atteignent la caisse enregistreuse.
Pour créer une expérience d'analyse sur le Web, nous avons identifié trois couches principales.
Flux vidéo
La méthode getUserMedia() nous permet d'accéder à la caméra de recul de l'utilisateur avec les contraintes listées ci-dessous. L'appel de cette méthode déclenche automatiquement une invite l'invitant à accepter ou refuser l'accès à sa caméra. Une fois que nous avons accès au flux vidéo, nous pouvons le transmettre à un élément vidéo, comme indiqué ci-dessous:
/**
* Video Stream Layer
* https://developer.mozilla.org/docs/Web/API/MediaDevices/getUserMedia
*/
const canvasEle = document.getElementById('canvas');
const videoEle = document.getElementById('videoElement');
const canvasCtx = canvasEle.getContext('2d');
fetchVideoStream();
function fetchVideoStream() {
let constraints = { video: { facingMode: 'environment' } };
if (navigator.mediaDevices !== undefined) {
navigator.mediaDevices
.getUserMedia(constraints)
.then((stream) => {
videoEle.srcObject = stream;
videoStream = stream;
videoEle.play();
// Initiate frame capture - Processing Layer.
})
.catch((error) => {
console.debug(error);
console.warn(`Failed to access the stream:${error.name}`);
});
} else {
console.warn(`getUserMedia API not supported!!`);
}
}
Couche de traitement
Pour détecter un code-barres dans un flux vidéo donné, nous devons capturer périodiquement des images et les transférer à la couche du décodeur. Pour capturer un frame, il suffit de dessiner les flux de VideoElement sur un HTMLCanvasElement à l'aide de la méthode drawImage() de l'API Canvas.
/**
* Processing Layer - Frame Capture
* https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas
*/
async function captureFrames() {
if (videoEle.readyState === videoEle.HAVE_ENOUGH_DATA) {
const canvasHeight = (canvasEle.height = videoEle.videoHeight);
const canvasWidth = (canvasEle.width = videoEle.videoWidth);
canvasCtx.drawImage(videoEle, 0, 0, canvasWidth, canvasHeight);
// Transfer the `canvasEle` to the decoder for barcode detection.
const result = await decodeBarcode(canvasEle);
} else {
console.log('Video feed not available yet');
}
}
Pour les cas d'utilisation avancés, cette couche effectue également certaines tâches de prétraitement telles que le recadrage, la rotation ou la conversion en niveaux de gris. Ces tâches peuvent solliciter une utilisation intensive du processeur et empêcher l'application de répondre, car la lecture de codes-barres est une opération de longue durée. L'API OffscreenCanvas nous permet de déléguer la tâche nécessitant une utilisation intensive du processeur à un nœud de calcul Web. Sur les appareils compatibles avec l'accélération graphique matérielle, l'API WebGL et son WebGL2RenderingContext peuvent optimiser les gains pour les tâches de prétraitement qui utilisent de manière intensive le processeur.
Couche du décodeur
La dernière couche est la couche du décodeur, chargée de décoder les codes-barres à partir des trames capturées par la couche de traitement. Grâce à l'API Shape Detection (qui n'est pas encore disponible dans tous les navigateurs), le navigateur décode lui-même le code-barres à partir d'un élément ImageBitmapSource, qui peut être un élément img, un élément SVG image, un élément video, un élément canvas, un objet Blob, un objet ImageData ou un objet ImageBitmap.
/**
* Barcode Decoder with Shape Detection API
* https://web.dev/shape-detection/
*/
async function decodeBarcode(canvas) {
const formats = [
'aztec',
'code_128',
'code_39',
'code_93',
'codabar',
'data_matrix',
'ean_13',
'ean_8',
'itf',
'pdf417',
'qr_code',
'upc_a',
'upc_e',
];
const barcodeDetector = new window.BarcodeDetector({
formats,
});
try {
const barcodes = await barcodeDetector.detect(canvas);
console.log(barcodes);
return barcodes.length > 0 ? barcodes[0]['rawValue'] : undefined;
} catch (e) {
throw e;
}
}
Pour les appareils qui ne sont pas encore compatibles avec l'API Shape Detection, nous avons besoin d'une solution de remplacement pour décoder les codes-barres. L'API Shape Detection expose une méthode getSupportedFormats() qui permet de basculer entre l'API Shape Detection et la solution de remplacement.
// Feature detection.
if (!('BarceodeDetector' in window)) {
return;
}
// Check supported barcode formats.
BarcodeDetector.getSupportedFormats()
.then((supportedFormats) => {
supportedFormats.forEach((format) => console.log(format));
});
Solution de remplacement
Plusieurs bibliothèques d'analyse Open Source et professionnelles sont disponibles. Elles peuvent être facilement intégrées à n'importe quelle application Web pour mettre en œuvre l'analyse. Voici quelques-unes des bibliothèques recommandées par MishiPay.
Toutes les bibliothèques ci-dessus sont de véritables SDK qui composent toutes les couches décrites ci-dessus. Ils exposent également des interfaces permettant diverses opérations d'analyse. En fonction des formats de code-barres et de la vitesse de détection nécessaires pour l'analyse de rentabilisation, une décision peut être faite entre des solutions Wasm et d'autres solutions. Malgré les frais généraux liés à la nécessité d'une ressource supplémentaire (Wasm) pour décoder le code-barres, les solutions Wasm offrent de meilleures performances que la solution non-Wasm en termes de précision.
Scandit a été notre choix principal. Il est compatible avec tous les formats de code-barres requis pour nos cas d'utilisation professionnels et surpasse toutes les bibliothèques Open Source disponibles en termes de vitesse de balayage.
L'avenir de l'analyse
Une fois que l'API Shape Detection sera entièrement prise en charge par tous les principaux navigateurs, nous pourrons peut-être disposer d'un nouvel élément HTML <scanner> doté des fonctionnalités requises pour un lecteur de code-barres. Chez MishiPay, les ingénieurs estiment qu'il existe un bon cas d'utilisation de la fonctionnalité de lecture de codes-barres en tant que nouvel élément HTML en raison du nombre croissant de bibliothèques Open Source et sous licence qui permettent d'utiliser des expériences telles que Scan & Go et bien d'autres.
Conclusion
L'essoufflement des applications est un problème auquel les développeurs sont confrontés lorsque leurs produits arrivent sur le marché. Les utilisateurs souhaitent souvent comprendre les avantages qu'une application leur apporte avant de la télécharger. Dans un magasin où MishiPay fait gagner du temps aux acheteurs et améliore leur expérience, il est paradoxal d'attendre un téléchargement avant de pouvoir utiliser une application. C'est là que notre PWA aide. En éliminant ces obstacles, nous avons multiplié nos transactions par 10 et nous avons permis à nos utilisateurs de gagner 2,5 ans d'attente.
Remerciements
Cet article a été examiné par Joe Medley.