ניפוי באגים באפליקציות מסוג Progressive Web App

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

משתמשים בחלונית Application כדי לבדוק, לשנות ולנפות באגים במניפסטים של אפליקציות אינטרנט, ב-Service Workers ובמטמון של Service Worker.

אפליקציות מסוג Progressive Web App ‏(PWA) הן אפליקציות מודרניות באיכות גבוהה שנוצרו באמצעות טכנולוגיית אינטרנט. לאפליקציות PWA יש יכולות דומות לאפליקציות ל-iOS, ל-Android ולמחשב. סוגי המשנה הם:

  • אמינות גם בתנאים של רשת לא יציבה.
  • אפשר להתקין את הווידג'ט כדי להפעיל משטחים של מערכות הפעלה, כמו התיקייה Applications ב-Mac OS X, התפריט Start ב-Windows ומסך הבית ב-Android וב-iOS.
  • המודעות יכולות להופיע במחליפים בין פעילויות, במנועי חיפוש של מכשירים כמו Spotlight ובגיליונות לשיתוף תוכן.

המדריך הזה עוסק רק בתכונות של Progressive Web App בחלונית Application. אם אתם מחפשים עזרה בחלוניות האחרות, עיינו בחלק האחרון במדריך הזה, מדריכים ללוחות אפליקציות אחרים.

סיכום

  • בכרטיסייה Manifest אפשר לבדוק את המניפסט של אפליקציית האינטרנט.
  • בכרטיסייה Service Workers תוכלו להגדיר מגוון רחב של משימות שקשורות ל-Service Worker, כמו ביטול רישום או עדכון של שירות, אמולציה של אירועי Push, מעבר למצב אופליין או הפסקת שירות Service Worker.
  • להציג את המטמון של ה-Service Worker מהכרטיסייה אחסון המטמון.
  • ביטול הרישום של קובץ שירות (service worker) וניקוי כל האחסון והמטמון בלחיצה אחת בכרטיסייה נקה אחסון.

מניפסט של אפליקציית אינטרנט

אם אתם רוצים שהמשתמשים יוכלו להוסיף את האפליקציה שלכם לתיקייה Applications ב-Mac OS X, לתפריט Start ב-Windows ולמסך הבית ב-Android וב-iOS, תצטרכו מניפסט של אפליקציית אינטרנט. המניפסט מגדיר איך האפליקציה מופיעה במסך הבית, לאן להפנות את המשתמש כשהיא מופעלת ממסך הבית ואיך האפליקציה נראית כשהיא מופעלת.

אחרי שמגדירים את המניפסט, אפשר לבדוק אותו בכרטיסייה Manifest בחלונית Application.

הכרטיסייה Manifest.

  • כדי לעיין במקור המניפסט, לוחצים על הקישור שמתחת לתווית מניפסט האפליקציה (manifest.webmanifest בצילום המסך שלמעלה).
  • בקטעים Identity ו-Slides מוצגים שדות ממקור המניפסט באופן ידידותי יותר למשתמש.
  • בקטע Protocol Handlers (handlers של פרוטוקול) אפשר לבדוק את הרישום של ה-handler לפרוטוקול כתובת ה-URL של ה-PWA בלחיצה על לחצן. למידע נוסף, ראו בדיקת רישום handler של פרוטוקול כתובת URL.
  • בקטע סמלים מוצגים כל הסמלים שציינתם, ואפשר לבדוק את המסכות שלהם.
  • בקבוצת הקטעים קיצור דרך מס' N מוצג מידע על כל אובייקטי קיצור הדרך.
  • בקבוצת הקטעים צילום מסך #N מוצגים צילומי המסך עבור ממשק משתמש עשיר יותר להתקנה של האפליקציה.

בנוסף, אם כלי הפיתוח נתקל בשגיאה, כמו סמל שלא ניתן לטעון, בכרטיסייה Manifest יופיע הקטע Installability שמתאר את השגיאה.

הקטע Installability בכרטיסייה Manifest.

הצגה ובדיקה של סמלים שניתן להתאים (maskable)

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

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

הצגת האזורים הבטוחים המינימליים לסמלים שניתנים למיסוך.

אם הלוגו כולו גלוי באזור הבטוח, אין בעיה.

התקנת טריגר

ב-Chrome אפשר להפעיל ולקדם את ההתקנה של ה-PWA ישירות בממשק המשתמש. איך לספק חוויית התקנה משלכם בתוך האפליקציה

