PWA MishiPay zwiększa liczbę transakcji 10 razy i pozwala zaoszczędzić 2,5 roku w kolejce

Dowiedz się, jak przejście na PWA pomogło MishiPay w rozwoju działalności.

MishiPay pozwala kupującym skanować produkty i płacić za nie za pomocą smartfona, a nie marnowanie czasu na czekanie w kolejce do kasy. Z pomocą MishiPay Scan & Technologia Go, Klienci mogą użyć własnego telefonu, aby zeskanować kod kreskowy produktu i zapłacić za niego, a następnie w sklepie. Badania pokazują, kolejkowanie produktów w sklepach stacjonarnych pochłania globalny sektor handlu detalicznego o ok. 200 miliardów dolarów rocznie.

Nasza technologia opiera się na możliwościach sprzętowych urządzeń, takich jak czujniki GPS i aparaty, dzięki którym znajdować sklepy z obsługą MishiPay, skanować kody kreskowe produktów w sklepach stacjonarnych i płacić z użyciem wybranej przez nich formy płatności cyfrowej. Wstępne wersje naszego programu Technologia Go były przeznaczone na konkretne platformy aplikacje na iOS i Androida, a użytkownicy wczesnej wersji uwielbiali tę technologię. Odczytano i dowiedz się, jak przejście na PWA zwiększyło 10-krotnie liczbę transakcji i zaoszczędziło 2,5 roku dodaję do kolejki!

    10×

    Wzrost liczby transakcji

    2,5 roku

    Kolejka została zapisana

Wyzwanie

Nasza technologia jest bardzo przydatna dla użytkowników, którzy oczekują w kolejce czy do kasy. aby szybko przejść do kolejki i bez problemów Jednakże problem z pobraniem Aplikacja na Androida lub iOS sprawiła, że użytkownicy nie wybierają naszej technologii pomimo korzyści. Rozwijał się dla MishiPay, dlatego musieliśmy zwiększyć rozpowszechnienie wśród użytkowników przy niższych barierach wejścia.

Rozwiązanie

Nasze wysiłki związane z stworzeniem i uruchomieniem aplikacji PWA pomogły nam rozwiązać problemy z instalacją zachęcały nowych użytkowników do wypróbowania naszych technologii w sklepach stacjonarnych, pominięcia kolejki i bezproblemowego robienia zakupów. Od momentu wprowadzenia tego programu obserwujemy ogromny wzrost wykorzystania progresywna aplikacja internetowa w porównaniu z aplikacjami na platformie.

Porównanie bezpośredniego uruchamiania PWA (po lewej, szybsze) z instalacją i uruchamianiem aplikacji na Androida (po prawej, wolniej).
.
Transakcje według platformy. † OS: 16 397 (3,98%). Android: 13769 (3,34%). Sieć: 382184 (92,68%).
Większość transakcji jest realizowanych w internecie.

Szczegółowa analiza techniczna

Znajdowanie sklepów obsługujących MishiPay

Aby włączyć tę funkcję, getCurrentPosition() API oraz rozwiązanie zastępcze oparte na adresach 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,
);

Takie podejście sprawdzało się we wcześniejszych wersjach aplikacji, ale później okazało się, że było ono sporym problemem. dla użytkowników MishiPay z następujących powodów:

  • Niedokładności lokalizacji w rozwiązaniach zastępczych opartych na adresach IP.
  • Coraz większa liczba sklepów obsługujących MishiPay w poszczególnych regionach wymaga od użytkowników przewijania listy i zidentyfikować właściwy sklep.
  • Czasami użytkownicy przypadkowo wybierają niewłaściwy sklep, co powoduje zarejestrowanie zakupów. nieprawidłowo.

Aby rozwiązać te problemy, w przypadku każdego produktu w sklepie dodaliśmy unikalne kody QR z geolokalizacją sklepu. Przetarła szlak dla szybszego procesu wdrażania. Użytkownicy po prostu skanują kod QR z geolokalizacją kodów wydrukowanych w materiałach marketingowych dostępnych w sklepach, umożliwiające dostęp do Aplikacja internetowa Go. Dzięki temu nie muszą wpisywać adresu internetowego mishipay.shop, aby uzyskać dostęp do usługi.

Skanowanie w sklepie za pomocą aplikacji PWA.

Skanowanie produktów

Główną funkcją aplikacji MishiPay jest skanowanie kodów kreskowych, ponieważ umożliwia ono użytkownikom na własnych zakupach i sprawdzać całkowitą sumę, nawet zanim zdążyliby zapłacić gotówką. rejestracji.

Aby ułatwić skanowanie w internecie, zidentyfikowaliśmy 3 podstawowe warstwy.

Diagram przedstawiający 3 główne warstwy wątku: strumień wideo, warstwa przetwarzania i warstwa dekodera.

Strumień wideo

Skorzystaj z pomocy getUserMedia(), może korzystać z kamery tylnej użytkownika z uwzględnieniem ograniczeń wymienionych poniżej. Wywołuję metodę automatycznie wyświetla monit o zaakceptowanie lub odmowę dostępu do kamery. Gdy już dostępu do strumienia wideo, możemy przekazać go do elementu wideo, jak pokazano poniżej:

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

Warstwa przetwarzania

