ב-Codelab הזה תלמדו איך להשתמש ב-service worker כדי לנהל התראות. ההוראות כאן מבוססות על ההנחה שכבר שמעתם על שירותי worker ועל העקרונות הבסיסיים של בקשת הרשאה לקבלת התראות ושליחת התראות. אם אתם צריכים רענון לגבי התראות, תוכלו לעיין במאמר תחילת העבודה עם Notifications API. למידע נוסף על Service Worker, כדאי לקרוא את המאמר מבוא ל-service worker של מאט גונט.
יצירת רמיקס של האפליקציה לדוגמה והצגה שלה בכרטיסייה חדשה
ההתראות חסומות באופן אוטומטי באפליקציית Glitch המוטמעת, כך שלא ניתן להציג תצוגה מקדימה של האפליקציה בדף הזה. במקום זאת, צריך לבצע את הפעולות הבאות:
- לוחצים על רמיקס לעריכה כדי לערוך את הפרויקט.
- כדי לראות תצוגה מקדימה של האתר, לוחצים על View App (הצגת האפליקציה) ואז על Fullscreen (מסך מלא).
Glitch אמור להיפתח בכרטיסייה חדשה ב-Chrome.
במהלך העבודה ב-codelab הזה, תוכלו לבצע שינויים בקוד ב-Glitch המוטמע בדף הזה. כדאי לרענן את הכרטיסייה החדשה עם האפליקציה הפעילה כדי לראות את השינויים.
מעיינים באפליקציה לדוגמה ובקוד ההתחלה
מתחילים בבדיקה של האפליקציה הפעילה בכרטיסייה החדשה ב-Chrome:
- מקישים על Control+Shift+J (או על Command+Option+J ב-Mac) כדי לפתוח את DevTools.
לוחצים על הכרטיסייה מסוף.
מוודאים שהאפשרות מידע מסומנת בתפריט הנפתח רמות לצד התיבה סינון.
במסוף DevTools של האפליקציה הפעילה, אמורה להופיע הודעת מסוף:
TODO: Implement getRegistration()
.זוהי הודעה מ-stub של פונקציה שתטמיעו ב-Codelab הזה.
עכשיו נסתכל על הקוד של האפליקציה לדוגמה ב-Glitch המוטמע בדף הזה.
ב-Glitch המוטמע, בודקים את
public/index.js
:יש ארבע stubs לפונקציות שתטמיעו:
registerServiceWorker
,getRegistration
,unRegisterServiceWorker
ו-sendNotification
.הפונקציה
requestPermission
מבקשת מהמשתמש הרשאה לשלוח התראות. אם השלמת את הקודלאב 'תחילת העבודה עם Notifications API', תבחין שבקוד הזה נעשה שימוש בפונקציהrequestPermission
. ההבדל היחיד הוא שהיא מעדכנת עכשיו גם את ממשק המשתמש אחרי פתרון בקשת ההרשאה.הפונקציה
updateUI
מרעננת את כל הלחצנים וההודעות של האפליקציה.הפונקציה
initializePage
מבצעת זיהוי תכונות של יכולות של שירותי עבודה בדפדפן ומעדכנת את ממשק המשתמש של האפליקציה.הסקריפט ממתין עד שהדף נטען ואז מאתחלל אותו.
ב-Glitch המוטמע, פותחים את
public/service-worker.js
.כפי שרומז השם, תצטרכו להוסיף לאפליקציה קוד כדי לרשום את הקובץ הזה בתור service worker.
האפליקציה עדיין לא משתמשת בקובץ, אבל הוא מכיל קוד התחלה שיציג הודעה במסוף כשה-service worker יופעל.
תוסיפו קוד ל-
public/service-worker.js
כדי לטפל בהתראות כשהן מתקבלות על ידי ה-service worker.
רישום קובץ השירות (service worker)
בשלב הזה צריך לכתוב קוד שרץ כשהמשתמש לוחץ על Register Service worker בממשק המשתמש של האפליקציה.
הקוד הזה ירשום את public/service-worker.js
כ-service worker.
פותחים את
public/index.js
בעורך המוטמע של Glitch. מחליפים את הפונקציהregisterServiceWorker
בקוד הבא:// Use the Service Worker API to register a service worker.
async function registerServiceWorker() {
await navigator.serviceWorker.register('./service-worker.js')
updateUI();
}לתשומת ליבך, מערכת
registerServiceWorker
משתמשת בהצהרהasync function
כדי להקל על הטיפול. כך תוכלוawait
את הערך המפוקח שלPromise
. לדוגמה, הפונקציה שלמעלה ממתינה לתוצאה של רישום Service Worker לפני עדכון ממשק המשתמש. מידע נוסף זמין בכתובתawait
ב-MDN.עכשיו, כשהמשתמש יכול לרשום שירות עבודה, אפשר לקבל הפניה לאובייקט הרישום של שירות העבודה. ב-
public/index.js
, מחליפים את הפונקציהgetRegistration
בקוד הבא:// Get the current service worker registration.
function getRegistration() {
return navigator.serviceWorker.getRegistration();
}הפונקציה שלמעלה משתמשת ב-Service Worker API כדי לקבל את הרישום הנוכחי של Service Worker, אם קיים. כך קל יותר לקבל הפניה לרישום של ה-service worker.
כדי להשלים את הפונקציונליות של רישום קובץ השירות, מוסיפים קוד לביטול הרישום של קובץ השירות. מחליפים את הפונקציה
unRegisterServiceWorker
בקוד הבא:// Unregister a service worker, then update the UI.
async function unRegisterServiceWorker() {
// Get a reference to the service worker registration.
let registration = await getRegistration();
// Await the outcome of the unregistration attempt
// so that the UI update is not superceded by a
// returning Promise.
await registration.unregister();
updateUI();
}
בכרטיסייה שבה מוצגת האפליקציה הפעילה, טוענים מחדש את הדף. כעת הלחצנים רישום קובץ שירות (service worker) וביטול הרישום של קובץ שירות (service worker) אמורים לפעול.
שליחת התראות ל-Service Worker
בשלב הזה, כותבים קוד שיופעל כשהמשתמש ילחץ על שליחת התראה בממשק המשתמש של האפליקציה. הקוד הזה ייצור התראה, יבדוק שה-Service Worker רשום ולאחר מכן ישלח את ההתראה ל-Service Worker באמצעות השיטה postMessage
שלו.
בעורך Glitch Editor המוטמע, פותחים את public/index.js
ומחליפים את הפונקציה sendNotification
בקוד הבא:
// Create and send a test notification to the service worker.
async function sendNotification() {
// Use a random number as part of the notification data
// (so you can tell the notifications apart during testing!)
let randy = Math.floor(Math.random() * 100);
let notification = {
title: 'Test ' + randy,
options: { body: 'Test body ' + randy }
};
// Get a reference to the service worker registration.
let registration = await getRegistration();
// Check that the service worker registration exists.
if (registration) {
// Check that a service worker controller exists before
// trying to access the postMessage method.
if (navigator.serviceWorker.controller) {
navigator.serviceWorker.controller.postMessage(notification);
} else {
console.log('No service worker controller found. Try a soft reload.');
}
}
}
זה מה שהקוד הזה עושה:
sendNotification
היא פונקציה אסינכרונית, כך שאפשר להשתמש ב-await
כדי לקבל הפניה לרישום של ה-service worker.ה-method
postMessage
של ה-Service Worker שולחת נתונים מהאפליקציה אל ה-Service Worker. מידע נוסף זמין במסמכי התיעוד של MDN בנושא postMessage.הקוד בודק את נוכחות המאפיין
navigator.serviceWorker.controller
לפני שמנסים לגשת לפונקציהpostMessage
. הערך שלnavigator.serviceWorker.controller
יהיהnull
אם אין קובץ שירות פעיל, או אם הדף עודכן בכוח (Shift+
טעינה מחדש). מידע נוסף זמין במסמכי העזרה של בקר ServiceWorker ב-MDN.
טיפול בהתראות ב-Service Worker
בשלב הזה, נכתוב קוד ב-service worker שיטפל בהודעות שיישלחו אליו ויציג התראות למשתמש.
בכלי המוטמע של Glitch Editor, פותחים את public/service-worker.js
. מוסיפים את הקוד הבא לסוף הקובץ:
// Show notification when received
self.addEventListener('message', (event) => {
let notification = event.data;
self.registration.showNotification(
notification.title,
notification.options
).catch((error) => {
console.log(error);
});
});
הנה הסבר קצר:
self
הוא הפניה ל-service worker עצמו.עכשיו ה-service worker מטפל בהצגת ההתראות, אבל ממשק המשתמש הראשי של האפליקציה עדיין אחראי לקבלת הרשאה מהמשתמש להצגת התראות. אם לא ניתנת הרשאה, ההתחייבות שחוזרת מ-
showNotification
נדחית. בקוד שלמעלה נעשה שימוש בבלוקcatch
כדי למנוע שגיאת דחייה מסוגPromise
שלא תתפס, ולטפל בשגיאה הזו בצורה קצת יותר נעימה.
אם נתקעתם, תוכלו למצוא את הקוד המלא בכתובת glitch.com/edit/#!/codelab-notifications-service-worker-completed.
ממשיכים ל-Codelab הבא בסדרה: פיתוח שרת התראות.