ממשקי דפדפן שימושיים למפתחים

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

localStorage ו-sessionStorage - שמירת נתונים בדפדפן

localStorage שומר נתונים בדפדפן שנשארים גם אחרי סגירת הדף, עד שמישהו מוחק אותם במפורש. sessionStorage דומה, אבל נמחק כשסוגרים את הטאב. שניהם שומרים רק מחרוזות, אז אובייקטים צריך להמיר עם JSON.stringify ו-JSON.parse.

localStorage.setItem("theme", "dark");
const theme = localStorage.getItem("theme");

const user = { name: "דנה", id: 5 };
localStorage.setItem("user", JSON.stringify(user));
const savedUser = JSON.parse(localStorage.getItem("user"));

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

IntersectionObserver - לדעת מתי אלמנט נכנס למסך

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

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      console.log("האלמנט נכנס למסך");
      entry.target.classList.add("visible");
    }
  });
});

const element = document.querySelector(".fade-in-section");
observer.observe(element);

Clipboard API - העתקה ללוח בלחיצת כפתור

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

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log("הועתק בהצלחה");
  } catch (error) {
    console.log("ההעתקה נכשלה");
  }
}

copyToClipboard("https://amittech.dev");

Geolocation API - מיקום המשתמש

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

navigator.geolocation.getCurrentPosition(
  (position) => {
    console.log(position.coords.latitude, position.coords.longitude);
  },
  (error) => {
    console.log("המשתמש סירב או שהייתה שגיאה");
  }
);

Notification API - התראות מערכת

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

async function notify() {
  const permission = await Notification.requestPermission();
  if (permission === "granted") {
    new Notification("הודעה חדשה הגיעה");
  }
}

matchMedia - בדיקת מדיה ב-JavaScript

בדיוק כמו @media ב-CSS, אבל בקוד. שימושי לבדוק גודל מסך, העדפת ערכת נושא כהה, או prefers-reduced-motion, ולהגיב לזה בלוגיקה, לא רק בעיצוב.

const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
console.log(darkModeQuery.matches); // true אם המשתמש מעדיף מצב כהה

darkModeQuery.addEventListener("change", (event) => {
  console.log("העדפת ערכת הנושא השתנתה:", event.matches);
});

למה כדאי להכיר את הכלים האלה, לא רק ספריות

הרבה פעמים מתחילים מחפשים ישר ספרייה חיצונית לכל בעיה - ספרייה לגלילה אינסופית, ספרייה להעתקה ללוח. לפעמים זה מוצדק, אבל הרבה פעמים הדפדפן כבר נותן פתרון מובנה, קל משקל, ובלי תלות (dependency) נוספת שצריך לתחזק ולעדכן. להכיר את ה-Web APIs האלה נותן לכם אפשרות לבחור נכון - ספרייה כשבאמת שווה, כלי מובנה כשמספיק.

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

לסיכום

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

יש Web API שאתם רוצים שנסביר בפירוט? תשאלו בדיסקורד.

הצטרפו לקהילה בדיסקורד