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

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. אם אתם מחפשים עזרה בחלוניות האחרות, ניתן לעיין בחלק האחרון במדריך הזה, Other Application Panel Panel.

סיכום

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

קובץ המניפסט של אפליקציית אינטרנט

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

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

החלונית Manifest.

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

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

הקטע Storeability (יכולת ההתקנה) בחלונית המניפסט.

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

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

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

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

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

הפעלת ההתקנה

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

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

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

    הלחצן 'התקנה'.

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

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

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

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

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

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

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

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

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

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

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

בדיקת רישום ה-handler של פרוטוקול כתובת ה-URL

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

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

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

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

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

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

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

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

החלונית Service Workers.

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

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

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

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

שגיאות של קובץ השירות (service worker) במסוף.

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

הרשמות של קובצי שירות (service worker) ב-serviceworker-internals.

מטמון של Service Worker

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

חלונית המטמון של Service Worker.

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

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

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

ניצול המכסה

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

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

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

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

צריך לפנות נפח אחסון

החלונית Clear Storage היא תכונה שימושית מאוד לפיתוח אפליקציות Progressive Web App. החלונית הזו מאפשרת לבטל את הרישום של קובצי שירות (service worker) ולנקות את כל המטמון והאחסון בלחיצה אחת. למידע נוסף, אפשר לעיין בקטע שבהמשך.

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

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

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

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