Kamu mungkin berada di salah satu situasi. Entah kamu telah mewarisi aplikasi Cordova yang masih penting bagi bisnis, atau kamu menjaga aplikasi hybrid stabil sementara tim perlahan-lahan beralih ke alat yang lebih baru. Lalu permintaan produk tiba: scan label inventori, tiket, paket, atau label rak dengan kamera ponsel.
itu adalah scanner kode batang Cordova pekerjaan menjadi menarik. Demo dasar mudah. Integrasi produksi tidak. Bagian sulit adalah memilih plugin yang sesuai dengan format kode batang Anda, mengonfigurasi izin native dengan bersih, dan menghadapi kebiasaan platform yang hanya muncul pada perangkat nyata. Jika aplikasi Anda juga menyentuh operasi lapangan atau aliran inventori, fitur scanning biasanya terhubung dengan kekhawatiran operasional yang lebih luas seperti mengelola komponen IT kritis, di mana aplikasi mobile menjadi bagian dari alur aset dan layanan yang lebih besar.
Cordova masih merupakan stack nyata dalam pekerjaan perawatan perusahaan. Pada pertengahan 2010-an, scanning kode batang dalam Cordova telah bergerak jauh dari contoh mainan ke aplikasi hybrid bisnis yang dibangun untuk Android dan terhubung ke layanan backend, termasuk alur yang terdokumentasi menggunakan cordova create, cordova platform add android, dan kode yang dihasilkan barcodeScanner-debug.apk di contoh pembangunan aplikasi nyata dari panduan scanning Cordova dari SitePoint. Jika tim Anda juga mempertimbangkan pilihan arsitektur jangka panjang, perbandingan ini dari aplikasi native vs aplikasi web membantu menentukan mengapa aplikasi hybrid masih muncul di jalur pengiriman mobile yang serius.
Daftar Isi
- Mengapa Menambahkan Scanner Barcode ke Aplikasi Cordova Anda
- Mengapa Memilih Plugin Scanner Barcode Cordova Anda
- Pemasangan dan Konfigurasi Platform
- Mengimplementasikan Scanner di Aplikasi Anda Code
- Menguji dan Mengatasi Kesalahan Umum
- Tips Kinerja dan Migrasi ke Capacitor
Mengapa Menambahkan Scanner Barcode ke Aplikasi Cordova Anda
Scanner mengubah apa yang dapat dilakukan aplikasi Cordova di lapangan. Sebaliknya dari meminta pengguna untuk mengetikkan serial, ID pesanan, atau kode produk, Anda biarkan kamera menjadi perangkat input. Ini mengurangi gesekan, tetapi kritis, ini mengurangi jumlah cara pengguna dapat memasukkan nilai yang salah.
Dalam prakteknya, scanning barcode muncul di mana aplikasi mobile bertemu operasi nyata. Penerimaan gudang, pencarian retail, validasi bagian layanan lapangan, pendaftaran pengunjung, dan pengawasan aset internal semua mendapat manfaat dari itu. Scanner juga mengubah harapan pengguna. Setelah kamera tersedia, pengguna berhenti menoleransi masukan manual code kecuali ada fallback yang jelas.
Cordova masih berarti dalam mode perawatan
Apa yang terjadi dengan Cordova? Ini tidak hilang. Ini hanya berusia dan menjadi bagian dari portofolio perusahaan yang membutuhkan perawatan yang berat, di mana mengganti aplikasi yang sudah berjalan lebih sulit daripada memperluasnya. Jika aplikasi sudah dapat menghandle autentikasi, sinkronisasi, formulir, dan penyimpanan offline, maka menambahkan scanner seringkali lebih berisiko rendah daripada membangun aplikasi dari awal.
Aturan praktis: Tidak perlu menganggap permintaan scanner sebagai trigger untuk merevisi aplikasi kecuali aplikasi lainnya sudah gagal dalam operasional tim Anda.
Cordova juga mendapatkan tempatnya karena plugin-pluginnya dapat mengekspos kemampuan perangkat native dalam cara yang dapat digunakan oleh web code. Itulah mengapa scanning barcode menjadi sangat umum dalam aplikasi mobile hybrid. Ini sesuai dengan pola yang dibangun Cordova: letakkan kemampuan native di belakang JavaScript API dan biarkan aplikasi tetap berbasis web.
Nilainya ada dalam alur kerja, bukan demo
Tombol scanner yang mengembalikan teks adalah bagian yang mudah. Tugas utama adalah segala sesuatu di sekitarnya:
- Mengilih simbolologi yang didukung: Aplikasi Anda mungkin hanya membutuhkan QR saja, atau mungkin membutuhkan kode retail dan logistik juga.
- Menghandle izin dengan bersih: Jika akses kamera gagal sekali, pengguna seringkali menganggap fitur tersebut rusak.
- Mengatur aksi setelah scan: Pencarian, validasi, navigasi, dan pengelolaan duplikat lebih penting daripada antarmuka kamera UI.
- Merencanakan modernisasi: Jika tim Anda sedang bergerak menuju Capacitor, Anda membutuhkan pendekatan yang tidak menahan fitur dalam asumsi Cordova saja.
Point terakhir itu penting. Tim sering berhasil dengan integrasi Cordova awal, kemudian mengalami kesulitan selama migrasi karena model rendering native berubah di bawah plugin. Scanner masih berfungsi. Tampilan pratinjau hanya tidak menampilkan seperti yang diharapkan.
Pilih Plugin Scanner Barcode Cordova Anda
Sebelum menulis aplikasi code, putuskan apa yang Anda optimalkan. Beberapa tim membutuhkan dukungan barcode luas. Lainnya hanya membutuhkan overlay kamera untuk alur QR. Memilih plugin yang salah dari awal menciptakan rework kemudian, terutama ketika produk meminta satu format barcode tambahan setelah peluncuran.
Plugin yang pengembang akan mengenali adalah cordova-plugin-barcodescanner. Paket npm dokumen plugin ini adalah scan(success, fail) API dan dukungan untuk simbologi umum termasuk QR_CODE, DATA_MATRIX, UPC_A, EAN_13, CODE_128, PDF_417, dan AZTEC, yang mengapa ini cocok untuk skenario retail dan logistik daripada hanya kasus penggunaan QR, seperti yang ditunjukkan dalam pembahasan dokumentasi paket plugin di npm.
Untuk tim yang mengevaluasi strategi plugin secara lebih luas, ini adalah ringkasan apa yang perlu diketahui tentang Capacitor plugin hal ini berguna karena menyoroti perbedaan antara asumsi plugin Cordova yang lebih tua dan model jembatan asli yang lebih baru.
Apa yang penting sebelum Anda menginstal apa pun
Jangan memulai dengan popularitas sendiri. Mulai dengan pekerjaan scan Anda.
Jika aplikasi harus membaca kode barcode keluarga yang berbeda di konteks operasional yang berbeda, dukungan simbolologi yang luas lebih penting daripada minimal API. Jika aplikasi hanya membutuhkan QR check-in, Anda dapat menerima alat yang lebih sempit jika memberikan pengalaman kamera yang lebih sederhana. Apa yang sering dilupakan oleh developer junior adalah bahwa pekerjaan scanner kurang tentang "apakah dapat mengscan" dan lebih tentang "apakah dapat mengscan label yang tepat yang digunakan oleh operasi tanpa kerja sekitar yang tidak nyaman."
Daftar pemeriksaan yang baik seperti ini:
- Koverasi barcode: Konfirmasi format yang tepat yang digunakan di produksi.
- Harapan platform: Periksa apa yang masih didukung oleh tim hari ini, bukan apa yang didukung oleh plugin secara historis.
- Model UI: Beberapa plugin membuka alur pemindaian asli. Lainnya mengharapkan pendekatan pratinjau terintegrasi.
- Toleransi migrasi: Tanyakan apakah plugin ini akan menjadi menyakitkan jika aplikasi berpindah ke Capacitor nanti.
Plugin yang berfungsi dalam demo tetapi bertempur dengan tata letak aplikasi, siklus hidup, atau jalur migrasi biasanya adalah plugin yang salah.
Tabel perbandingan plugin
| Fitur | phonegap-plugin-barcodescanner | cordova-plugin-qrscanner |
|---|---|---|
| Penggunaan utama | Pemindaian kode barcode yang luas di berbagai format | Pemindaian QR yang fokus pada alur-alur |
| API style | Familiar pola panggilan balik dalam banyak proyek Cordova legacy | Sering dipilih untuk kasus penggunaan tampilan kamera hidup |
| Skop format barcode | Lebih sesuai ketika produk memerlukan lebih dari QR | Lebih sesuai ketika QR adalah persyaratan keras tunggal |
| Resiko migrasi | Bisa berfungsi, tetapi asumsi lama mungkin muncul selama migrasi jembatan modern | Metode preview berat dapat mengungkapkan masalah rendering lebih cepat |
| Pilihan terbaik | Alur kerja retail, logistik, aset, dan barcode campuran | Alur cek-in, URL, autentikasi, dan QR-saja |
Meja itu mencerminkan kenyamanan praktis, bukan skor kartu. Jika Anda memerlukan simbolologi retail dan logistik, kategori plugin yang lebih luas biasanya pilihan yang lebih aman. Jika Anda hanya memindai QR dan ingin pengalaman tampilan kontrol yang lebih tipis, jalur QR yang lebih terkendali dapat lebih ringkas.
The kesalahan yang paling sering saya lihat adalah memilih alat QR karena rilis pertama hanya memerlukan QR, kemudian memaksa masuk ke UPC atau Code 128 kerja di kemudian hari. Jika ada kemungkinan pengguna bisnis Anda akan memindai label dari printer, rak, wadah, atau dokumen pengiriman, pilih untuk masa depan sekarang.
Pemasangan dan Konfigurasi Platform
Integrasi biasanya gagal sebelum skanner pertama kali digunakan, bukan setelahnya. Kebanyakan gagal datang dari pergeseran konfigurasi antara harapan JavaScript dan konfigurasi platform native. Tatal bagian ini seperti daftar checklist, bukan instalasi cepat.
Implementasi yang solid dimulai dengan menambahkan plugin atau SDK, membuat konteks tangkap, mempersempit simbologi ke kode yang digunakan dalam produksi, mengonfigurasi UI, dan hanya kemudian mendaftarkan listener skanner. Urutan itu disebutkan dalam panduan Cordova Scandit untuk SparkScan, dan sesuai dengan cara integrasi skanner profesional tetap dapat dipelihara dalam aplikasi hybrid, seperti yang dijelaskan dalam Panduan pengembang Scandit untuk Cordova skanning barcode. Jika aplikasi Anda masih sangat hybrid pada tingkat arsitektur, panduan ini untuk Pengembangan aplikasi hybrid Cordova adalah mitra yang berguna.
Mulai dengan alur integrasi
Fitur skanner lebih baik ketika Anda memutuskan hal-hal berikut terlebih dahulu:
- Jenis kode barcode yang aplikasi harus menerima.
- Apakah scanning adalah aksi layar penuh atau bagian dari alur kerja yang diintegrasikan.
- Apa yang aplikasi harus lakukan setelah membaca dengan sukses.
- Apa yang ada sebagai pengganti ketika kamera tidak dapat digunakan.
Yang menjaga plugin instalasi terkait dengan alur kerja nyata daripada kemampuan perangkat umum.
Langkah instalasi Cordova
Untuk pengaturan Cordova tradisional menggunakan plugin pemindai kode batang umum, titik awal adalah perintah instalasi standar yang dokumentasi oleh paket:
cordova plugin add cordova-plugin-barcodescannerSebuah urutan pengaturan proyek biasanya terlihat seperti ini:
cordova create barcodeScannerApp
cd barcodeScannerApp
cordova platform add android
cordova platform add ios
cordova plugin add cordova-plugin-barcodescanner
cordova build android
cordova build iosTidak ada yang sederhana, tetapi jangan berhenti di sana. Bangunlah segera setelah instalasi plugin untuk menangkap masalah dependensi native sebelum Anda menghubungkan UI code. Jika bangun gagal, selesaikan masalah tersebut terlebih dahulu.
Konfigurasi native yang biasanya patah pertama
Pada iOS, akses kamera harus dideklarasikan dengan benar dalam pengaturan proyek native. Jika deskripsi penggunaan izin kosong atau kabur, pemindai tidak akan berperilaku seperti fitur yang berfungsi kepada pengguna. Tambahkan deskripsi privasi kamera yang jelas di Info.plist yang menjelaskan mengapa aplikasi memerlukan kamera.
Pada Android, tinjau entri manifest dan izin plugin setelah instalasi. Plugin mungkin menambahkan apa yang diperlukan, tetapi proyek yang lebih tua sering mengandung perubahan konfigurasi yang terkumpul, pengaturan Gradle yang disesuaikan, atau penggunaan plugin yang berlebihan yang menyebabkan peringatan pembangunan atau kebingungan waktu eksekusi. Jangan asumsikan manifest bersih hanya karena plugin terinstal dengan sukses.
Gunakan daftar periksa cepat ini:
- Periksa versi platform: Proyek Cordova yang lebih tua sering membawa paket platform yang ketinggalan zaman.
- Tinjau prompt izin: Pengucapan dan waktu sangat penting untuk kepercayaan pengguna.
- Uji pada perangkat nyata awal: Emulator tidak akan memberitahu Anda cukup tentang perilaku kamera.
- Tetapkan ruang skanner sempit: Aktifkan hanya jenis code yang diterima oleh alur kerja Anda.
Jika scanner Anda hanya membutuhkan satu atau dua format, konfigurasi untuk format tersebut terlebih dahulu. Penginderaan luas terdengar fleksibel, tapi seringkali membuat debugging lebih lambat karena setiap label tidak terbaca menjadi ambigu.
Untuk para developer junior, pelajaran utama adalah ini: instalasi bukan hanya perintah terminal. Ini adalah penyesuaian proyek asli. Jika Android dan iOS tidak disesuaikan secara sengaja, lapisan JavaScript tidak akan menyelamatkan Anda.
Mengimplementasikan Scanner di Aplikasi Anda Code
Setelah plugin diinstal dan aplikasi dibangun, jadikan implementasi pertama sederhana. Letakkan aksi scan di belakang tombol, log hasil penuh, dan buktikan alur panggilan callback bekerja sebelum mendesain UI yang terlihat menarik.
Gaya scanner Cordova yang umum menggunakan metode plugin’s scan(success, fail) Metode callback itu sudah kuno, tapi masih dapat diandalkan di kodebasis legasi dan mudah diwrap jika aplikasi Anda telah berpindah ke promise atau abstraksi TypeScript. Jika Anda ingin model mental yang lebih jelas tentang bagaimana web code memanggil native code di proyek-proyek ini, penjelasan tentang bagaimana Capacitor menghubungkan web dan native code membantu, bahkan jika Anda masih coding di Cordova hari ini.
Contoh JavaScript minimal
Contoh implementasi minimal untuk aplikasi Cordova yang lebih tua:
<button id="scan-button">Scan barcode</button>
<div id="scan-result"></div>document.addEventListener('deviceready', function () {
var button = document.getElementById('scan-button');
var resultEl = document.getElementById('scan-result');
button.addEventListener('click', function () {
cordova.plugins.barcodeScanner.scan(
function (result) {
if (result.cancelled) {
resultEl.textContent = 'Scan cancelled';
return;
}
resultEl.textContent =
'Text: ' + result.text +
' | Format: ' + result.format;
},
function (error) {
resultEl.textContent = 'Scan failed: ' + error;
}
);
});
});This does three useful things. It waits for deviceready, mengikat skanning ke tindakan pengguna yang sengaja, dan menangani baik kesuksesan maupun kegagalan secara eksplisit. Jangan lewatkan kasus yang dibatalkan. Pengguna sering keluar dari aliran kamera.
Contoh TypeScript
Jika proyek Anda menggunakan TypeScript, tentukan bentuk hasil sendiri sehingga bagian lain aplikasi dapat mengonsumsinya dengan bersih:
interface BarcodeScanResult {
text: string;
format: string;
cancelled: boolean;
}
function scanBarcode(): void {
cordova.plugins.barcodeScanner.scan(
(result: BarcodeScanResult) => {
if (result.cancelled) {
renderStatus('Scan cancelled');
return;
}
handleScannedCode(result);
},
(error: unknown) => {
renderStatus(`Scan failed: ${String(error)}`);
}
);
}
function handleScannedCode(result: BarcodeScanResult): void {
renderStatus(`Scanned ${result.format}: ${result.text}`);
if (!result.text) {
renderStatus('Empty scan result');
return;
}
lookupItemByCode(result.text);
}
function renderStatus(message: string): void {
const el = document.getElementById('scan-result');
if (el) el.textContent = message;
}
function lookupItemByCode(code: string): void {
console.log('Lookup code:', code);
}This version memisahkan skanning dari logika bisnis. Hal ini penting karena plugin scanner hanya harus menangkap input. Validasi, pencarian, dan navigasi milik tempat lain.
Apa yang harus dilakukan dengan hasil skanning
Aliran post-skan yang baik biasanya salah satu dari ini:
- Aliran pencarian: Gunakan teks yang di-skanning untuk mengambil produk, pesanan, atau rekaman asset.
- Aliran validasi: Bandingkan nilai yang di-skanning terhadap nilai yang diharapkan code yang sudah ada di layar.
- Aliran navigasi: arahkan pengguna ke dalam tugas yang terkait dengan item yang di-scan.
- Capture flow: Simpan nilai lokal untuk sinkronisasi nanti.
Jangan biarkan callback scanner menjadi tempat pembuangan untuk API panggilan, pembaruan DOM, analisis, dan navigasi. Tukarkan nilai dengan cepat.
Selain itu, log hasil mentah selama tes awal. Bahkan jika UI produksi Anda hanya memerlukan text, hasil yang dikembalikan format bermanfaat untuk debugging label yang tidak cocok. Jika operasi mengatakan “scanner tidak dapat membaca code ini,” format data seringkali memberitahu Anda apakah masalahnya adalah jenis barcode, bukan kualitas barcode.
Pengujian dan Mengatasi Kesalahan Umum
Masalah Cordova scanner barcode paling banyak tidak berasal dari scan API itu sendiri. Mereka berasal dari batasan antara UI web, tampilan native, dan izin perangkat. Di sini, demo yang bersih berubah menjadi laporan bug yang membingungkan.
Masalah yang paling sulit untuk didiagnosis adalah bug rendering Android yang muncul selama Capacitor migrasi atau pengaturan mixed Cordova-Capacitor . Seorang pengembang di Capacitor issue #1213 menggambarkannya dengan jelas: “Saya mencoba plugin ini pada aplikasi capacitor saya, tapi tampaknya scanner berada di belakang aplikasi”, dan perbaikan memerlukan membuat latar belakang webview native transparan bersama dengan perubahan transparansi DOM yang sesuai, yang biasanya tidak dibahas dalam tutorial Cordova standar, seperti yang terdokumentasi di Capacitor Masalah Rendering Android. Jika Anda sedang debugging migrasi hybrid, panduan debugging __CAPGO_KEEP_0__ ini patut Anda simpan. debugging Capacitor apps Gejala
Anda memulai scanner. Izin-izin tampaknya baik-baik saja. Tidak ada kecelakaan yang jelas terjadi. Namun, preview kamera tampak tidak terlihat, terblokir, atau 'tersembunyi' di balik antarmuka UI aplikasi.
Penyebab
Tampilan scanner native dan tampilan webview diatur berbeda dengan plugin Cordova asli yang diharapkan. Pada Android dalam pengaturan __CAPGO_KEEP_0__-style, latar belakang tampilan webview dapat tetap transparan, sehingga preview native ada tetapi tetap tersembunyi di bawahnya.
Solusi
The native scanner view and the webview are layered differently than the original Cordova plugin expected. On Android in Capacitor-style setups, the webview background can remain opaque, so the native preview exists but stays hidden beneath it.
Sisi native:
Sisi web:
- Sisi native: Atur latar belakang webview menjadi transparan.
- Sisi web: Hapus latar belakang yang tidak transparan dari elemen-elemen kontainer yang berada di atas pratinjau pemindai.
- Sisi tata letak: Periksa pembungkus layar penuh, kerangka modal, dan kontainer halaman framework untuk warna latar belakang default.
- Sisi pengujian: Validasi pada perangkat Android fisik karena perilaku tata letak dapat menipu dalam shell pengembangan.
Masalah ini membuat pengembang berpikir plugin rusak ketika sebenarnya masalah komposisi tampilan.
Kegagalan izin dan hasil palsu
Izin gagal dalam cara yang terlihat seperti bug pemindai.
Jika pengguna menolak akses kamera, callback Anda mungkin menampilkan kesalahan umum, atau pemindai mungkin tidak ditampilkan seperti yang diharapkan. Tangani penolakan izin sebagai cabang normal dalam UI. Beritahu pengguna apa yang terjadi dan bagaimana untuk mencoba lagi setelah mengaktifkan akses. Pada iOS terutama, teks izin yang tidak jelas menciptakan ketidakpercayaan sebelum pengguna melihat pemindai.
Beberapa kebiasaan membantu:
- Mulai sken dari aksi pengguna yang jelas: Prompt izin terlihat kurang mencurigakan.
- Tampilkan input cadangan: Masukan manual menjaga alur kerja tetap hidup.
- Uji tolak kemudian coba lagi jalur: Banyak tim hanya menguji jalur bahagia sekali.
Issue pengembangan dan perangkat tes
Beberapa gagal hanya muncul di lingkungan tertentu.
| Masalah | Penyebab mungkin | Pemecahan masalah yang efektif |
|---|---|---|
| Pemindaian buka tetapi tidak ada hasil berguna kembali | Format kode barcode tidak didukung atau tidak terduga | Uji dengan label yang diketahui yang sesuai dengan kasus penggunaan yang diatur |
| Pembangunan gagal setelah instalasi plugin | Perubahan platform atau dependensi pada proyek yang lebih tua | Rekoncili paket platform sebelum mengubah aplikasi code |
| Berfungsi di satu shell aplikasi tetapi tidak di lainnya | Interferensi layering tampilan atau CSS | Stripping layar kembali ke tata letak minimal dan menambahkan gaya secara bertahap |
| Perilaku emulator menipu | Simulasi kamera tidak mencerminkan realitas perangkat | Uji pada perangkat Android dan iPhone fisik pada awalnya |
Stripping halaman ke satu tombol dan satu elemen hasil ketika debugging. Jika scanner berfungsi di sana, masalah Anda biasanya adalah tata letak atau shell aplikasi code, bukan plugin.
Tips Kinerja dan Migrasi ke Capacitor
Scanner kode barcode dapat mendekode dengan benar dan masih gagal dalam praktek. Masalah biasanya muncul sebagai lag, kilap, gangguan preview kamera, atau layar Android yang berbeda dari perangkat yang sama dari pool tes.
Dalam aplikasi Cordova yang lebih tua, decoder sering kali bukan titik lemah. WebView, layering view, dan code yang bereaksi terhadap hasil scan biasanya menyebabkan lebih banyak masalah daripada pengenalan kode barcode itu sendiri.
Mulai dengan mempertahankan layar scan yang sempit dalam skop. Jika layar itu dimaksudkan untuk memindai label stok, biarkan itu memindai label stok. Filter tambahan, panel animasi, dan pembaruan status luas menambahkan pekerjaan ulang kembali di mana rendering webview Android sudah rapuh.
Beberapa perubahan dapat memberikan hasil yang cepat:
- Pilih format kode barcode yang diterima Jika plugin Anda mendukungnya. Ini memotong bacaan palsu dan membuat penutupan tes lebih mudah untuk dipahami.
- Pertahankan logika setelah scan singkat. Analisis, validasi, dan update bagian UI yang paling kecil.
- Block bacaan duplikat untuk sementara waktu. Beberapa perangkat akan mengirim hasil yang sama beberapa kali sebelum pengguna menggerakkan kamera.
- Desain entri manual ke dalam aliran. Dengan label yang rusak, pencahayaan yang buruk, dan pengemasan yang reflektif masih terjadi di lingkungan hidup nyata.
- Perhatikan biaya repaint Android secara ketat. Overlays yang berat, transisi CSS, dan komponen yang berlapis dapat merusak pratinjau kamera di dalam Cordova webview.
Rute migrasi yang praktis ke Capacitor
Migration Cordova yang paling bersih ke Capacitor dilakukan secara bertahap, bukan secara heroik. Tim akan mengalami masalah ketika mereka mengganti kontainer aplikasi, plugin pemindai, aliran izin, dan over lay UI sekaligus, kemudian tidak dapat mengetahui perubahan mana yang menyebabkan aplikasi rusak.
Pilihlah urutan ini:
-
Audit plugin saat ini
Daftar semua plugin Cordova dan tandai setiap plugin sebagai aktif, dapat diganti, atau berisiko karena tergantung pada perilaku platform yang lebih tua. -
Pindahkan kontainer aplikasi terlebih dahulu
Jalankan aplikasi web yang sudah ada di dalam Capacitor sebelum mengganti plugin pemindai code. Hal ini memisahkan masalah kontainer dengan masalah plugin. -
Simpan plugin Cordova selama beberapa waktu jika perlu
Kompatibilitas sementara seringkali lebih aman daripada menulis ulang scanner, akses file, dan pengaturan izin pada saat yang sama. -
Ganti bagian scanner yang rapuh sejak awal.
Plugin lama yang bergantung pada overlay khusus, perilaku Android yang tidak terdokumentasikan, atau pengaturan kamera yang usang harus diprioritaskan di atas antrian.
Bug kamera Android membutuhkan perhatian khusus karena menghabiskan banyak waktu debugging. Saya telah melihat layar scanner gagal karena preview native berada di belakang webview, memotong di tepi, atau menampilkan hitam pada perangkat Android tertentu. Pada titik itu, plugin barcode pertama kali dipertimbangkan, meskipun masalahnya adalah komposisi tampilan.
Tangani hal ini sebagai investigasi rendering, bukan hanya investigasi scanner. Hapus overlay dekoratif. Kurangi halaman ke preview, satu trigger, dan satu bidang hasil. Jika preview menjadi stabil setelah itu, masalah biasanya adalah struktur layar atau CSS Anda, bukan decoding.
Hal ini juga merupakan titik awal migrasi ke Capacitor. Capacitor tidak menghilangkan bug kamera semua, tetapi biasanya memberikan batasan yang lebih jelas antara pengelolaan tampilan native dan UI web code. Untuk skenario scanning barcode, @capgo/camera-preview menampilkan feed kamera hidup sebagai overlay native dengan kontrol yang dapat disesuaikan, sehingga Anda dapat mendekode frame di JavaScript tanpa preview berada di belakang webview. Untuk skenario scanning bisnis pada perangkat Zebra, @capgo/capacitor-zebra-datawedge menangani profil DataWedge dan trigger scan. Untuk skenario alih tag NFC, @capgo/capacitor-nfc handles native tag discovery, reading, dan menulis di iOS dan Android.
Proyek Cordova cenderung rusak dari usia plugin, pergeseran platform, dan asumsi tersembunyi di dalam integrasi yang lebih tua. Capacitor proyek mengekspos masalah yang berbeda, sebagian besar di sekitar pengelolaan siklus hidup dan lapisan native, tapi kegagalan-kegagalan itu lebih mudah untuk ditemukan karena sisi native lebih eksplisit.
Jika scanner Cordova Anda saat ini hanya berfungsi setelah stack perbaikan yang spesifik per perangkat, hentikan menambahkan patch. Stabilkan layar scan, konfirmasikan apakah bug pratinjau Android sebenarnya adalah masalah layering webview, dan kemudian migrasi dalam langkah-langkah yang terkendali. Jalur itu lebih lambat selama seminggu dan lebih cepat untuk proyek yang lain.
