MishiPay – PWA erhöht die Zahl der Transaktionen um das Zehnfache und spart 2,5 Jahre Warteschlangen

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> <ph type="x-smartling-placeholder">
</ph> Vergleich des direkten Starts der PWA (links, schneller) im Vergleich zum Installieren und Starten der Android-App (rechts, langsamer).
<ph type="x-smartling-placeholder">
</ph> Transaktionen nach Plattform. ¡OS: 16.397 (3,98%). Android: 13.769 (3,34%) Web: 382184 (92,68%) <ph type="x-smartling-placeholder">
</ph> Die meisten Transaktionen finden im Web statt.

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.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Scannen im Geschäft mithilfe der PWA.

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.

Diagramm mit den drei Hauptthreadebenen: Videostream, Verarbeitungsschicht und Decoderebene.

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.

Diagramm mit den drei Ebenen des Hauptthreads: Videostream, Verarbeitungsebene und Shape Detection API.

/**
 * 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));
});

Flussdiagramm, das zeigt, wie je nach Barcode-Detektor-Unterstützung und den unterstützten Barcode-Formaten entweder die Shape Detection API oder die Fallback-Lösung verwendet wird.

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.

<ph type="x-smartling-placeholder">
Name der Bibliothek Typ Wasm-Lösung Barcodeformate
QuaggaJs Open Source Nein 1 T.
ZxingJs Open Source Nein 1D & 2D (eingeschränkt)
CodeCorp Unternehmen Ja 1D & 2D
Scandit Unternehmen Ja 1D & 2D
</ph> Open-Source- und kommerzielle Barcode-Scannerbibliotheken im Vergleich

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.