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

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

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

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

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

סיכום

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

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

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

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

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

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

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

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

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

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

התקנת טריגר

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

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

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

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

אם אתם רוצים לבדוק את חוויית השימוש האמיתית בנייד, תוכלו לחבר מכשיר נייד אמיתי ל-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.בדוגמה הזו, הטיפול יכול לעבד את americano,‏ chai ו-latte-macchiato.
4. כשמוצגת ב-Chrome השאלה אם לפתוח את האפליקציה, לוחצים על פתיחת הכלי לטיפול בפרוטוקולים כדי לאשר.
5. בתיבת הדו-שיח הבאה, מאשרים לאפליקציה לטפל בקישורים מסוג web+coffee.

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

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

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

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

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

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

• אם עובד שירות מותקן בדף הפתוח כרגע, הוא יופיע בכרטיסייה הזו. לדוגמה, בצילום המסך שלמעלה מוצג שירות עובד (service worker) שהותקן ברמת ההיקף של https://airhorner.com/.
• תיבת הסימון Offline מעבירה את כלי הפיתוח למצב אופליין. זהו מצב מקביל למצב אופליין שזמין בחלונית Network (רשת) או באפשרות Go offline בCommand Menu (תפריט הפקודות).
• תיבת הסימון עדכון בזמן טעינה מחדש מאלצת את ה-service worker להתעדכן בכל טעינת דף.
• תיבת הסימון Bypass for network מעקפת את ה-service worker ומאלצת את הדפדפן לעבור לרשת כדי לקבל את המשאבים המבוקשים.
• הקישור בקשות רשת יעביר אתכם לחלונית רשת עם רשימה של בקשות שחוסמו שקשורות ל-service worker (מסנן is:service-worker-intercepted).
• הקישור עדכון מבצע עדכון חד-פעמי של ה-service worker שצוין.
• הלחצן Push מדמה התראה ללא מטען ייעודי (Payload) (שנקראת גם tickle).
• לחצן סנכרון מחקה אירוע של סנכרון ברקע.
• הקישור ביטול רישום מבטל את הרישום של קובץ השירות שצוין. במאמר פינוי נפח האחסון מוסבר איך לבטל את הרישום של עובד שירות ולמחוק את האחסון והמטמון בלחיצה אחת על לחצן.
• השורה מקור מציינת מתי קובץ השירות (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. הלחצן focus שימושי בעיקר כשיש כמה שירותי עובדים רשומים. אם לוחצים על הלחצן focus לצד שירות עובד שפועל בכרטיסייה אחרת, Chrome מתמקד בכרטיסייה הזו.
• בטבלה מחזור עדכונים מוצגות הפעילויות של ה-service worker והזמנים שחלפו, כמו התקנה, המתנה והפעלה. כדי לראות את חותמת הזמן המדויקת של כל פעילות, לוחצים על הלחצנים הרחבה.
  
  מידע נוסף זמין במאמר מחזור החיים של שירות העבודה.

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

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

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

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

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

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

ניצול המכסה

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

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

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

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

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

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

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

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

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

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

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

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

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