כל הכלים שזמינים לפיתוח אתרים שימושיים גם לפיתוח פרוגרסיבי של אפליקציות אינטרנט, כולל ספריות, frameworks, עורכי קוד, כלים למפתחים, כלים למפתחים, כלי לניפוי באגים ועוד. אבל כשעובדים עם יכולות ספציפיות ל-PWA, כמו יכולת התקנה, Service Workers, תמיכה במצב אופליין ועוד, כלים מסוימים ל-PWA שימושיים במיוחד. בואו נראה אותם בפעולה.
סימולטורים ומכשירים
כפי שצוין בפרק בנושא היסודות, כדאי להשתמש בדפוסי עיצוב אגנוסטיים כדי להציע את החוויה הטובה ביותר לכל משתמש בכל הקשר. עם זאת, מומלץ לבדוק את חוויית השימוש במכשירים שונים.
סביר להניח שלא יהיו לכם עשרות מכשירים פיזיים, כולל מכשירי iPhone, טלפונים של Android, טאבלטים, מחשבים שולחניים או מחשבים ניידים עם מערכות הפעלה שונות. לכן קיימים גם סימולטורים ואמולטורים.
סימולטורים פשוטים
רוב הכלים למפתחים בדפדפנים מאפשרים לבדוק את אפליקציות ה-PWA בגדלים שונים של מסכים או בתנאי רשת שונים, תוך שימוש במנוע דפדפן יחיד במחשב. חלק מהכלים האלה יכולים גם לאלץ סוכן משתמש אחר במסגרת הסימולציות האלה.
אלה כמה מהסימולטורים הזמינים:
- כלי הפיתוח ל-Chromium: מצב מכשיר, ויסות רשת (throttle) ומספר סימולציות של חיישנים
- כלים למפתחים ב-Firefox: מצב עיצוב רספונסיבי
- Safari Web Inspector: מצב עיצוב רספונסיבי
חלק מהפתרונות המסחריים והחינמיים מותאמים למפתחים ולמעצבים, כמו אפליקציה עם יכולת תגובה של קוד פתוח.
הסימולטורים של Apple
Apple מציעה את אפליקציית הסימולטור (שנקראה בעבר 'סימולטור iOS') שמאפשרת לכם לבדוק את אפליקציית האינטרנט שלכם במכשירי iPhone ו-iPad שונים בגרסאות שונות של מערכות הפעלה.
אפליקציית הסימולטור זמינה רק למחשבים עם macOS, והיא כוללת [Xcode, שזמין ב-AppStore. היא מדמה את iOS ו-iPadOS עם הגדרות שונות של המכשיר. היא כוללת את אפליקציית Safari האמיתית לנייד ואת מנוע ה-Web.app שבו נעשה שימוש כשה-PWA מותקנת במסך הבית, כך שהחוויה הסופית שרואים היא די מייצגת של מכשיר בפועל.
כדי להפעיל את האפליקציה, אחרי שמתקינים את Xcode, אפשר לפתוח את הסימולטור בתפריט Xcode על ידי בחירה ב-Open Developer Tools ואז ב-Simulator. כשאתם נכנסים לסימולטור, אתם יכולים לפתוח את Safari כאילו שאתם משתמשים ב-iPhone או ב-iPad אמיתי. כדי לפתוח מכשירים אחרים, צריך לבחור בתפריט File ואז Open Simulator.
הנה כמה קיצורי דרך שימושיים למפתחי אתרים שמשתמשים בסימולטור לבדיקת אפליקציות PWA:
Command-Shift-H: מעבר למסך הבית.Control-Command-Shift-H: גישה ל-App Switcher.Command-Rightו-Command-Left: מסובבים את המכשיר.
הסימולטור הוא לא מכונה וירטואלית, אלא אפליקציה שפועלת על מערכת macOS שנראית כמו iPhone או iPad, ולכן אין לה מחסנית TCP משלה. לכן, אם משתמשים ב-localhost בסימולטור, דפדפן Safari מפנה למכשיר localhost עם macOS.
כברירת מחדל, Xcode מתקין רק את הגרסה האחרונה של iOS, אבל אפשר לעבור אל Xcode, להשתמש בתפריט Preferences ולהוריד סימולטורים ישנים יותר מהכרטיסייה Components.
מומלץ לבדוק את ה-PWA בגרסה האחרונה של iOS, בגרסה המשנית הקודמת ובגרסה ראשית אחת קודמת לפחות.
אמולטורים של Android
הסביבה העסקית של Android מציעה אמולטורים שונים, אך אלה הזמינים בתוך Android SDK הם הנפוצים ביותר.
כמפתחי PWA, אתם צריכים גם דפדפנים באמולטור Android, דבר שיגרום לכם מורכבות לבצע את הבדיקה, כי AOSP (פרויקט קוד פתוח של Android) לא כולל את Google Chrome או את חנות Play להורדת דפדפנים. לכן, לא כל אמולטור של Android מתאים לבדיקת PWA.
ל-Android SDK יש שני כלים שימושיים לאמולציה:
- SDK Manager: מוריד ומעדכן גרסאות שונות של מערכות הפעלה ויישומי פלאגין.
- AVD Manager: מוסיף, עורך ומוחק מכשירים וירטואליים של Android (AVD), שכל אחד מהם מייצג מכשיר אחד שבו מותקנת מערכת הפעלה Android אחת, בדומה למכונה וירטואלית.
ניתן להתקין רק את Android SDK או את Android Studio, סביבת פיתוח משולבת (IDE) חינמית שכוללת את Android SDK עם אמולטורים. עם ה-SDK, תצטרכו להשתמש בשורת הפקודה כדי לפתוח ולהגדיר את האמולטורים. ב-Android Studio, אפשר לפתוח את הכלים הדרושים מהתפריט של מסך הפתיחה. ב-AVD Manager אפשר ליצור כמה מכשירים שרוצים, עם שילובים שונים של גודל מסך, יכולות וגרסת Android OS.
בעזרת אמולטור Android אפשר לבדוק את התמיכה בהתקנת ה-PWA, את כל חוויית המשתמש ואם היכולות שבהן אתם משתמשים פועלות כמצופה.
באמצעות Google Chrome
כדי להשתמש ב-Google Chrome באמולטור Android, צריך ליצור AVD שכולל את Play Services בפנים. כדי לעשות זאת, מוודאים שב-SDK שבו משתמשים עבור ה-AVD מופיע סמל Play, כמו שאפשר לראות בתמונה הבאה:
מכשירי AVD עם Play Services כוללים גם את חנות Play, כך שניתן לעדכן את Chrome לגרסה האחרונה לאחר הגדרת החשבון באמצעות חשבון Google.
שימוש בדפדפנים אחרים
אם משתמשים ב-AVD בשילוב עם Play Services, אפשר גם להוריד דפדפנים מחנות Play.
רוב הדפדפנים שזמינים ל-Android, כולל Samsung Internet, Microsoft Edge, Opera, Firefox ו-Brave, זמינים כ-APKs (חבילות Android). אם יש לכם APK של הדפדפן שאתם רוצים לבדוק, תוכלו פשוט לגרור את הקובץ לאמולטור או להתקין אותו באמצעות שורת הפקודה באמצעות ADB.
אמולטורים למחשב
אמולציה של מחשב אחר מתבצעת בדרך כלל באמצעות מערכת מכונה וירטואלית, כמו VirtualBox או VMWare. גם עם הכלים האלה לא ניתן לבצע אמולציה של סביבות מסוימות, כמו אמולציה של macOS ב-Windows או Linux, ויכול להיות שאפשרויות מסוימות אחרות ידרשו רישיון, כמו אמולציית Windows ב-macOS או ב-Windows.
שימוש במכשירים פיזיים
כדאי גם להשתמש במכשירים בפועל כדי לבדוק את ה-PWA. אנחנו לא צריכים להיות הבעלים של מספר מכשירים כי יש כמה פתרונות מבוססי-ענן שבהם אפשר להשתמש במכשירים פיזיים מרחוק. יש כמה פתרונות שניתנים בחינם וחלק מהפתרונות המסחריים עם גרסה ללא תשלום.
אחד מהפתרונות הזמינים הוא Samsung Remote Test Lab, פתרון חינמי לבדיקת ה-PWA במכשירי Samsung, כולל טלפונים, טאבלטים ומכשירים מתקפלים.
בדיקה מרחוק
כשרוצים לנפות באגים ב-Progressive Web App במכשיר בפועל, בסימולטור או באמולטור, כדאי לחבר סשן בדיקה מרחוק לכלי הדפדפן במחשב.
יש כלים מסחריים זמינים, אך כל הדפדפנים מציעים גם דרכים לעשות זאת, כולל:
- WebKit Remote Inspector לצורך התחברות ל-Safari והתקנת אפליקציות PWA בסימולטורים ובמכשירים שמחוברים ל-iOS ול-iPadOS.
- ניפוי באגים מרחוק ב-Chromium DevTools כדי להתחבר ל-Chrome, ל-Edge, לאינטרנט של Samsung ולדפדפנים אחרים מבוססי Chromium ב-Android וב-PWA שהותקנו מהדפדפנים האלה, כולל מכשירים פיזיים מחוברים ואמולטורים.
- ניפוי באגים מרחוק ב-Firefox כדי להתחבר אל Firefox for Android במכשירים מחוברים ובאמולטורים מחוברים.
העברה ליציאה אחרת עבור Android
כשבודקים אפליקציות PWA שזמינות ב-localhost במכשירים פיזיים או באמולטורים של Android, תהיה בעיה כי localhost יפנה אל ערימת ה-TCP של Android ולא אל מכונת הפיתוח.
כדאי להשתמש בכתובת ה-IP המקומית כתחליף ל-localhost, אבל זה לא רעיון טוב כי Service worker ויכולות רבות יפעלו רק עם חיבורי HTTPS, חוץ מ-localhost, כך שה-PWA לא תפעל במצב אופליין ולא תעבור את הקריטריונים של PWA.
ניתן לפתור את הבעיה על ידי הפעלה של העברה ליציאה אחרת בדפדפן Chromium במחשב. במקרה כזה, אפשר לגשר יציאה ב-localhost במכשיר Android לכל מקור ויציאה מהמחשב המארח, כולל localhost של מחשב הפיתוח. מידע נוסף זמין במדריך הזה.
דפדפני Chromium
דפדפני Chromium מציעים כלים רבים לניפוי באגים ולבדיקה של Progressive Web Apps, החל מכלי הפיתוח.
רוב הדפדפנים מבוססי Chromium, כולל Samsung Internet, Microsoft Edge ו-Google Chrome, מציעים ערוצים שונים כמו יציב, בטא ו-Canary. אתם יכולים להתקין גרסאות נפרדות במחשב וב-Android כדי לבדוק את ה-PWA בגרסאות עתידיות של הדפדפן. כך תוכלו ליצור ולבדוק תכונות שעדיין לא זמינות לכולם או לבדוק מוציאים משימוש ושינויים, ולבחון איך האפליקציה תפעל בגרסאות חדשות יותר.
באמצעות בדיקה מרחוק, תוכלו להשתמש בכל הכלים האלה כדי לנפות באגים ולבדוק את ה-PWA במחשבים ובמכשירי Android.
כלים של קובץ שירות (service worker)
כלי הפיתוח ל-Chromium כולל ערכה מלאה של כלים לניפוי באגים ב-service worker ובכרטיסייה 'Application' בממשקי ה-API שלהם. בקטע Service Workers תוכלו:
- הצגת סטטוס ההתקנה של Service Workers ומחזור החיים שלהם.
- מעדכנים ומבטלים את הרישום של ה-Service Worker.
- פועלים לפי מחזור העדכון.
- לראות את הלקוחות של ה-Service Workers הנוכחיים.
- שליחת הודעת Push ל-service worker.
- רישום פעולות של סנכרון ברקע וסנכרון תקופתי ברקע.
כלי אחסון
בתוך Application ואז Storage, אפשר לראות, להציג בתצוגה מקדימה, לעדכן ולמחוק נתונים מהמקור, כמו רשומות ב-Web Storage או חנויות IndexedDB.
בפנים Application, Cache ואז Cache Storage, יש אפשרות לראות את כל המטמון ששמור במקור הנוכחי, להציג תצוגה מקדימה של התוכן ולמחוק רשומות. מידע נוסף על כלי המטמון
בנוסף, אם בוחרים באפשרות Application ואז Storage, אפשר לראות את המכסה הנוכחית שנוצלה, לדמות נפח אחסון מותאם אישית ולנקות את כל הנתונים, כולל הרישום של קובץ השירות (service worker) באמצעות Clear site data.
שירותים הפועלים ברקע
כלי הפיתוח ל-Chromium כולל גם קבוצת כלים להקלטת אירועים של שירותי רקע. את הכלים אפשר ללחוץ על Application ואז על Background Services. כך אפשר לראות מה קורה ברקע בחלק מהאירועים, מעל ה-API של Service Workers. מידע נוסף על הכלים האלה
כלי מניפסט של אפליקציות אינטרנט
בכלי הפיתוח ל-Chromium יש קטע שמוקדש למניפסט של אפליקציות אינטרנט ולקריטריונים של אפשרות התקנה בקטע Application, Manifest. בקטע הזה תוכלו לבדוק אם המניפסט נטען כראוי, את ערכי המניפסט, איך הסמלים נראים, את מזהה האפליקציה ובודק מהיר של סמלים שניתנים למיסוך.
בקטע הזה מוצגות גם אזהרות ושגיאות שקשורות לקריטריונים להתקנה.
ניפוי באגים בהתקנה
במכשירי Android שמשתמשים במצב התקנה של WebAPK, אפשר לגשת לרשימה של אפליקציות מותקנות על ידי גלישה אל about:webapk בדפדפני Chromium.
כאן יוצג סטטוס העדכון הנוכחי ובקשה לעדכון WebAPK.
במחשבים, אפשר לעבור אל about:apps כדי לראות רשימה ידידותית למשתמש של אפליקציות PWA שהותקנו, וגרסת לניפוי באגים אפשר לעבור אל about:app-service-internals.
Safari
נכון לעכשיו, יש ל-Safari קבוצת כלים מוגבלת יותר לבדיקות ולניפוי באגים של PWA. אין כלים להצגה ולניפוי באגים של המצב ומחזור החיים של ה-Service Workers, אין כלי לבדיקת תוכן המטמון ואין כלים לתמיכה במניפסט של אפליקציית אינטרנט וליכולת התקנה ב-iOS וב-iPadOS.
Safari זמין רק במכשירים יציבים, ואילו התצוגה המקדימה של טכנולוגיית Safari שזמינה ב-macOS תאפשר לך לנסות קודם את היכולות של גרסאות עתידיות של Safari. תוכניות הבטא של iOS ו-iPadOS כוללות לפעמים גרסאות חדשות של Safari שבהן אפשר להשתמש לבדיקה.
כלים של קובץ שירות (service worker)
מה שאפשר לעשות ב-Safari (גם ב-macOS וגם מרחוק ל-iOS ול-iPadOS) הוא לפתוח חלון בודק של Service Worker שפועל כרגע.
מ-Safari ב-macOS, בתפריט Develop, Service Workers יוצגו כל הסשנים של קובץ השירות (service worker) שפועלים כרגע. עליך לבחור את המכשיר לבדיקה בתפריט Develop לצורך בדיקה מרחוק. ההקשרים של קובצי שירות (service worker) יופיעו באותו תפריט משנה שבו מופיעים ההקשרים של החלונות מתחת לשם המותקן של המקור או של ה-PWA.
אם בוחרים באחת מהן, ב-Safari ייפתח חלון חדש עם כלי בדיקה מוגבל, שכולל רק את Consoles, את Sources ואת Network Tabs.
Firefox
Firefox תומך ב-Service Workers בכל הפלטפורמות ובמניפסט האפליקציות להתקנה ב-Android בלבד. אפשר לגשת לכלים של אפליקציות PWA במחשב וב-Android באמצעות סשן של בדיקה מרחוק בחיבור USB.
ניתן להשתמש בגרסה למחשב שנקראת Firefox Developer Edition. כמו בדפדפן Chromium, יש ל-Firefox גרסאות בערוצים שונים במחשב וב-Android, כולל גרסאות יציבות, גרסאות בטא ופיתוח.
כלים לאפליקציות PWA
ה'סוקר של קובץ השירות' (service worker) ב-Firefox הוא כלי בסיסי שזמין בכלים למפתחים במסגרת Application, Service Workers. הוא מאפשר לראות את קובץ השירות (service worker) הנוכחי, לבדוק את סטטוס הפעולה שלו ולבטל את הרישום שלו. ניפוי באגים בקוד של קובץ השירות (service worker) עשוי להיות זמין רק בגרסאות מפתח מסוימות של Firefox.
כלי המניפסט זמין תחת Application, Manifest, והוא מעבד רק את ערכי המניפסט עם תצוגה מקדימה של הסמלים.
תחת Storage, אפשר לנהל את האחסון של המקור, כולל IndexedDB ואחסון במטמון.
למידע נוסף על הכלים למפתחים של Firefox לאפליקציות אינטרנט