Aby wykryć kod kreskowy w danym strumieniu wideo, musimy okresowo rejestrować klatki i przesyłać do warstwy dekodera. Aby nagrać klatkę, po prostu pobieramy strumienie z VideoElement na HTMLCanvasElement za pomocą drawImage(). za pomocą interfejsu 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');
  }
}

W zaawansowanych przypadkach użycia ta warstwa wykonuje też zadania wstępnego przetwarzania danych, takie jak przycinanie, lub szarości. Te zadania mogą obciążać procesor i spowodować, że aplikacja nie odpowiada, ponieważ skanowanie kodu kreskowego jest długotrwałą operacją. Skorzystaj z pomocy OffscreenCanvas API, możemy zrezygnować które zadania intensywnie wykorzystują procesor na potrzeby instancji internetowej. Na urządzeniach obsługujących sprzętową akcelerację grafiki Interfejs API WebGL WebGL2RenderingContext może pozwoli zoptymalizować zyski w zadaniach obciążających procesor.

Warstwa dekodera

Ostatnia warstwa to warstwa dekodera, która odpowiada za dekodowanie kodów kreskowych z ramek. przechwytywane przez warstwę przetwarzania. Dzięki Machine Detection API (czyli funkcja nie jest jeszcze dostępna we wszystkich przeglądarkach), sama przeglądarka dekoduje kod kreskowy z ImageBitmapSource, który może być elementem img, elementem SVG image, elementem video, canvas, obiekt Blob, obiekt ImageData lub ImageBitmap.

Diagram przedstawiający 3 główne warstwy wątków: strumień wideo, warstwę przetwarzania i interfejs 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;
  }
}

W przypadku urządzeń, które nie obsługują jeszcze interfejsu Status Detection API, potrzebujemy rozwiązania zastępczego do zdekodowania kodów kreskowych. Machine Detection API udostępnia getSupportedFormats() która ułatwia przełączanie się między interfejsem Status Detection API a rozwiązaniem zastępczym.

// Feature detection.
if (!('BarceodeDetector' in window)) {
  return;
}
// Check supported barcode formats.
BarcodeDetector.getSupportedFormats()
.then((supportedFormats) => {
  supportedFormats.forEach((format) => console.log(format));
});

Schemat blokowy pokazujący, w jaki sposób, w zależności od obsługi detektora kodów kreskowych i obsługiwanych formatów kodów kreskowych, jest używane albo konfigurowany interfejs API wykrywania kształtu, albo rozwiązanie zastępcze.

Rozwiązanie zastępcze

Dostępnych jest kilka bibliotek skanowania typu open source i przeznaczone dla firm, które można łatwo zintegrować. z dowolną aplikacją internetową, która obsługuje skanowanie. Oto niektóre biblioteki, które obsługuje MishiPay co poleca.

.
Nazwa biblioteki Typ Roztwór Wasm Formaty kodów kreskowych
QuaggaJs Oprogramowanie typu open source Nie 1D
ZxingJs Oprogramowanie typu open source Nie 1D i 2D (ograniczone)
CodeCorp Firma Tak 1D i 2D
Scandit Firma Tak 1D i 2D
Porównanie bibliotek open source i komercyjnych bibliotek do skanowania kodów kreskowych

Wszystkie powyższe biblioteki to w pełni funkcjonalne pakiety SDK, które składają się na wszystkie omówione powyżej warstwy. Poza tym udostępnia interfejsy do obsługi różnych operacji skanowania. W zależności od formatów kodu kreskowego i szybkość wykrywania jest potrzebna w danej sytuacji. Decyzję można podjąć między rozwiązaniami Wasm i innymi. Mimo że dekodowanie kodu kreskowego wymaga dodatkowych zasobów (Wasm), Wasm pod względem dokładności przewyższają rozwiązania inne niż Wasm.

Naszym głównym wyborem był Scandit. Obsługuje wszystkie kody kreskowe formaty wymagane w naszych zastosowaniach biznesowych; przewyższa wszystkie biblioteki open source dostępne szybkości skanowania.

Przyszłość skanowania

Gdy interfejs Machine Detection API będzie w pełni obsługiwany przez wszystkie popularne przeglądarki, możemy opracować nowy element HTML <scanner> o możliwościach wymaganych przez skaner kodów kreskowych. Inżynieria w MishiPay jest zdecydowany przypadek użycia funkcji skanowania kodów kreskowych. HTML ze względu na rosnącą liczbę bibliotek open source i licencjonowanych, które funkcje takie jak Scan & Go i wiele innych.

Podsumowanie

Zmęczenie aplikacją to problem, który napotykają deweloperzy, gdy ich produkty wkraczają na rynek. Użytkownicy często chcą rozumie, jakie korzyści daje aplikacja, zanim ją pobiorą. W sklepie, gdzie MishiPay pomaga i zwiększyć wygodę użytkowników, dlatego trudno jest czekać, pobierać przed rozpoczęciem korzystania z aplikacji. W tym właśnie pomaga nasza aplikacja PWA. Pokonując bariery przed wejściem 10-krotnie zwiększyliśmy liczbę transakcji i umożliwiło użytkownikom zaoszczędzenie 2, 5 roku czekając w kolejce.

Podziękowania

Ten artykuł został zrecenzowany przez Joe Medley.