Scopri in che modo il passaggio alle PWA ha aiutato l'attività di MishiPay.
MishiPay consente agli acquirenti di scansionare i loro acquisti e di pagare con lo smartphone, invece di sprecare tempo a fare la coda al momento del pagamento. Con la tecnologia Scan & Go di MishiPay, gli acquirenti possono utilizzare il proprio telefono per scansionare il codice a barre sugli articoli e pagare, quindi lasciare il negozio. Gli studi rivelano che la coda in negozio costa al settore retail circa 200 miliardi di dollari all'anno.
La nostra tecnologia si basa sulle funzionalità hardware dei dispositivi, come fotocamere e sensori GPS, che consentono agli utenti di individuare i negozi abilitati per MishiPay, eseguire la scansione dei codici a barre degli articoli all'interno del negozio fisico e pagare con il metodo di pagamento digitale che preferiscono. Le versioni iniziali della nostra tecnologia Scan & Go erano applicazioni iOS e Android specifiche per piattaforma, e i primi utenti hanno apprezzato questa tecnologia. Continuate a leggere per scoprire come il passaggio a una PWA ha aumentato le transazioni di 10 volte e ha risparmiato 2,5 anni di coda.
10×
Aumento delle transazioni
2,5 anni
Coda salvata
Sfida
Gli utenti trovano la nostra tecnologia estremamente utile quando sono in attesa in coda o in fila per il pagamento, in quanto consente loro di saltare la coda e di avere un'esperienza in negozio senza problemi. Ma la seccatura di scaricare un'applicazione per Android o iOS spinge gli utenti a scegliere la nostra tecnologia, nonostante il suo valore. Per MishiPay era una sfida crescente e dovevamo aumentare l'adozione da parte degli utenti riducendo le barriere di accesso.
Soluzione
I nostri sforzi nella creazione e nel lancio della PWA ci hanno aiutato a rimuovere i problemi di installazione e hanno incoraggiato i nuovi utenti a provare la nostra tecnologia in un negozio fisico, a saltare la coda e a usufruire di un'esperienza di acquisto fluida. Dal lancio, abbiamo registrato un enorme aumento nell'adozione da parte degli utenti della nostra PWA rispetto alle nostre applicazioni specifiche della piattaforma.
Approfondimento tecnico
Localizzare i negozi abilitati per MishiPay
Per abilitare questa funzionalità, ci affidiamo all'API getCurrentPosition() e a una soluzione di riserva basata su 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,
);
Questo approccio ha funzionato bene nelle versioni precedenti dell'app, ma in seguito si è rivelato un enorme problema per gli utenti di MishiPay per i seguenti motivi:
- Inesattezze relative alla località nelle soluzioni di riserva basate sull'IP.
- Sempre più negozi abilitati per MishiPay per area geografica richiedono agli utenti di scorrere un elenco e identificare il negozio corretto.
- A volte gli utenti scelgono accidentalmente il negozio sbagliato e questo comporta la registrazione errata degli acquisti.
Per risolvere questi problemi, abbiamo incorporato codici QR geolocalizzati univoci sui espositori dei negozi di ciascun negozio. Ha aperto la strada a un'esperienza di onboarding più rapida. Per accedere all'applicazione web Scan & Go, gli utenti devono semplicemente scansionare i codici QR geolocalizzati stampati sul materiale di marketing presente nei negozi.
In questo modo, possono evitare di digitare l'indirizzo web mishipay.shop per accedere al servizio.
Scansione dei prodotti
Una funzionalità principale dell'app MishiPay è la scansione del codice a barre, in quanto consente agli utenti di scansionare i propri acquisti e vedere il totale corrente ancora prima di raggiungere un registratore di cassa.
Per creare un'esperienza di scansione sul web, abbiamo identificato tre livelli principali.
Video stream
Con l'aiuto del metodo getUserMedia(), possiamo accedere alla fotocamera posteriore dell'utente con i vincoli elencati di seguito. La chiamata del metodo attiva automaticamente una richiesta per gli utenti di accettare o negare l'accesso alla fotocamera. Una volta ottenuto
l'accesso al video stream, possiamo inoltrarlo a un elemento video come mostrato di seguito:
/**
* 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!!`);
}
}
Livello di elaborazione
Per rilevare un codice a barre in un determinato video stream, dobbiamo acquisire periodicamente i frame e trasferirli al livello decoder. Per acquisire un fotogramma, disegnamo semplicemente gli stream da VideoElement su un HTMLCanvasElement utilizzando il metodo drawImage() dell'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');
}
}
Per casi d'uso avanzati, questo livello esegue anche alcune attività di pre-elaborazione, come il ritaglio, la rotazione o la conversione in scala di grigi. Queste attività possono richiedere molto impiego di CPU e causare la mancata risposta da parte dell'applicazione poiché la scansione del codice a barre è un'operazione a lunga esecuzione. Con l'aiuto dell'API OffscreenCanvas, possiamo trasferire l'attività che richiede molta CPU a un web worker. Sui dispositivi che supportano l'accelerazione grafica hardware, l'API WebGL e la sua WebGL2RenderingContext possono ottimizzare i guadagni sulle attività di pre-elaborazione che richiedono un uso intensivo della CPU.
Livello decoder
L'ultimo livello è quello decoder, responsabile della decodifica dei codici a barre dai frame
acquisiti dal livello di elaborazione. Grazie all'API Shape Detection (non ancora disponibile su tutti i browser) il browser stesso decodifica il codice a barre da un elemento ImageBitmapSource, che può essere un elemento img, un elemento image SVG, un elemento video, un elemento canvas, un oggetto Blob, un oggetto ImageData o un oggetto 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;
}
}
Per i dispositivi che non supportano ancora l'API Shape Detection, è necessaria una soluzione di riserva per
decodificare i codici a barre. L'API Shape Detection espone un metodo
getSupportedFormats()
che consente di passare dall'API Shape Detection alla soluzione di fallback.
// Feature detection.
if (!('BarceodeDetector' in window)) {
return;
}
// Check supported barcode formats.
BarcodeDetector.getSupportedFormats()
.then((supportedFormats) => {
supportedFormats.forEach((format) => console.log(format));
});
Soluzione di riserva
Sono disponibili diverse librerie di scansione open source e aziendali che possono essere facilmente integrate con qualsiasi applicazione web per implementare l'analisi. Ecco alcune delle librerie consigliate da MishiPay.
Tutte le librerie di cui sopra sono SDK completi che compongono tutti i livelli discussi sopra. Inoltre, espongono interfacce per supportare varie operazioni di scansione. A seconda dei formati dei codici a barre e della velocità di rilevamento necessarie per il business case, la decisione può decidere tra soluzioni Wasm e non Wasm. Nonostante il sovraccarico dovuto alla necessità di una risorsa aggiuntiva (Wasm) per decodificare il codice a barre, le soluzioni Wasm offrono prestazioni migliori della soluzione non Wasm in termini di precisione.
Scandit è stata la nostra scelta principale. Supporta tutti i formati di codici a barre richiesti per i nostri casi d'uso aziendali; batte tutte le librerie open source disponibili in termini di velocità di scansione.
Il futuro della scansione
Una volta che l'API Shape Detection sarà pienamente supportata da tutti i principali browser, potremmo avere un
nuovo elemento HTML <scanner> con le funzionalità necessarie per un lettore di codici a barre. Engineering di MishiPay ritiene che esista un buon caso d'uso che la funzionalità di scansione del codice a barre sia un nuovo elemento HTML a causa del crescente numero di librerie open source e autorizzate che consentono esperienze come Scan & Go e molte altre.
Conclusione
L'affaticamento legato alle app è un problema che gli sviluppatori devono affrontare quando i loro prodotti entrano nel mercato. Gli utenti spesso vogliono capire il valore offerto da un'applicazione prima di scaricarla. In un negozio in cui MishiPay fa risparmiare tempo agli acquirenti e migliora la loro esperienza, è controintuitivo attendere il download prima di poter utilizzare un'applicazione. È qui che è utile la nostra PWA. Eliminando le barriere all'ingresso, abbiamo aumentato le transazioni di 10 volte e consentito ai nostri utenti di risparmiare 2,5 anni di attesa.
Ringraziamenti
Questo articolo è stato esaminato da Joe Medley.