Lectura de códigos de barras en aplicaciones web progresivas (PWA)
<\/script>\n';
},
get iframeSnippet() {
const domain = 'barcodefyi.com';
const type = 'guide';
const slug = 'barcode-scanning-pwa';
return '';
},
get activeSnippet() {
return this.method === 'script' ? this.scriptSnippet : this.iframeSnippet;
},
copySnippet() {
navigator.clipboard.writeText(this.activeSnippet).then(() => {
this.copied = true;
setTimeout(() => { this.copied = false; }, 2000);
});
}
}"
@keydown.escape.window="open = false"
@click.outside="open = false">
Implementing barcode scanning in PWAs using the Web API — BarcodeDetector API, camera access, polyfills, and cross-browser compatibility.
Barcode Scanning in Progressive Web Apps (PWA)
Progressive Web Apps can implement barcode scanning through web APIs, providing a native-app-like scanning experience without requiring app store installation. This is particularly valuable for lightweight tools and field applications.
BarcodeDetector API
The Web BarcodeDetector API provides native barcode scanning in supported browsers:
if ('BarcodeDetector' in window) {
const detector = new BarcodeDetector({
formats: ['ean_13', 'ean_8', 'qr_code', 'data_matrix', 'code_128']
});
const barcodes = await detector.detect(imageOrVideoFrame);
barcodes.forEach(barcode => {
console.log(barcode.rawValue, barcode.format);
});
}
Browser Support
| Browser | BarcodeDetector | Camera Access |
|---|---|---|
| Chrome (Android) | Yes (v83+) | Yes |
| Chrome (Desktop) | Partial (flag) | Yes |
| Safari (iOS) | No (use polyfill) | Yes |
| Firefox | No (use polyfill) | Yes |
| Samsung Internet | Yes | Yes |
Camera Access via getUserMedia
For browsers without BarcodeDetector, use getUserMedia to access the camera and a JavaScript decoding library:
const stream = await navigator.mediaDevices.getUserMedia({
video: { facingMode: 'environment' }
});
video.srcObject = stream;
Polyfills and Libraries
For cross-browser support, use a polyfill or standalone library:
| Library | Size | Symbologies | Performance |
|---|---|---|---|
| ZXing-js | ~200KB | All major | Good |
| QuaggaJS | ~150KB | 1D only | Good |
| Scandit Web SDK | Large | All | Excellent |
| html5-qrcode | ~100KB | QR + some 1D | Good |
Implementation Architecture
Camera → Video Stream → Frame Capture → Barcode Detection → Result Handler
↑
requestAnimationFrame loop
- Access camera with getUserMedia (prefer rear camera)
- Display video stream in a
<video>element - Capture frames on a regular interval
- Pass frames to BarcodeDetector or polyfill
- Display overlay highlighting detected barcodes
- Emit decoded data to the application
Performance Optimization
- Decode in a Web Worker to prevent UI blocking
- Limit decode region to center 50% of the frame
- Use requestAnimationFrame for consistent frame capture
- Reduce video resolution to 720p (sufficient for most barcodes)
- Debounce results to prevent duplicate scans
PWA-Specific Considerations
- HTTPS required: Camera access requires a secure context
- Permissions: Request camera permission with clear user explanation
- Offline support: Cache the scanning library with a service worker
- Installation: PWA can be installed on home screen for quick access
Use Cases for PWA Barcode Scanning
- Inventory counting tools
- Price checking applications
- Shipping label scanners
- Asset management
- Event ticket validation
- Library self-checkout