איך לעצור זליגת טוקנים בכרטיסיות מרובות: מדריך Web Locks API לאפליקציות AI

אפליקציות AI מודרניות מריצות משימות ארוכות בדפדפן. סוכן AI מנהל דיאלוג מול Claude או OpenAI, מקבל תשובות ב-Streaming, ומעדכן את בסיס הנתונים המקומי בדפדפן.

מה קורה כשהמשתמש פותח את אותה אפליקציה בשלוש כרטיסיות שונות?

מתרחשת קטסטרופה שקטה. 3 כרטיסיות מריצות את אותו סוכן במקביל, שורפות טוקנים כפולים ב-API, ודורסות אחת לשנייה את התוצאות במגירה המקומית.

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

משתמש טיפוסי ב-2026 פותח עשרות כרטיסיות במקביל. כשאפליקציית ה-AI שלכם מנסה לסנכרן מצב מקומי (State) או להזרים תשובות מ-LLM, כל כרטיסייה פועלת כאילו היא יחידה בעולם.

התוצאה ההרסנית:

• פניות כפולות ומיותרות ל-APIs יקרים.
• שגיאות כתיבה ל-IndexedDB בגלל גישה מקבילית.
• זליגת זיכרון ועומס מיותר על מעבד ה-GPU של המשתמש.

2. היכרות עם Web Locks API: הרמזור של הדפדפן

הגדרה · Web Locks API

ממשק תכנות מובנה בדפדפן (navigator.locks) המאפשר לסקריפטים בכרטיסיות שונות של אותו Origin לתאם גישה למשאבים משותפים.

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

אם כרטיסייה א' מפעילה את הסוכן, היא מבקשת מנעול (Lock). כל עוד המנעול אצלה, כרטיסיות ב' ו-ג' יחכו בתור או יבצעו דילוג חכם.

3. אלגוריתם Leader Election: מי מנהל את סוכן ה-AI?

הדרך הנכונה לעבוד היא למנות כרטיסייה מובילה (Leader). רק היא מחזיקה בחיבור ה-WebSocket או מריצה את ה-Stream מול מודל ה-AI.

async function runAITask() {
  await navigator.locks.request('ai_agent_leader', async (lock) => {
    // הכרטיסייה הזו היא המנהלת
    console.log('אני הלידר, מריץ את הסוכן...');
    await startAgentStream();
  });
}

זה עובד נפלא.

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

💡

Web Locks API פותר את בעיית ה-Crash: אם כרטיסייה קורסת, הדפדפן משחרר את המנעול אוטומטית. אין יותר מנעולים יתומים שתקועים בזיכרון.

4. מניעת כתיבה כפולה ל-IndexedDB ול-Local State

כאשר סוכן ה-AI מחזיר תשובה ארוכה, אתם רוצים לשמור אותה ב-IndexedDB כדי לא לאבד מידע. אם שתי כרטיסיות יכתבו את אותו ה-Chunk במקביל, הנתונים יתערבבו.

async function saveResponseChunk(chunk) {
  await navigator.locks.request('db_writer', { mode: 'exclusive' }, async () => {
    await updateIndexedDB(chunk);
  });
}

אפשר להשתמש במנעולים מסוג shared לקריאה ו-exclusive לכתיבה, ממש כמו בבסיסי נתונים מתקדמים.

5. שילוב AbortController וטיפול בביטולים

מה קורה אם המשתמש לוחץ "בטל" בכרטיסייה ב', בזמן שכרטיסייה א' היא זו שמריצה את המשימה בפועל?

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

סיכום

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

💡

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