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

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

אפליקציות מסוג 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 בכרטיסייה Cache Storage (אחסון מטמון).
• ביטול הרישום של service worker ומחיקה של כל האחסון והמטמון בלחיצת כפתור אחת בכרטיסייה Clear storage (ניקוי האחסון).

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

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

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

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

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

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

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

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

אם הלוגו כולו גלוי באזור הבטוח, אפשר להמשיך.

הפעלת הטריגר

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

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

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

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

   

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

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

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

בדיקת קיצורי דרך

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

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

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

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

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

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

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

כדי לבדוק את ה-handler:

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

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

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

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

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

• מבוא ל-Service Workers
• התראות: בזמן, רלוונטיות ומדויקות

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

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

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

  

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

אם קובץ השירות גורם לשגיאות, בכרטיסייה Service Workers מופיע הסמל Error עם מספר השגיאות לצד השורה Source. הקישור עם המספר מעביר אתכם אל המסוף עם כל השגיאות שנרשמו.

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

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

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

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

אם פתוחים שני מטמונים או יותר, הם יופיעו ברשימה שמתחת לתפריט הנפתח Cache Storage.

ניצול המכסה

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

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

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

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

• Stack Overflow: What limitations apply to opaque responses?
• Workbox: מידע על מכסת האחסון

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

הכרטיסייה Clear Storage (ניקוי האחסון) היא תכונה שימושית מאוד כשמפתחים אפליקציות אינטרנט מתקדמות (PWA). בכרטיסייה הזו אפשר לבטל את הרישום של Service Workers ולנקות את כל המטמון והאחסון בלחיצת כפתור אחת. מידע נוסף מפורט בהמשך.

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

• פינוי נפח אחסון

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

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

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

• בדיקת משאבי הדף
• בדיקה וניהול של אחסון מקומי ומטמונים