Hier erfährst du, wie MishiPay durch den Wechsel zu PWAs Unternehmen davon profitierte.
MishiPay ermöglicht es Käufern, Einkäufe mit ihrem Smartphone zu scannen und zu bezahlen, anstatt Zeit an der Kasse zu verschwenden. Mit MishiPay Scan & Go-Technologie, Käufer können mit ihrem eigenen Smartphone den Barcode der Artikel scannen und bezahlen. im Geschäft. Studien zeigen, dass Warteschlangen für Ladengeschäfte weltweit kostet der globale Einzelhandelssektor jährlich etwa 200 Milliarden US-Dollar.
Unsere Technologie stützt sich auf Hardwarefunktionen wie GPS-Sensoren und Kameras, können Nutzer MishiPay-fähige Geschäfte finden, Artikel-Barcodes im Geschäft scannen und anschließend bezahlen. mit der digitalen Zahlungsmethode ihrer Wahl. Die ersten Versionen unseres Scan & Go-Technologie waren plattformspezifische iOS- und Android-Anwendungen und die ersten Nutzer mochten die Technologie. Gelesen erfahren Sie, wie der Wechsel zu einer PWA die Zahl der Transaktionen um das 10-Fache steigern und 2,5 Jahre in der Warteschlange!
10×
Mehr Transaktionen
2,5 Jahre
Wiedergabeliste gespeichert
Herausforderung
Unsere Nutzer finden unsere Technologie äußerst hilfreich, wenn sie in der Warteschlange oder beim Auschecken warten, da sie um die Wartezeit zu verkürzen und den Einkauf im Geschäft reibungslos zu gestalten. Aber der mühsame Download eines Dank der Android- und iOS-App haben sich die Nutzer trotz des Mehrwerts nicht für unsere Technologie entschieden. Es war ein wachsender Herausforderung für MishiPay an. Wir mussten die Akzeptanz durch unsere Nutzer mit einer geringeren Einstiegsbarriere erhöhen.
Lösung
Dank unserer Bemühungen, die PWA zu erstellen und auf den Markt zu bringen, neue Nutzer dazu ermutigt haben, unsere Technologie in einem Geschäft auszuprobieren, die Warteschlange zu überspringen und eine ein nahtloses Einkaufserlebnis bieten. Seit der Einführung haben wir einen enormen Anstieg der Nutzerakzeptanz mit unserer PWA im Vergleich zu unseren plattformspezifischen Anwendungen.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Technische Hintergrundinformationen
MishiPay-fähige Geschäfte finden
Um diese Funktion zu aktivieren,
getCurrentPosition()
API und einer IP-basierten Fallback-Lösung.
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,
);
Dieser Ansatz funktionierte in den früheren Versionen der App gut, hat sich aber später als großes Problem erwiesen. für die Nutzer von MishiPay, und zwar aus folgenden Gründen:
- Standortungenauigkeiten in den IP-basierten Fallback-Lösungen.
- Aufgrund der wachsenden Zahl von MishiPay-fähigen Geschäften pro Region müssen Nutzer durch eine Liste scrollen und finden Sie das richtige Geschäft.
- Nutzer wählen gelegentlich versehentlich das falsche Geschäft aus, wodurch die Käufe aufgezeichnet werden falsch.
Um diese Probleme zu beheben, haben wir eindeutige QR-Codes mit geografischer Standortangabe auf den Auslagen im Geschäft eingebettet,
speichern. Sie ebnete den Weg für ein schnelleres Onboarding. Nutzer scannen einfach den geolokalisierten QR-Code
Codes auf Marketingmaterial, das in den Geschäften vorhanden ist, um auf den Scan & Go-Webanwendung.
So müssen sie nicht die Webadresse mishipay.shop eingeben, um auf den Dienst zuzugreifen.
Produkte werden gescannt
Eine Kernfunktion der MishiPay-App ist das Scannen von Barcodes. Damit können unsere Nutzer ihre Käufe tätigen und den laufenden Betrag sehen, noch bevor sie andernfalls einen Barwert erreicht hätten
Um das Scannen im Web zu ermöglichen, haben wir drei Kernebenen identifiziert.
Videostream
Mithilfe des
getUserMedia()-Methode
kann unter den unten aufgeführten Einschränkungen auf die Rückkamera des Nutzers zugreifen. Methode aufrufen
Der Nutzer wird automatisch aufgefordert, den Zugriff auf die Kamera zu akzeptieren oder abzulehnen. Sobald wir
auf den Videostream zugreifen, können wir ihn wie unten gezeigt an ein Videoelement weiterleiten:
/**
* 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!!`);
}
}
Verarbeitungsebene
Um einen Barcode in einem bestimmten Videostream zu erkennen, müssen wir regelmäßig Frames aufnehmen und den
zur Decoderebene hinzufügen. Um einen Frame zu erfassen, zeichnen wir einfach die Streams von VideoElement auf
ein HTMLCanvasElement mithilfe von
drawImage()
der Canvas API.
/**
* 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');
}
}
Bei erweiterten Anwendungsfällen werden
auch einige Vorverarbeitungsaufgaben ausgeführt, z. B. das Zuschneiden,
oder in Graustufen umgewandelt werden. Diese Aufgaben können CPU-intensiv sein und dazu führen,
reagiert nicht, da das Scannen von Barcodes ein lang andauernder Vorgang ist. Mithilfe des
OffscreenCanvas-API, können wir
die CPU-intensive Aufgabe an einen Web Worker übergeben. Auf Geräten, die die Hardwaregrafikbeschleunigung unterstützen,
WebGL API und ihre
WebGL2RenderingContext kann
bei der CPU-intensiven Vorverarbeitung zu optimieren.
Decoder-Ebene
Die letzte Schicht ist die Decoderschicht, die für die Decodierung von Barcodes aus den Frames verantwortlich ist.
die von der Verarbeitungsschicht erfasst werden. Dank der
Shape Detection API (die ist
nicht in allen Browsern verfügbar ist), decodiert der Browser den Barcode
ImageBitmapSource, das ein img-Element, ein SVG-image-Element, ein video-Element, ein
canvas-Element, ein Blob-Objekt, ein ImageData-Objekt oder ein ImageBitmap-Objekt.
/**
* 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;
}
}
Für Geräte, die die Shape Detection API noch nicht unterstützen, benötigen wir eine Fallback-Lösung zum Decodieren
der Barcodes. Die Shape Detection API stellt eine
getSupportedFormats()
, die den Wechsel zwischen der Shape Detection API und der Fallback-Lösung erleichtert.
// Feature detection.
if (!('BarceodeDetector' in window)) {
return;
}
// Check supported barcode formats.
BarcodeDetector.getSupportedFormats()
.then((supportedFormats) => {
supportedFormats.forEach((format) => console.log(format));
});
Fallback-Lösung
Es stehen mehrere Open-Source- und Enterprise-Scanbibliotheken zur Verfügung, die sich leicht integrieren lassen. mit jeder Webanwendung, um das Scannen zu implementieren. Hier sind einige der Bibliotheken, die MishiPay empfehlen.
Alle oben genannten Bibliotheken sind vollwertige SDKs, aus denen alle oben genannten Ebenen bestehen. Außerdem Schnittstellen zur Unterstützung verschiedener Scanvorgänge anzeigen. Je nach Barcodeformat und die für den Business Case benötigt wird, kann eine Entscheidung zwischen Wasm- und Nicht-Wasm-Lösungen getroffen werden. Obwohl für die Decodierung des Barcodes eine zusätzliche Ressource (Wasm) erforderlich ist, konnte Wasm Lösungen in puncto Genauigkeit besser als die Nicht-Wasm-Lösung.
Scandit war unsere primäre Wahl. Alle Barcodes werden unterstützt. Formate, die für unsere geschäftlichen Anwendungsfälle erforderlich sind; es alle verfügbaren Open-Source-Bibliotheken in Scangeschwindigkeit.
Zukunft des Scans
Sobald die Shape Detection API von allen gängigen Browsern vollständig unterstützt wird,
Neues HTML-Element <scanner> mit den Funktionen, die für einen Barcode-Scanner erforderlich sind Ingenieurwesen
MishiPay glaubt, dass es einen soliden Anwendungsfall für die
HTML-Element zu verwenden, da die Zahl der Open-Source- und lizenzierten Bibliotheken stetig zunimmt,
Funktionen wie „Scannen und Go und viele andere
Fazit
Entwickler haben bei der Markteinführung ihrer Produkte mit einer Müdigkeit der App zu kämpfen. Nutzende möchten oft um den Wert einer Anwendung zu verstehen, bevor sie sie herunterladen. In einem Geschäft, in dem MishiPay spart Käufern und die Nutzererfahrung verbessert, ist es unlogisch, auf eine herunterladen, bevor sie eine Anwendung nutzen können. Hier kommt unsere PWA ins Spiel. Durch die Beseitigung der Hürden Wir haben unsere Transaktionen um das 10-Fache gesteigert und unseren Nutzern ermöglicht, 2,5 Jahre an und warten in der Warteschlange.
Danksagungen
Dieser Artikel wurde von Joe Medley geprüft.