שימוש ב-Web Push

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

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

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

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

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

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

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

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

כל ספק Push יכול לעבוד, אבל לא כל הספקים מציעים SDK שעובד ב-Service Workers. במקרה שאתם נתקלים בבעיות בהפעלה של הספק, עליכם להתייעץ עם הספק. עם זאת, לא צריך להשתמש בספק ציבורי. באמצעות ספריות כמו 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;
}

הערך שצוין מועבר ל-Push Manager

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, אתם יכולים לרשום את ה-listener לקבלת הודעות Push ב-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.

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

דחיפה שקטה

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

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