In order for the end user to access scanning functionality, the Scandit library (~1MB) needs to be downloaded and initialized in the browser. The speed with which this can happen depends on both the internet connection and the processing power of the device.
By default, the library is cached in the browser (browser and server permitting) and does not need to be redownloaded. It is then compiled, cached and loaded into memory to be used. The library must be loaded from cache on each page where it is to be used.
We recommend the following approaches to minimize perceived waiting time for the user:
- Serve compressed files and cache them
- Preload and precompile the library
- Create the picker in advance
- Reuse the picker
- Distract and obfuscate
Serve compressed files and cache them
Preload and precompile the library
Load the library as soon as the page with scanning functionality is loaded. See example_background.html sample included with the npm download.
Create the picker in advance
Create a hidden and paused (for this set to `true` the `scanningPaused` parameter of the create() method, and to `false` the `accessCamera` parameter) `BarcodePicker` in the background and simply resume scanning and switch its visibility to "show" when needed instead of creating it on the fly.
Reuse the picker
Reuse `BarcodePicker` objects whenever possible by hiding/pausing and showing/resuming them instead of destroying and recreating them.
Distract and obfuscate
To avoid any perception of wait time, hide the UI for scanning until the scanner is ready. If the above are not viable options, animate the loading indicator in an entertaining manner.
NOTE 1: the load and compile time on Firefox is a fraction of the time in Chrome and Firefox due to streaming compile of the library. We expect that other browsers will eventually implement similar improvements.
NOTE 2: the folks at Chrome are working on Streaming Compile that will make the load time on Android significantly faster, and potentially on par with Firefox. You can already test the current feature by enabling chrome://flags/#enable-webassembly-baseline.