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

קייס בסקית
קייס בסקית
סופיה אמליאנובה
סופיה אמליאנובה

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

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

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

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

סיכום

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

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

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

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

חלונית המניפסט.

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

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

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

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

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

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

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

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

הפעלת ההתקנה

ב-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 יבדוק, ולוחצים על בדיקת הפרוטוקול. בדיקת ה-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 Workers.

  • אם קובץ שירות (service worker) מותקן בדף שפתוח כרגע, הוא יופיע בחלונית הזו. לדוגמה, בצילום המסך שלמעלה יש קובץ שירות (service worker) שהותקן עבור ההיקף https://airhorner.com/.
  • תיבת הסימון תיבת סימון. אופליין מעבירה את כלי הפיתוח למצב אופליין. האפשרות הזו מקבילה למצב אופליין שזמין בחלונית Network, או באפשרות 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, לוחצים על הצגת כל הרישומים בתחתית החלונית Service Workers. הקישור הזה מפנה אל chrome://serviceworker-internals/?devtools, שם אפשר להמשיך לנפות באגים ב-Service Workers.

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

מטמון של Service Worker

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

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

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

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

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

שימוש במכסה

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

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

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

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

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

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

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

קווי עזר לחלונית של אפליקציה

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

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