שימוש ב-Web Push

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

קבלת הרשאה לשימוש ב-Push API

כשרושמים שרת Push באתר רגיל, מוצגת למשתמש בקשה להעניק הרשאה או לדחות אותה. אם תשתמשו בתוספים, ההנחיה לא תוצג. כדי להשתמש ב-Push API בתוסף, צריך להגדיר את ההרשאה notifications בקובץ manifest.json

  {
    "manifest_version": 3,
    ...
    "permissions": ["notifications"]

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

ספקי Push ושירותי Push

אחרי שמוסיפים את ההרשאה לקובץ manifest.json, צריך להגדיר את החיבור בין הקצה העורפי לבין התוסף. אפשר לחשוב על החיבור הזה בשני חלקים – ספק ה-Push ושירות ה-Push. ספק הוא ה-SDK שבו אתם משתמשים כדי לשלוח את ההודעה לשירות Push. יש הרבה אפשרויות שונות, וכל ספק של הודעות Push יכול לעבוד עם Push API (אבל יכול להיות שהוא לא יציע ערכת SDK שמאפשרת שילוב פשוט). תצטרכו להתנסות ב-SDK של הספק כדי לראות מה אפשרי. שירות Push הוא השירות שאליו רשום המכשיר של משתמש הקצה, כדי שניתן יהיה לשלוח אליו התראות על כל הודעת Push שנשלחת על ידי ספק Push. אין לכם שליטה על זה, כי הוא מוטמע בקובצי הקוד של הדפדפנים השונים. ב-Chrome, העברת הודעות בענן ב-Firebase הוא שירות Push. כל ההודעות שיישלחו למשתמש ב-Chrome ינותבו דרכו.

אירוח עצמאי של ספק Push

כל ספק של הודעות Push יכול לפעול, אבל לא כל הספקים מציעים ערכת SDK שפועלת בקובצי שירות. אם תיתקלו בבעיות בהפעלת האפליקציה, תצטרכו להתייעץ עם הספק. עם זאת, אין צורך להשתמש בספק ציבורי. באמצעות ספריות כמו web-push, אפשר לארח קצה עורפי משלכם.

אפשר לבדוק את הספרייה הזו באמצעות web-push-codelab.glitch.me. באופן ספציפי, תצטרכו להעתיק את המפתח הציבורי של VAPID של שרת ה-Push כדי ליצור את המינוי ל-Push בדפדפן. המפתח הציבורי הזה הוא למעשה ערך בינארי בקידוד base64, שצריך לפענח ולהמיר ל-Uint8Array כדי לרשום אותו במנהל ההתראות של הדפדפן. יש ספריות זמינות לביצוע הלוגיקה הזו, אבל כל מה שצריך הוא הקוד הבא.

function urlB64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');

  const rawData = atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

הערך שסופק מועבר למנהל הדחיפה

const SERVER_PUBLIC_KEY = '_INSERT_VALUE_HERE_';
const applicationServerKey = urlB64ToUint8Array(SERVER_PUBLIC_KEY);

async function subscribe() {
  try {
    let subscription = await self.registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey
    });

    console.log(`Subscribed: ${JSON.stringify(subscription,0,2)}`);

    return subscription
  } catch (error) {
    console.error('Subscribe error: ', error);
  }
}

const subscription = await subscribe();

הפונקציה subscribe מחזירה PushSubscription, אובייקט שמכיל את המטא-נתונים של שרת ה-Push. מכיוון שאתם משתמשים ב-web-push-codelab.glitch.me, צריך להעתיק את הערך הזה לחלק של Push Subscription בדף.

ברגע שיש לך את PushSubscription, אפשר לרשום מאזינים להודעות Push ב-Service Worker של התוסף שלנו.

self.addEventListener('push', function (event) {
  console.log(`Push had this data/text: "${event.data.text()}"`);
});

אחרי שמגדירים את המאזין, אפשר לשלוח הודעה לכתובת web-push-codelab.glitch.me, וההודעות יירשמו ביומן במסוף של ה-service worker.

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

דחיפה שקטה

אפשר לקבל התראות בדחיפה בתוסף Manifest v3 מאז שהגרסה Manifest v3 הושקה ב-Chrome 88. עם זאת, תמיד הייתה דרישה שההתראה תכלול איזה סוג של הנחיה גלויה למשתמש, כמו התראה מהאינטרנט. לכן הוא היה פחות שימושי אם רציתם לדחוף פקודות או עדכוני נתונים לתוסף בלי להטריד את המשתמש בהוספת מידע מיותר. החל מגרסה Chrome 121, תוספים יכולים להגדיר את userVisibleOnly לערך false. עכשיו אפשר לשלוח למשתמשים התראות שקשות לזיהוי ולא מוצגות להם. כדי להשתמש בו, צריך להגדיר את userVisibleOnly ל-false כשקוראים לפונקציה pushManager.subscribe.

let subscription = await self.registration.pushManager.subscribe({
  userVisibleOnly: false,
  applicationServerKey
});