אפליקציות מסוג Progressive Web Apps (PWA) נוצרות ומשופרות באמצעות ממשקי API מודרניים, כדי לספק יכולות משופרות, אמינות ויכולת התקנה, ובמקביל להגיע לכל אחד, בכל מקום ובכל מכשיר עם בסיס קוד יחיד. כדי ליצור את החוויה הטובה ביותר, כדאי להיעזר ברשימות המשימות ובהמלצות הבסיסיות והאופטימליות.
רשימת משימות Core Progressive Web App
רשימת המשימות של Progressive Web App מתארת את מה שהופך אפליקציה להתקנה ולשימושית של כל המשתמשים, ללא קשר לגודל או לסוג הקלט.
לביצועים יש תפקיד חשוב בהצלחת כל חוויית משתמש באינטרנט, כי אתרים עם ביצועים גבוהים מעוררים עניין ושומרים על המשתמשים יותר טובים מאלה שמניבים ביצועים נמוכים. מומלץ להתמקד באופטימיזציה למדדי ביצועים שמתמקדים במשתמשים.
סיבה
כדי לעודד את המשתמשים להשתמש באפליקציה, מהירות גבוהה מאוד.
למעשה, כשזמן הטעינה של הדף גדל משנייה לעשר שניות,
הסבירות שהמשתמש יקפוץ ממקום למקום עולה ב-123%. הביצועים לא מסתיימים
גם באירוע load. המשתמשים אף פעם לא צריכים לדעת
אם האינטראקציה שלהם (למשל, לחיצה על לחצן) נרשמה או לא. הגלילה והאנימציה אמורות לפעול בצורה חלקה.
הביצועים משפיעים על החוויה הכוללת שלך, גם בהתנהגות האפליקציה
וגם באופן שבו המשתמשים תופסים אותה.
לכל אפליקציות יש צרכים שונים, אבל ביקורות הביצועים ב-Lighthouse מבוססות על מדדי הליבה לבדיקת חוויית המשתמש באתר. ניקוד גבוה בביקורות האלה יפגע בחוויית המשתמשים. אפשר גם להשתמש ב-PageSpeed Insights או בדוח על חוויית המשתמש ב-Chrome כדי לקבל נתוני ביצועים בפועל של אפליקציית האינטרנט שלכם.
איך
במדריך שלנו לזמני טעינה מהירים מוסבר איך לגרום ל-PWA להתחיל לפעול במהירות ולהישאר במהירות.
המשתמשים יכולים להשתמש בכל דפדפן שהם בוחרים לגשת אליו לפני ההתקנה של אפליקציית האינטרנט.
סיבה
Progressive Web Apps הן קודם אפליקציות אינטרנט, ולכן הן צריכות לפעול בכל הדפדפנים.
הדרך הכי יעילה לעשות את זה היא, לפי ג'רמי קית' בResilient Web Design, לזהות את התכונות המרכזיות, להפוך אותן לזמינות באמצעות הטכנולוגיה הפשוטה ביותר, ולשפר את החוויה ככל האפשר. במקרים רבים המשמעות היא להתחיל עם HTML בלבד כדי ליצור את תכונות הליבה, ושיפור חוויית המשתמש באמצעות CSS ו-JavaScript כדי ליצור חוויה מעניינת יותר.
לדוגמה, אפשר לשלוח טופס. הדרך הפשוטה ביותר להטמיע זאת היא
טופס HTML ששולח בקשת POST. אחרי הפיתוח, אפשר לשפר את חוויית השימוש ב-JavaScript כדי לבצע אימות טפסים ולשלוח את הטופס דרך AJAX, וכך לשפר את החוויה של המשתמשים שיכולים לתמוך בו.
המשתמשים חווים את האתר שלך במגוון רחב של מכשירים ודפדפנים. אי אפשר להתמקד רק בקצה העליון של כל הספקטרום הזה. כדאי להשתמש בזיהוי תכונות כדי לספק חוויה שאפשר להשתמש בה למגוון רחב ככל האפשר של משתמשים פוטנציאליים, כולל משתמשים בדפדפנים ובמכשירים שלא קיימים עדיין.
איך
Resilient Web Design של ג'רמי קית' הוא מקור מידע מצוין שמתאר איך לחשוב על עיצוב אתרים במתודולוגיה הפרוגרסיבית הזו לדפדפנים שונים.
מקורות מידע נוספים
- Understanding Progressive Enhancement של List Apart הוא הקדמה טובה לנושא.
- Smashing Magazine – Progressive משפרים: מה זה ואיך משתמשים בזה? הקדמה מעשית וקישורים לנושאים מתקדמים יותר.
- במאמר הטמעת זיהוי של תכונות ב-MDN מוסבר איך לזהות פיצ'ר באמצעות שליחת שאילתות ישירות לגביו.
המשתמשים יכולים להשתמש ב-PWA בכל גודל מסך, וכל התוכן שלה זמין בכל גודל של אזור התצוגה.
סיבה
למכשירים יש מגוון גדלים, והמשתמשים יכולים להשתמש באפליקציה שלך במגוון גדלים, גם באותו מכשיר. לכן חשוב לוודא שלא רק התוכן מתאים לאזור התצוגה, אלא גם שכל התכונות והתוכן באתר ניתנים לשימוש בכל הגדלים של אזור התצוגה.
המשימות שהמשתמשים רוצים להשלים והתוכן שאליו הם רוצים לגשת לא משתנים בהתאם לגודל אזור התצוגה. ניתן לארגן מחדש את התוכן לפי גדלים שונים של אזור התצוגה, והוא צריך להיות שם, בדרך אחת או אחרת. למעשה, כמו שלוק ורולבסקי אומר בספרו Mobile First, אם מתחילים בקטן ומשנים את העיצוב למסכים גדולים יותר, אפשר לשפר את העיצוב של האתר:
מכשירים ניידים מחייבים את צוותי פיתוח התוכנה להתמקד רק בנתונים ובפעולות החשובים ביותר באפליקציה. פשוט אין מקום במסך של 320 על 480 פיקסלים שמכיל רכיבים מיותרים ומיותרים. צריך לתת להם עדיפות.
איך
קיימים מקורות מידע רבים בנושא עיצוב רספונסיבי, כולל המאמר המקורי של איתן מרקוט, אוסף של מושגים חשובים שקשורים אליו, וגם ספרים והרצאות רבות. כדי לצמצם את הדיון הזה להיבטי התוכן של עיצוב רספונסיבי, כדאי לקרוא את המאמר עיצוב שמתמקד בתוכן ו פריסות רספונסיביות שלא קשורות לתוכן. לבסוף, תוך התמקדות בנייד, השיעורים של Seven Deadly Mobile Myths מאת ג'וש קלארק רלוונטיים לתצוגות קטנות של אתרים רספונסיביים כמו שהם רלוונטיים לניידים באופן כללי.
כשמשתמשים במצב אופליין, השארתם ב-PWA מאפשרת חוויה חלקה יותר מאשר חזרה לדף ברירת המחדל של הדפדפן במצב אופליין.
סיבה
המשתמשים מצפים שאפליקציות מותקנות יפעלו ללא קשר לסטטוס החיבור שלהם. אפליקציה ספציפית לפלטפורמה מסוימת אף פעם לא מציגה דף ריק כשהיא אופליין, ו-PWA אף פעם לא אמורה להציג את דף ברירת המחדל של הדפדפן במצב אופליין. מתן חוויה מותאמת אישית במצב אופליין, גם כשמשתמש מנווט לכתובת URL שלא נשמרה במטמון וגם כשמשתמש מנסה להשתמש בתכונה שדורשת חיבור,
איך
במהלך אירוע install של Service Worker אפשר לשמור מראש דף אופליין מותאם אישית לשימוש במועד מאוחר יותר. אם משתמש עובר למצב אופליין, אפשר
להגיב עם דף האופליין המותאם אישית שנשמר מראש במטמון. תוכלו לעיין בדוגמה מותאמת אישית של דפים אופליין כדי לראות דוגמה לכך בפועל וללמוד איך להטמיע אותה בעצמכם.
משתמשים שמתקינים או מוסיפים אפליקציות למכשיר נוטים להתעניין יותר באפליקציות האלה.
סיבה
התקנה של Progressive Web App מאפשרת לאפליקציה להיראות, להרגיש ולהתנהג כמו כל האפליקציות האחרות שמותקנות. הוא מופעל מאותו מקום שבו המשתמשים מפעילים את האפליקציות האחרות שלהם. היא פועלת בחלון אפליקציה משלה, בנפרד מהדפדפן, והיא מופיעה ברשימת המשימות, בדיוק כמו אפליקציות אחרות.
בדומה לאפליקציות ספציפיות למכשיר, משתמשים שמתקינים את האפליקציות הם הקהל הכי מעורב שלך, ובדרך כלל מדדי ההתעניינות זהים לאלה של משתמשי האפליקציה במכשירים ניידים. המדדים האלה כוללים יותר ביקורים חוזרים, זמנים ארוכים יותר באתר ושיעורי המרה גבוהים יותר בהשוואה למבקרים רגילים.
איך
כדאי לעיין במדריך ההתקנה שלנו כדי ללמוד איך להתקין את PWA.
רשימת משימות לאופטימיזציה של Progressive Web App
כדי ליצור אפליקציית PWA מעולה, שנראית כמו האפליקציה הכי טובה בתחומה, צריך לא רק את רשימת המשימות העיקרית. רשימת המשימות האופטימלית של PWA נועדה לגרום ל-PWA להרגיש שהיא חלק מהמכשיר שבו היא פועלת, ובמקביל לנצל את היתרונות שבזכותם רשת האינטרנט פועלת.
במקרים שבהם אין בהכרח מחויבות בחיבור, האפליקציה שלך פועלת במצב אופליין באותו אופן שבו היא פועלת באינטרנט.
סיבה
בנוסף למתן דף מותאם אישית אופליין, המשתמשים מצפים שאפשר יהיה להשתמש באפליקציות PWA אופליין. לדוגמה, באפליקציות של נסיעות וחברות תעופה צריכים להיות פרטי הנסיעה וכרטיסי העלייה למטוס בצורה זמינה במצב אופליין. באפליקציות מוזיקה, סרטונים ופודקאסטים צריכה להיות הפעלה במצב אופליין. אפליקציות של רשתות חברתיות וחדשות צריכות לשמור במטמון תוכן עדכני כדי שמשתמשים יוכלו לקרוא אותו במצב אופליין. המשתמשים גם מצפים שהאימות יישמר במצב אופליין, לכן צריך לתכנן לצורך אימות אופליין. אפליקציית PWA אופליין מספקת למשתמשים חוויה אמיתית כמו אפליקציה.
איך
אחרי שקובעים אילו תכונות המשתמשים מצפים שיפעלו אופליין, צריך להתאים את התוכן להקשרים אופליין. אפשר להשתמש ב-IndexedDB, מערכת אחסון NoSQL בתוך הדפדפן, כדי לאחסן ולאחזר נתונים, וכן בסנכרון ברקע כדי לאפשר למשתמשים לבצע פעולות במצב אופליין ולעכב את התקשורת של השרת עד שלמשתמש יהיה שוב חיבור יציב. אפשר גם להשתמש ב-Service Workers כדי לאחסן סוגי תוכן אחרים כמו תמונות, קובצי וידאו וקובצי אודיו, לשימוש אופליין, ולהטמיע סשנים בטוחים לטווח ארוך כדי לשמור על אימות המשתמשים. מבחינת חוויית המשתמש, אפשר להשתמש ב מסכים בסיסיים שמספקים למשתמשים תפיסה של המהירות והתוכן במהלך הטעינה, שיכולים לחזור לתוכן שנשמר במטמון או לאינדיקטור של מצב אופליין, לפי הצורך.
כל האינטראקציות של המשתמשים עומדות בדרישות הנגישות של WCAG 2.0.
סיבה
רוב המשתמשים, בשלב כלשהו בחיים שלהם, רוצים להשתמש ב-PWA בדרך שכפופה לדרישות הנגישות של WCAG 2.0. היכולת של בני אדם לקיים אינטראקציה עם ה-PWA ולהבין אותה קיימת על פני מגוון רחב, והצרכים האלה יכולים להיות זמניים או קבועים. כשהופכים את PWA לנגישה, אפשר להשתמש בה לכולם.
איך
המאמר
מבוא לנגישות באינטרנט של W3C
הוא מקום טוב להתחיל בו. רוב בדיקות הנגישות חייבות להתבצע באופן ידני. כלים כמו ביקורות נגישות ב-Lighthouse, בציר וב-Accessibility Insights יכולים לעזור להפוך חלק מבדיקות הנגישות לאוטומטיות. חשוב גם להשתמש באלמנטים הנכונים מבחינה סמנטית במקום ליצור אותם מחדש בעצמכם, לדוגמה, a ו-button. כך אפשר להבטיח שכשתצטרכו לפתח תכונות מתקדמות יותר, תהיה עמידה בציפיות הנגישות (למשל, מתי משתמשים בחיצים לעומת בכרטיסיות).
בכרטיסי תזונה של A11Y יש עצות מצוינות בנושא זה לגבי כמה רכיבים נפוצים.
אפשר לאתר את ה-PWA בקלות באמצעות חיפוש.
סיבה
אחד היתרונות הגדולים ביותר של האינטרנט הוא היכולת לגלות אתרים ואפליקציות באמצעות חיפוש. למעשה, יותר ממחצית מכלל התנועה לאתר מגיעה מחיפוש אורגני. כדי לאפשר למשתמשים פוטנציאליים למצוא את ה-PWA, חשוב לוודא שיש כתובות URL קנוניות לתוכן ושמנועי חיפוש יכולים להוסיף את האתר לאינדקס. הדברים האלה נכונים במיוחד כשמשתמשים ברינדור מצד הלקוח.
איך
קודם כל מוודאים שלכל כתובת URL יש כותרת ותיאור מטא ייחודיים ותיאוריים. לאחר מכן אפשר להשתמש ב-Google Search Console ובביקורות האופטימיזציה למנועי חיפוש ב-Lighthouse כדי לנפות באגים ולפתור בעיות יכולת הגילוי ב-PWA. אפשר גם להשתמש בכלים של Bing או של Yandex לבעלי האתרים, ולשקול לכלול נתונים מובְנים באמצעות סכימות מ-Schema.org ב-PWA.
אפשר להשתמש ב-PWA באופן שווה באמצעות עכבר, מקלדת, סטיילוס או מגע.
סיבה
המכשירים מציעים מגוון שיטות קלט, והמשתמשים אמורים להיות מסוגלים לעבור ביניהם בצורה חלקה במהלך השימוש באפליקציה. באותה מידה, שיטות הקלט לא צריכות להיות תלויות בגודל המסך. כלומר, אזורי תצוגה גדולים חייבים לתמוך במגע, ואזורי תצוגה קטנים חייבים לתמוך במקלדות ובעכברים. כמיטב יכולתכם, ודאו שהאפליקציה וכל התכונות שלה תומכות בכל שיטת קלט שהמשתמש בוחר. במקרים המתאימים, כדאי לשפר את החוויות כדי לאפשר גם פקדים ספציפיים לקלט (כמו משיכה לרענון).
איך
Pointer Event API מספק ממשק מאוחד לעבודה עם אפשרויות קלט שונות, והוא טוב במיוחד להוספת תמיכה בסטיילוס. לתמיכה גם במגע וגם במקלדת, צריך להקפיד להשתמש באלמנטים הסמנטיים הנכונים (עוגנים, לחצנים, פקדי טופס וכו') ולא לבנות אותם מחדש באמצעות HTML לא סמנטי. כשכוללים אינטראקציות שמופעלות כשמעבירים את העכבר, צריך לוודא שהן יכולות לפעול גם בלחיצה או בהקשה.
כשמבקשים הרשאה לשימוש בממשקי API חזקים, צריך לספק הקשר ולשאול רק כשיש צורך ב-API.
סיבה
ממשקי API שמפעילים בקשת הרשאה, כמו התראות, מיקום גיאוגרפי ופרטי כניסה, מיועדים באופן מכוון להפריע למשתמשים כי הם בדרך כלל קשורים לתכונות מתקדמות שדורשות הסכמה. הפעלת ההנחיות האלה ללא הקשר נוסף, למשל בזמן טעינת הדף, מפחיתה את הסיכוי שהמשתמשים יאשרו את ההרשאות האלה ויש סיכוי גבוה יותר שלא יסמכו עליהן בעתיד. במקום זאת, צריך להפעיל את ההנחיות האלה רק אחרי הצגת נימוק בהקשר המתאים למשתמש לגבי הסיבה שבגללה נדרשת ההרשאה הזו.
איך
המאמר Permissions UX ו The Cookie Planet (הדרכים הנכונות לבקש הרשאות ממשתמשים) הם מקורות מידע שימושיים שיעזרו לך להבין איך לעצב הנחיות להרשאות. תוך התמקדות בנייד, חלות על כל אפליקציות ה-PWA.
שמירה על תקינות בסיס הקוד מאפשרת להשיג את היעדים בקלות רבה יותר ולספק תכונות חדשות.
סיבה
יש המון מאמץ בתחום הבנייה של אפליקציית אינטרנט מודרנית. שמירה על האפליקציה מעודכנת ותקינות ה-codebase תאפשר לך לספק בקלות תכונות חדשות שתואמות ליעדים האחרים שמפורטים ברשימת המשימות הזו.
איך
יש כמה בדיקות בעדיפות גבוהה כדי להבטיח Codebase תקין:
- מומלץ להימנע משימוש בספריות עם נקודות חולשה ידועות.
- חשוב לוודא שאתם לא משתמשים בממשקי API שהוצאו משימוש.
- מסירים שיטות קידוד לא בטוחות מ-codebase (למשל שימוש ב-
document.write()או האזנה לאירועי גלילה לא פסיביים), - אפשר אפילו להשתמש בקוד באופן הגנתי כדי לוודא שה-PWA לא תתקע אם ניתוח הנתונים או ספריות אחרות של צד שלישי לא ייטענו.
- כדאי לשקול צורך בניתוח של קוד סטטי, כמו איתור שגיאות בקוד (linting) או לבצע בדיקות אוטומטיות במספר דפדפנים ובערוצי הפצה. הטכניקות האלה יכולות לאתר שגיאות לפני שהן הופכות לייצור.