כדי להתחיל את תהליך ההתקנה של ה-PWA:

  1. פותחים את דף הנחיתה של אפליקציית ה-PWA ב-Chrome.

  2. בצד שמאל של סרגל הכתובות בחלק העליון, לוחצים על התקנה. התקנה.

    לחצן ההתקנה.

  3. פועלים לפי ההוראות במסך.

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

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

בדיקת מקשי הקיצור

קיצורי דרך לאפליקציות מאפשרים לכם לספק גישה מהירה לכמה פעולות נפוצות שהמשתמשים צריכים לעיתים קרובות.

כדי לבדוק את קיצורי הדרך שהגדרתם בקובץ המניפסט, גוללים לקטע קיצור דרך מס' N בכרטיסייה Manifest.

הקטע 'קיצור דרך' בכרטיסייה 'מניפסט'.

בדיקת צילומי מסך כדי לקבל ממשק משתמש עשיר יותר להתקנה

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

כדי לבדוק את צילומי המסך, גוללים לקטע צילום מסך מס' N בכרטיסייה Manifest.

תיבת הדו-שיח להתקנה וצילומי המסך בכרטיסייה 'מניפסט'.

בדיקת רישום של Handler לפרוטוקול כתובת URL

אפליקציות PWA יכולות לטפל בקישורים שמשתמשים בפרוטוקול ספציפי כדי ליהנות מחוויה משולבת יותר. במאמר רישום handlers של פרוטוקול כתובת URL ל-PWA מוסבר איך יוצרים Handler.

כדי לבדוק את הטיפול:

  1. פותחים את כלי הפיתוח בדף הנחיתה של ה-PWA. לדוגמה, אפשר לעיין בדמו של אפליקציית PWA.
  2. בדף ההדגמה, מתקינים את ה-PWA וטוענים מחדש את האפליקציה בסיום ההתקנה. הדפדפן רשם עכשיו את ה-PWA כ-handler לפרוטוקול web+coffee.
  3. בקטע Application‏ > Manifest‏ > Protocol Handler, מזינים את כתובת ה-URL שרוצים שה-handler יבדוק ולוחצים על Test protocol. בדיקת ה-handler. בדוגמה הזו, ה-handler יכול לעבד את americano, את chai ואת latte-macchiato.
  4. כש-Chrome שואל אם אפשר לפתוח את האפליקציה, מאשרים באמצעות לחיצה על Open Protocol Handler. פותחים את האפליקציה.
  5. בתיבת הדו-שיח הבאה, צריך לאפשר לאפליקציה לטפל בקישורי web+coffee. אישור לטפל בקישורים.

אם הטיפול בקישור יסתיים בהצלחה, תוצג באפליקציה תמונה של כוס קפה פתוחה.

קובצי שירות (service worker)

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

מדריכים קשורים:

הכרטיסייה Service Workers בחלונית Application היא המקום הראשי ב-DevTools לבדיקה ולניפוי באגים של שירותי עובדים.

