שימוש ב-Web Push

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

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

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

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

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

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

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

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

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

הערך שסופק מועבר ל-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.

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

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

כאשר ה-listener נמצא, תוכלו לשלוח הודעה ב- web-push-codelab.glitch.me, וההודעות יתחברו אל במסוף של קובץ השירות.

מכיוון שזהו תקן אינטרנט פתוח, יש הרבה מסמכים קיימים בנושא איך להטמיע את 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
});