שימוש ב-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, צריך להגדיר את החיבור בין ה-backend לבין התוסף. החיבור הזה מורכב משני חלקים – ספק ה-Push ושירות ה-Push. ספק הוא ה-SDK שבו אתם משתמשים כדי לשלוח את ההודעה לשירות הדחיפה. יש הרבה אפשרויות שונות, וכל ספק של הודעות פוש יכול לעבוד עם Push API (אבל יכול להיות שהוא לא יציע SDK שיאפשר שילוב פשוט). כדי לדעת מה אפשר לעשות, צריך להתנסות עם ה-SDK של הספק. שירות Push הוא השירות שבו המכשיר של משתמש הקצה רשום, כדי שיוכל לקבל התראה על כל הודעת Push שנשלחת על ידי ספק Push. אין לכם שליטה על זה, כי זה מקודד בדפדפנים השונים. ב-Chrome, שירות ה-Push הוא Firebase Cloud Messaging. כל ההודעות שנדחפות למשתמש Chrome ינותבו דרכו.

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

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

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

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, אפשר לרשום מאזין להודעות פוש ב-service worker של התוסף.

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

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

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

דחיפה שקטה

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

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