6 צעדים לחיבור האתר שלכם למדפסות וציוד קופה עם Web Bluetooth API

לפני כמה חודשים הגיע אליי בעל חנות מרחוב אלנבי בתל אביב. הבעיה שלו הייתה פשוטה אך מעצבנת: בכל פעם שעובד רצה להדפיס מדבקת מחיר או קבלה מתוך מערכת הניהול בווב, המערכת שלחה את הבקשה לשרת מרוחק, השרת שלח אותה לתוכנת תיווך מקומית בלפטופ, ורק אז המדפסת הגיבה. שניות ארוכות של עיכוב.

המערכת עבדה. אבל היא הייתה איטית ושבירה.

הפתרון שהטמענו ביטל לחלוטין את השרת באמצע. תקשורת דפדפן-מכשיר טהורה דרך בלוטות'. הנה 6 צעדים מעשיים שיאפשרו לכם לחבר את האתר שלכם לציוד היקפי בחנות.

הגדרה · Web Bluetooth API

ממשק תכנות בדפדפן המאפשר לאתרים לתקשר באופן מאובטח וגלויה עם מכשירי Bluetooth Low Energy (BLE) סמוכים ללא צורך בהתקנת דרייברים.

1. בדיקת תמיכה בדפדפנים והגדרת HTTPS

המכשול הראשון שתפגשו הוא אבטחה. דפדפנים מודרניים מגנים בחירוף נפש על החומרה של המשתמש.

Web Bluetooth עובד אך ורק בהקשר מאובטח (Secure Context), כלומר בכתובת HTTPS או ב-localhost בזמן פיתוח. אם האתר שלכם עובד ב-HTTP רגיל, הממשק פשוט לא יהיה קיים באובייקט navigator.

תמיכת הדפדפנים נרחבת ב-2026 ב-Chrome, Edge ו-Opera (הן בשולחן העבודה והן ב-Android). עם זאת, באפל עדיין מניעים רגליים בדפדפן Safari, ולכן כדאי לבדוק בקוד if ('bluetooth' in navigator) לפני הצגת אפשרות החיבור.

2. יצירת טריגר בלחיצת משתמש (User Gesture)

אי אפשר לחבר מכשיר בלוטות' ברקע ללא ידיעת המשתמש. הדפדפן לא ירשה לסרוק סביבת BLE בעת טעינת העמוד.

הקוד חייב לפעול בתוך אירוע לחיצה (click) או פעולה אקטיבית אחרת של המשתמש.

אל תנסו לאלתר סריקה אוטומטית.

כשמשתמש לוחץ על כפתור "חבר מדפסת", הדפדפן מקפיץ דיאלוג שמציג את המכשירים הזמינים בסביבה. הקוד נראה כך:

const button = document.getElementById('connect-btn');
button.addEventListener('click', async () => {
  const device = await navigator.bluetooth.requestDevice({
    acceptAllDevices: true,
    optionalServices: ['000018f0-0000-1000-8000-00805f9b34fb']
  });
});

3. סינון לפי שירותים (Services) ומאפיינים

מכשירי BLE מציגים את היכולות שלהם באמצעות שירותים (Services) ומאפיינים (Characteristics). מדפסת מדבקות תציג שירות הדפסה, בעוד קוראי ברקודים יציגו שירות קלט.

במקום לבקש acceptAllDevices: true, מומלץ לסנן את הסריקה לפי UUID של השירות המבוקש. זה מונע מבלבול אצל העובד בחנות:

סריקה ממוקדת מבטיחה שרק הציוד המתאים יופיע ברשימה של העובד.

4. המרת נתונים לפורמט בייט (ArrayBuffer)

מכשירי בלוטות' לא מבינים מחרוזות טקסט של JavaScript. הם מבינים ביטים.

אם אתם שולחים פקודות הדפסה (כמו פורמט ESC/POS או ZPL למדפסות מדבקות), עליכם להמיר את המחרוזת ל-Uint8Array לפני השליחה למאפיין הכתיבה.

const encoder = new TextEncoder();
const data = encoder.encode('PRINT: Product #4092\n');
await characteristic.writeValue(data);

מהניסיון שלי, העבודה עם באפרים (Buffers) היא המקום שבו רוב המפתחים נתקעים. תשתמשו בספריות עזר קלות להמרת גופן או תמונות לבאייטים במידת הצורך.

5. טיפול בניתוקים וחיבור מחדש אוטומטי

חיבורי אלחוט נוטים להתנתק. עובד זז עם הטאבלט, המדפסת נכנסת למצב שינה, או שמישהו כיבה את המכשיר.

אם לא תטפלו באירוע הניתוק, האתר שלכם יקפא בניסיון השליחה הבא.

שמירת רפרנס לאובייקט ה-device מאפשרת לקרוא ל-device.gatt.connect() שוב במהירות ללא צורך בהקפצת חלון הסריקה מחדש, כל עוד הרשאות הדפדפן בתוקף.

6. אבטחה וחווית עבודה יומיומית בחנות

חיבור חומרה מהדפדפן משנה מקצה לקצה את חווית העבודה. אין צורך להחזיק מחשב קופה ייעודי יקר. כל טאבלט זול או לפטופ בסיסי מריצים את האתר ומדברים עם המדפסת ישירות.

💡

Web Bluetooth מבטל את התלות בשרתי תיווך ומאפשר לאפליקציית הווב שלכם לתפקד כתוכנת דסקטופ מלאה, ישירות מתוך הדפדפן.

הקפידו לספק פידבק ויזואלי ברור בממשק האתר: אינדיקטור ירוק כשהמדפסת מחוברת, ואדום כשהיא מנותקת. פשוט וברור.

סיכום

הטכנולוגיה קיימת ובשלה. חיבור האתר שלכם לציוד היקפי באמצעות Web Bluetooth API מייתר את תוכנות המדף הישנות והכבדות, חוסך זמן יקר ומונע שגיאות תקשורת.