Third-party lib within the UI5 app is only loaded after a refresh

Question

I'm trying to implement the ZXing barcode scanner library inside my UI5 project. For this I'm following the following tutorial: https://blogs.sap.com/2021/02/01/native-js-zxing-scanner-in-sapui5/.

So far it works pretty well. Now I've discovered that the external library doesn't load at the first app opening. So if I open the UI5 lib in incognito mode, the library isn't loaded and I get the following error:

Can't find variable: ZXing

After an additional page reload the lib is successfully loaded and works.

The resources section inside my mainfest.json:

"resources": {
  "css": [
    {
      "uri": "css/style.css"
    }
  ],
  "js": [
    {
      "uri": "libs/zxing.min.js"
    }
  ]
}

I'm then using the ZXing inside the custom control under "webapp/controls/BarcodeScanner" (as in the tutorial stated) and I have annotated the file with /* global ZXing:true */.

Then inside the Master.controller.js#init, I initialize the scanner:

this.oScanner = new BarcodeScanner({
  valueScanned: [this.onScanned, this],
  decoderKey: 'text',
});

I'm completely lost. Why doesn't the library get loaded at the first page view? But from the first refresh on the library works without problems. It's just the first load. That's such a dumb problem and I can't get the solution for.

Answer 1

The manifest.json section /sap.ui5/resources/js is deprecated since UI5 1.94.

Instead, have a look at the existing solutions:

1. If the app is running with SAPUI5 1.84.18 or higher, simply use sap.ndc.BarcodeScanner(Button) which supports pure SAPUI5 web apps (no hybrid) unlike in earlier versions.* Sample: https://ui5.sap.com/#/entity/sap.ndc.BarcodeScannerButton/sample/sap.ndc.sample.BarcodeScannerButton
2. If the app is running with OpenUI5:
   • Try the (experimental) web component sap/ui/webc/fiori/BarcodeScannerDialog control.
   • If the app runs in a Chromium-based browser on Android or macOS (iOS not supported yet**), try the web standard Shape Detection API which supports detecting barcodes natively. Here is an OpenUI5 sample with the Shape Detection API:
     • Sample (Android phone required): https://run.plnkr.co/plunks/axL2LIJA4nuQbSxW/
     • Code: https://plnkr.co/edit/axL2LIJA4nuQbSxW

Both standard UI5 controls sap/ndc/BarcodeScanner and sap/ui/webc/fiori/BarcodeScannerDialog implement ZXing internally.

---

* See Note 2992772.
** Request for the Shape Detection API implementation in WebKit: https://bugs.webkit.org/show_bug.cgi?id=198174