Scopri come il passaggio alla PWA ha aiutato l'attività di MishiPay.
MishiPay consente agli acquirenti di scansionare e pagare gli acquisti con i propri smartphone, anziché perdendo tempo in coda al momento del pagamento. Con la funzionalità Scansione e Go, Gli acquirenti possono utilizzare il proprio telefono per scansionare il codice a barre degli articoli e pagare, poi lasciare nel negozio. Studi rivelano che l'accodamento in negozio costa al settore retail globale circa 200 miliardi di dollari all'anno.
La nostra tecnologia si basa su funzionalità hardware dei dispositivi, come sensori e fotocamere GPS, che consentono agli utenti di individuare i negozi abilitati per MishiPay, scansionare i codici a barre degli articoli nel negozio fisico e quindi pagare utilizzando il metodo di pagamento digitale che preferiscono. Le versioni iniziali del nostro programma Tecnologia Go erano applicazioni iOS e Android specifiche della piattaforma e i primi utenti adoravano questa tecnologia. Letto per scoprire come il passaggio a una PWA ha aumentato le transazioni di 10 volte e ha risparmiato 2,5 anni di fare la coda.
10×
Aumento delle transazioni
2,5 anni
Coda salvata
Sfida
Gli utenti trovano la nostra tecnologia estremamente utile quando si attendono in coda o in fila per il pagamento, in quanto consente a saltare la coda e a usufruire di un'esperienza fluida in negozio. Ma la seccatura di scaricare un Un'applicazione per Android o iOS ha fatto sì che gli utenti non scegliessero la nostra tecnologia nonostante il valore. Stava crescendo sfida per MishiPay e dovevamo aumentare l'adozione da parte degli utenti con una barriera di accesso più bassa.
Soluzione
I nostri sforzi nella creazione e nel lancio della PWA ci hanno aiutato a eliminare i problemi di installazione e incoraggiato i nuovi utenti a provare la nostra tecnologia in un negozio fisico, a saltare la coda e a un'esperienza di acquisto ottimale. Dal lancio, abbiamo assistito a un enorme picco nell'adozione da parte degli utenti con la nostra PWA rispetto alle nostre applicazioni specifiche per piattaforma.
Approfondimento tecnico
Individuazione dei negozi abilitati per MishiPay in corso...
Per abilitare questa funzione, ci affidiamo alle
getCurrentPosition()
insieme 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 funzionava bene nelle versioni precedenti dell'app, ma in seguito si è dimostrato un problema enorme punto di accesso per gli utenti di MishiPay per i seguenti motivi:
- Imprecisioni relative alla località nelle soluzioni di fallback basate su IP.
- La presenza di un elenco crescente di negozi abilitati per MishiPay per regione richiede agli utenti di scorrere un elenco e identificare il negozio corretto.
- A volte gli utenti scelgono per errore il negozio sbagliato e di conseguenza gli acquisti vengono registrati non è corretto.
Per risolvere questi problemi, abbiamo incorporato codici QR univoci geolocalizzati sulle espositori in negozio di ogni
. Ha aperto la strada a un'esperienza di onboarding più rapida. Gli utenti devono semplicemente scansionare il codice QR geolocalizzato
stampati su materiali di marketing presenti nei negozi per accedere al Applicazione web Go.
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, che consente agli utenti di scansionare il proprio i propri acquisti e vedere il totale corrente ancor prima di aver raggiunto registro.
Per creare un'esperienza di scansione sul web, abbiamo identificato tre strati fondamentali.
Stream video
Con l'aiuto dei
getUserMedia(),
può accedere alla fotocamera di retrovisione dell'utente con i vincoli elencati di seguito. Richiamo del metodo
attiva automaticamente una richiesta agli utenti di accettare o negare l'accesso alla fotocamera. Una volta che abbiamo
allo stream video, 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 stream video, dobbiamo acquisire periodicamente fotogrammi e trasferire
al livello decoder. Per acquisire un fotogramma, basta trascinare gli stream da VideoElement a
un HTMLCanvasElement tramite
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 strato esegue anche alcune attività di pre-elaborazione come ritaglio,
ruotare o convertire in scala di grigi. Queste attività possono richiedere molta CPU e portare all'applicazione
non risponde poiché la scansione dei codici a barre è un'operazione a lunga esecuzione. Con l'aiuto dei
API OffscreenCanvas, possiamo
un'attività ad alta intensità di CPU per un worker web. Sui dispositivi che supportano l'accelerazione grafica hardware,
L'API WebGL e relative
WebGL2RenderingContext può
ottimizzare i guadagni derivanti dalle attività di pre-elaborazione che richiedono un uso intensivo della CPU.
Livello decodificatore
L'ultimo livello è lo strato decoder, responsabile della decodifica dei codici a barre dai frame
acquisiti dal livello di elaborazione. Grazie a
L'API Shape Detection (che è
non ancora disponibile su tutti i browser), il browser stesso decodifica il codice a barre da una
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, abbiamo bisogno di una soluzione di riserva per la decodifica
i codici a barre. L'API Shape Detection espone una
getSupportedFormats()
che aiuta a passare dall'API Shape Detection alla soluzione di riserva.
// 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 la scansione. Ecco alcune delle librerie di MishiPay consigliano.
Tutte le librerie precedenti sono SDK completi che compongono tutti i livelli discussi sopra. Inoltre, espongono interfacce per supportare varie operazioni di scansione. In base ai formati dei codici a barre e la velocità di rilevamento necessaria per il business case, la decisione può essere tra Wasm e non-Wasm. Nonostante l'overhead associato alla necessità di utilizzare una risorsa aggiuntiva (Wasm) per decodificare il codice a barre, Wasm offrono un rendimento migliore di quello non Wasm in termini di accuratezza.
Scandit è stata la nostra scelta principale. Supporta tutti i codici a barre formati richiesti per i nostri casi d'uso aziendali; batte tutte le librerie open source disponibili la velocità di scansione.
Il futuro della scansione
Una volta che l'API Shape Detection sarà completamente supportata da tutti i principali browser, potremmo potenzialmente avere una
nuovo elemento HTML <scanner> con le funzionalità necessarie per un lettore di codici a barre. Ingegneria
di MishiPay ritiene che la funzionalità di scansione dei codici a barre sia un nuovo caso d'uso solido
Elemento HTML grazie al numero crescente di librerie open source e concesse in licenza che abilitano
come Scan & Go e tanti altri.
Conclusione
L'affaticamento da app è un problema che gli sviluppatori devono affrontare quando i loro prodotti entrano nel mercato. Gli utenti vogliono spesso per comprendere il valore offerto da un'applicazione prima di scaricarla. In un negozio, in cui Con MishiPay gli acquirenti tempo e migliora la loro esperienza, è controintuitivo aspettare che scaricare prima di poter utilizzare un'applicazione. È qui che la nostra PWA ci aiuta. Eliminando la barriera abbiamo aumentato le transazioni di 10 volte e consentito ai nostri utenti di risparmiare 2, 5 anni di in attesa in coda.
Ringraziamenti
Questo articolo è stato esaminato da Joe Medley.