Hier erfährst du, wie MishiPays Unternehmen von PWAs profitiert.
Mit MishiPay können Käufer ihre Einkäufe mit dem Smartphone scannen und bezahlen, anstatt Zeit damit zu verschwenden, an der Kasse in Schlange zu stehen. Mit der Scan & Go-Technologie von MishiPay können Käufer mit ihrem eigenen Smartphone den Barcode von Artikeln scannen, diese bezahlen und das Geschäft dann einfach verlassen. Studien zufolge kostet Warteschlangen in Geschäften den globalen Einzelhandel pro Jahr etwa 200 Milliarden $.
Unsere Technologie basiert auf Funktionen der Gerätehardware wie GPS-Sensoren und -Kameras, mit denen Nutzer MishiPay-fähige Geschäfte finden, Artikelbarcodes im Ladengeschäft scannen und dann mit der digitalen Zahlungsmethode ihrer Wahl bezahlen können. Die ersten Versionen unserer Scan & Go-Technologie waren plattformspezifische iOS- und Android-Apps und die ersten Nutzer waren von der Technologie begeistert. Lesen Sie weiter, um zu erfahren, wie Sie durch den Wechsel zu einer PWA die Transaktionen um das Zehnfache steigern und 2,5 Jahre Warteschlangen einsparen konnten.
10×
Mehr Transaktionen
2,5 Jahre
Wiedergabeliste gespeichert
Herausforderung
Nutzer finden unsere Technologie besonders hilfreich, wenn sie an der Schlange stehen oder an der Kasse warten müssen, da sie damit die Warteschlangen überspringen und ein reibungsloses Einkaufserlebnis im Ladengeschäft genießen können. Aufgrund des mühsamen Herunterladens der Android- oder iOS-App haben sich die Nutzer trotzdem für unsere Technologie verzichtet. MishiPay war eine wachsende Herausforderung und wir mussten die Akzeptanz bei den Nutzern mit einer geringeren Einstiegsbarriere erhöhen.
Lösung
Durch unsere Bemühungen bei der Entwicklung und Einführung der PWA konnten wir den Installationsaufwand reduzieren und neue Nutzer dazu anregen, unsere Technologie in einem Geschäft auszuprobieren, die Warteschlange zu überspringen und ein nahtloses Einkaufserlebnis zu bieten. Seit der Einführung haben wir einen enormen Anstieg der Nutzerakzeptanz für unsere PWA im Vergleich zu unseren plattformspezifischen Anwendungen verzeichnet.
Technische Details
MishiPay-kompatible Geschäfte finden
Zur Aktivierung dieser Funktion verwenden wir die getCurrentPosition() API zusammen mit 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, erwies sich jedoch aus folgenden Gründen als großes Problem für Nutzer von MishiPay:
- Standortabweichungen in IP-basierten Fallback-Lösungen.
- Bei einer wachsenden Liste von MishiPay-fähigen Geschäften pro Region müssen Nutzer durch eine Liste scrollen, um das richtige Geschäft zu finden.
- Nutzer wählen gelegentlich aus Versehen das falsche Geschäft aus, wodurch die Käufe falsch erfasst werden.
Um diese Probleme zu beheben, haben wir eindeutige, geografisch platzierte QR-Codes auf den Auslagen der einzelnen Geschäfte eingefügt. Es ebnete den Weg für ein schnelleres Onboarding. Nutzer scannen einfach die standortbezogenen QR-Codes, die auf Marketingmaterialien in den Geschäften aufgedruckt sind, um auf die Scan & Go-Webanwendung zuzugreifen.
So müssen sie nicht die Webadresse mishipay.shop eingeben, um auf den Dienst zuzugreifen.
Produkte scannen
Eine Kernfunktion der MishiPay App ist das Scannen von Barcodes. So können unsere Nutzer ihre eigenen Käufe scannen und die laufende Summe sehen, noch bevor sie an der Kasse angezeigt werden.
Um das Web optimal zu scannen, haben wir drei Hauptebenen identifiziert.
Videostream
Mit der Methode getUserMedia() können wir mit den unten aufgeführten Einschränkungen auf die Rückkamera des Nutzers zugreifen. Wenn die Methode aufgerufen wird, werden Nutzer automatisch aufgefordert, den Zugriff auf ihre Kamera zu akzeptieren oder zu verweigern. Sobald wir Zugriff auf den Videostream haben, 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!!`);
}
}
Verarbeitungsschicht
Um einen Barcode in einem bestimmten Videostream zu erkennen, müssen regelmäßig Frames erfasst und in die Decodiererschicht übertragen werden. Um einen Frame zu erfassen, zeichnen wir einfach die Streams aus VideoElement mit der Methode drawImage() der Canvas API auf ein HTMLCanvasElement.
/**
* 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');
}
}
Für erweiterte Anwendungsfälle führt diese Ebene auch einige Vorverarbeitungsaufgaben wie das Zuschneiden, Drehen oder Konvertieren in Graustufen aus. Diese Aufgaben können CPU-intensiv sein und dazu führen, dass die Anwendung nicht reagiert, da das Scannen des Barcodes ein lang andauernder Vorgang ist. Mithilfe der OffscreenCanvas API können wir die CPU-intensive Aufgabe auf einen Web Worker auslagern. Auf Geräten, die Hardwaregrafikbeschleunigung unterstützen, können die WebGL API und ihr WebGL2RenderingContext die Leistungssteigerungen bei den CPU-intensiven Vorverarbeitungsaufgaben optimieren.
Decoder-Ebene
Die letzte Schicht ist die Decoder Schicht, die für die Decodierung von Barcodes aus den von der Verarbeitungsschicht erfassten Frames verantwortlich ist. Dank der Shape Detection API, die noch nicht in allen Browsern verfügbar ist, decodiert der Browser den Barcode selbst aus einem ImageBitmapSource-Element. Das kann ein img-, ein SVG-image-, video-, canvas-, Blob-Objekt-, ImageData- oder ImageBitmap-Objekt sein.
/**
* 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 bietet eine getSupportedFormats()-Methode, mit der Sie zwischen der Shape Detection API und der Fallback-Lösung wechseln können.
// 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 sind verschiedene Open-Source- und Enterprise-Scanbibliotheken verfügbar, die sich zum Implementieren des Scanvorgangs einfach in jede Webanwendung einbinden lassen. Hier sind einige der von MishiPay empfohlenen Bibliotheken.
Alle oben genannten Bibliotheken sind vollwertige SDKs, aus denen alle oben beschriebenen Schichten bestehen. Sie stellen auch Schnittstellen zur Unterstützung verschiedener Scanvorgänge bereit. Abhängig von den Barcodeformaten und der Erkennungsgeschwindigkeit, die für den Business Case erforderlich sind, kann zwischen Wasm- und Nicht-Wasm-Lösungen entschieden werden. Trotz des Mehraufwands, den eine zusätzliche Ressource (Wasm) zum Decodieren des Barcodes erforderlich ist, schneiden Wasm-Lösungen in Bezug auf die Genauigkeit von anderen Lösungen als der Nicht-Wasm-Lösung ab.
Unsere erste Wahl war Scandit. Die Software unterstützt alle Barcodeformate, die für unsere geschäftlichen Anwendungsfälle erforderlich sind, und ist in Sachen Scangeschwindigkeit schneller als alle verfügbaren Open-Source-Bibliotheken.
Die Zukunft des Scannens
Sobald die Shape Detection API von allen gängigen Browsern vollständig unterstützt wird, könnten wir ein neues HTML-Element <scanner> mit den für einen Barcode-Scanner erforderlichen Funktionen einführen. Das Engineering-Team von MishiPay ist der Meinung, dass die Barcode-Scanfunktion aufgrund der wachsenden Anzahl von Open-Source- und lizenzierten Bibliotheken, die Erfahrungen wie Scan & Go und viele andere ermöglichen, ein solider Anwendungsfall für die Funktion zum Scannen von Barcodes sein wird.
Fazit
Wenn Entwickler ihre Produkte auf dem Markt einführen, treten häufig vor, dass Apps „müde“. Nutzer möchten oft wissen, welchen Wert Apps ihnen bieten, bevor sie sie herunterladen. In einem Geschäft, in dem MishiPay den Kunden Zeit spart und die Nutzerfreundlichkeit verbessert, ist es nicht intuitiv, auf einen Download zu warten, bevor die Nutzer eine Anwendung verwenden können. Unsere PWA hilft dabei. Durch den Wegfall der Zugangsbarriere haben wir unsere Transaktionen um das Zehnfache erhöht und unseren Nutzern ermöglicht, 2,5 Jahre Wartezeit in der Warteschlange zu sparen.
Danksagungen
Dieser Artikel wurde von Joe Medley geprüft.