הכרטיסייה Service Workers.

  • אם קובץ שירות (service worker) מותקן בדף שפתוח כרגע, הוא יופיע בכרטיסייה הזו. לדוגמה, בצילום המסך שלמעלה מוצג שירות עובד (service worker) שהותקן ברמת ההיקף של https://airhorner.com/.
  • תיבת הסימון תיבת סימון. Offline מעבירה את כלי הפיתוח למצב אופליין. הפעולה הזו מקבילה למצב אופליין שזמין בחלונית רשת או לאפשרות Go offline בתפריט הפקודה.
  • תיבת הסימון תיבת סימון. עדכון בזמן טעינה מחדש מאלצת את ה-service worker להתעדכן בכל טעינת דף.
  • תיבת הסימון תיבת סימון. עקיפת רשת עוקפת את קובץ השירות ומאלצת את הדפדפן לעבור לרשת כדי לקבל את המשאבים המבוקשים.
  • הקישור בקשות רשת יעביר אתכם לחלונית רשת עם רשימה של בקשות שחוסמו שקשורות ל-service worker (מסנן is:service-worker-intercepted).
  • הקישור Update מבצע עדכון חד-פעמי של ה-service worker שצוין.
  • הלחצן Push מדמה התראה ללא מטען ייעודי (נקראת גם tickle).
  • הלחצן סנכרון מדמה איר��ע סנכרון ברקע.
  • הקישור ביטול רישום מבטל את הרישום של קובץ השירות שצוין. במאמר פינוי נפח האחסון מוסבר איך לבטל את הרישום של עובד שירות ולמחוק את האחסון והמטמון בלחיצה אחת על לחצן.
  • השורה מקור מציינת מתי קובץ השירות (service worker) שפועל כרגע הותקן. הקישור הוא השם של קובץ המקור של ה-Service Worker. לחיצה על הקישור תעביר אתכם למקור של העובד בשירות.
  • בשורה סטטוס מוצג הסטטוס של קובץ השירות (service worker). המספר בשורה הזו (#16 בצילום המסך) מציין כמה פעמים ה-service worker עודכן. אם מפעילים את התיבה תיבת סימון. Update on reload (עדכון בטעינה מחדש), אפשר לראות שהמספר עולה בכל טעינת דף. לצד הסטטוס יופיע קישור start (אם עובד השירות מושבת) או קישור stop (אם עובד השירות פועל). ה-Service Workers פותחו על ידי הדפדפן וצריכים לעצור ולהפעיל אותו בכל שלב. אפשר לדמות את המצב הזה על ידי הפסקה מפורשת של ה-service worker באמצעות הקישור stop. עצירת ה-service worker היא דרך מצוינת לבדוק איך הקוד מתנהג כשה-service worker מתחיל לפעול שוב. הוא חושף באגים לעיתים קרובות בגלל הנחות שגויות לגבי מצב גלובלי מתמשך.
  • השורה Clients מציגה את המקור בהיקף של Service Worker. הלחצן המיקוד שימושי בעיקר כשיש מספר פריטי שירות (service worker) רשומים. אם לוחצים על הלחצן focus ליד קובץ שירות (service worker) שפועל בכרטיסייה אחרת, Chrome מתמקד בכרטיסייה הזו.

  • הטבלה עדכון מחזור מציגה את הפעילויות של קובץ השירות ואת משך הזמן שחלף, כמו התקנה, המתנה והפעלה. כדי לראות את חותמת הזמן המדויקת של כל פעילות, לוחצים על הרחבה. לחצני ההרחבה.

    פעילויות וחותמות הזמן שלהן.

    מידע נוסף מופיע במאמר מחזור החיים של Service Worker.

אם ה-service worker גורם לשגיאות, בכרטיסייה Service Workers יופיע הסמל שגיאה. שגיאה עם מספר השגיאות לצד השורה מקור. הקישור למספר יעביר אתכם אל המסוף שבו מופיעות כל השגיאות שנרשמו ביומן.

שגיאות של שירותים עובדים במסוף.

כדי להציג מידע על כל ה-Service Workers, לוחצים על הצגת כל ההרשמות בתחתית הכרטיסייה Service Workers. הקישור הזה מפנה אל chrome://serviceworker-internals/?devtools, שם אפשר לבצע ניפוי באגים נוסף ב-Service Worker.

רישומים של עובדי שירות ב-serviceworker-internal.

מטמון של קובצי שירות (service worker)

בכרטיסייה Cache Storage מוצגת רשימה לקריאה בלבד של משאבים ששמורים במטמון באמצעות Cache API (שירות לעבודה ברקע).

כרטיסיית מטמון של Service Worker.

חשוב לזכור: בפעם הראשונה שפותחים מ��מון ומוסיפים לו משאב, יכול להיות ש-DevTools לא יזהה את השינוי. טוענים מחדש את הדף ואמור להופיע המטמון.

אם יש לכם שני מטמונים או יותר פתוח��ם, ��ם ��ופיעו ��ר��ימה מתחת לתפריט הנפתח אחסון מטמון.

מספר מטמון של Service Worker.

ניצול המכסה

יכול להיות שחלק מהתשובות בכרטיסייה 'אחסון במטמון' יסומנו כ'לא שקופות'. הכוונה לתגובה שאוחזרה ממקור אחר, כמו מ-CDN או מ-API מרוחק, כש-CORS לא מופעל.

כדי למנוע זליגת מידע בין דומיינים, נוספת תוספת משמעותית לגודל התגובה האטומה שמשמשת לחישוב מגבלות המכסה של האחסון (כלומר, אם מתרחשת זריקת חריגה מסוג QuotaExceeded) וה-API של navigator.storage מדווח עליה.

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

מדריכים קשורים:

פינוי שטח אחסון

הכרטיסייה נקה נפח אחסון היא תכונה שימושית מאוד לפיתוח אפליקציות מסוג Progressive Web App. הכרטיסייה הזו מאפשרת לבטל את הרישום של Service Worker ולנקות את כל המטמון והאחסון בלחיצה אחת. כדי לקבל מידע נוסף, אפשר לעיין בקטע שבהמשך.

מדריכים קשורים:

מדריכים נוספים לפאנל האפליקציות

במדריכים הבאים אפשר למצוא עזרה נוספת לגבי שאר החלונות בחלונית Application.

מדריכים קשורים: