צעדים ראשונים
Progressive Web Apps הם עדיין אתרים, עם תכונות ויכולות משופרות. הם לא מצורפים לסטאק מידע מסוים, ואתם יכולים להתחיל מאפס באתר חדש או לעדכן את האתר הקיים בלי שעושים בו שינויים גורפים. במדריך הזה תלמדו איך ליצור הטמעה טובה של דפוס ה-PWA. ריכזנו כאן כמה אסטרטגיות שיעזרו לכם להתחיל:
כדאי להתקין את האפליקציה
להתחיל בקטן! גישה זו כוללת התחלה בקובץ מניפסט בסיסי, דף לא מקוון פשוט ו-service worker כדי להציג את הדף הלא מקוון ולשמור במטמון מספר CSS ו-JavaScript קריטיים. בזכות השמירה במטמון של CSS ו-JavaScript, תוכלו להכין את אפליקציית האינטרנט הקיימת שלכם לעבודה אופליין ולשפר את הביצועים שלה.
התמקדות בתכונה
בוחרים תכונה חדשה אחת, כמו התראות או טיפול בקבצים, שתשפיע משמעותית על המשתמשים או על העסק. כך תוכלו לטבול את האצבעות במאגר ה-PWA בלי לבצע יותר מדי שינויים בבת אחת.
בנייה של גרסה פשוטה
מתחילים קטע קיים באפליקציה או תהליך ספציפי שעובר המשתמש, כמו הפעלת סרטון או גישה לכרטיס עלייה למטוס, והופכים אותו ל-PWA נפרד שפועל ללא חיבור לאינטרנט, בנפרד או בהקשר מתאים. כך תוכלו לערוך ניסוי צנוע שיאפשר לכם לחשוב מחדש על חוויה של משתמשים עם אפליקציות PWA.
להתחיל מאפס
אם אתם מעצבים מחדש את האתר או שאתם יכולים להתחיל מאפס, האסטרטגיה הזו הגיונית מאוד. הוא מאפשר לפתח בקלות דפוסי עיצוב של PWA בהשוואה לאסטרטגיות אחרות, ובמיוחד את היכולות של ה-Service Workers כבר מההתחלה.
שדרוג של אפליקציית חנות
אם אפשר לפרסם PWA בחנויות אפליקציות, אפשר לעטוף את ה-PWA במרכז האפליקציות של PWA ולהעלות אותו לחנויות, כמו חנות Play של Google או Windows Store. אם יש לך אפליקציה קיימת ספציפית לפלטפורמה, אפשר להחליף אותה ב-PWA שפורסמה בחנות.
בשיטה הזו, המשתמשים הקיימים יקבלו שדרוג של החוויות שלהם ל-PWA, ומשתמשים חדשים עדיין יוכלו להתקין את ה-PWA מהדפדפן או מחנויות האפליקציות. בנוסף, תהיה לכם אפליקציה אחת לכולם ותחסוך לכם עלויות, תחסוך לכם זמן ותשפר את חוויית המשתמש.
רשימת משימות ל-PWA
אפליקציה מסוג Progressive Web App היא אתר, שמובילה לשאלה: מתי היא הופכת ל-Progressive Web App? התשובה לא כל כך פשוטה, כי תפיסת ה-PWA לא מתייחסת לטכנולוגיה או מחסנית ספציפית, PWA היא תבנית שכוללת רכיבים טכניים שונים.
אין כללים ייחודיים לכל הדפדפנים, אבל יש קבוצה של המלצות שנקראת רשימת המשימות של Progressive Web App, שתעזור לכם ליצור PWA שהמשתמשים יאהבו.
הדרישות העיקריות
מכיוון שאפליקציות מסוג PWA קיימות בכל המכשירים, מנייד ועד מחשב, רשימת המשימות העיקרית ב-Progressive Web App מפרטת מה צריך לעשות כדי שהאפליקציה תהיה מהימנה ואמינה להתקנה של כל המשתמשים, בלי קשר לגודל המסך או לסוג הקלט.
הדרישות העיקריות הן:
הפעלה מהירה, עבודה מהירה
לביצועים של כל חוויית שימוש באינטרנט יש תפקיד חשוב, כי אתרים עם ביצועים טובים יוצרים מעורבות בקרב המשתמשים ומשמרים את המשתמשים בצורה טובה יותר מאשר אתרים שהביצועים שלהם לא טובים. אתרים צריכים להתמקד באופטימיזציה של מדדי ביצועים שמתמקדים במשתמשים.
פועל בכל דפדפן
אפליקציות מסוג Progressive Web Apps הן קודם אפליקציות אינטרנט, כלומר הן צריכות לעבוד בדפדפנים שונים, ולא רק באחד מהם. עם זאת, החוויה לא חייבת להיות זהה בכל הדפדפנים. יכולות להיות תכונות שלא נתמכות על ידי דפדפן אחד, עם גיבוי כדי להבטיח חוויה טובה.
תגובה לכל גודל מסך
המשתמשים יכולים להשתמש ב-PWA בכל גודל מסך, וכל התוכן זמין בכל גודל של אזור תצוגה.
מספק דף מותאם אישית למצב אופליין
כשמשתמשים במצב אופליין, שמירה שלהם ב-PWA מספקת חוויה חלקה ודומה יותר מאשר החזרה לדף האופליין שמוגדר כברירת מחדל בדפדפן.
ניתן להתקנה
משתמשים שמתקינים או מוסיפים אפליקציות למסכי הבית נוטים לגלות מעורבות רבה יותר באפליקציות האלה, וכשמתקינים את ה-PWA הם יכולים לנצל יותר יכולות כדי לשפר את חוויית המשתמש.
מאפיינים אופטימליים של PWA
כדי ליצור Progressive Web App מעולה, שנראה כמו אפליקציה מובילה בתחומה, צריך יותר מאשר רק רשימת המשימות העיקרית. רשימת המשימות האופטימלית ל-Progressive Web App כוללת כיצד לגרום ל-PWA להרגיש מוכָּרים ואמינה, ולנצל את היתרונות של האינטרנט.
מספק חוויה במצב אופליין
אם תאפשרו למשתמשים להשתמש ב-PWA במצב אופליין, תוכלו ליצור עבורם חוויה אותנטית כמו באפליקציה. לשם כך, מזהים את התכונות שלא דורשות קישוריות, כדי שהמשתמשים יוכלו לקבל גישה לפחות לחלק מהפונקציונליות.
נגיש באופן מלא
צריך לוודא שקוראי מסך מבינים את כל התוכן והאינטראקציות של האפליקציה, אפשר להשתמש בהם רק באמצעות מקלדת, שהמיקוד מצוין ושניגודיות הצבעים חזקה. כשאתם הופכים את ה-PWA לנגיש, אתם יכולים לוודא שכולם יוכלו להשתמש בה.
משתמש ביכולות מתקדמות, במקומות שבהם זה אפשרי
מהעברת הודעות בדחיפה, WASM ו-WebGL ועד גישה למערכת קבצים, בוחרי אנשי קשר ושילוב עם חנויות אפליקציות. הכלים ליצירה של אפליקציות PWA עם יכולות מתקדמות ומשולבות יאפשרו לכם ליצור חוויית משתמש מלאה, שעד כה הייתה שמורה לאפליקציות פלטפורמה, שהמשתמשים יכולים לקחת איתכם לכל מקום.
ניתן לגלות באמצעות חיפוש
יותר ממחצית מכלל התנועה באתר מגיעה מחיפוש אורגני. כדי שהמשתמשים יוכלו למצוא את ה-PWA שלכם, חשוב לוודא שיש כתובות URL קנוניות לתוכן ושמנועי חיפוש יכולים להוסיף את האתר לאינדקס.
עובד עם כל סוג קלט
למשתמשים צריכה להיות אפשרות לעבור בין סוגי קלט בזמן שהם משתמשים באפליקציה בצורה חלקה, ושיטות הקלט לא יהיו תלויות בגודל המסך.
מספק הקשר לבקשות להרשאות
צריך להפעיל בקשות להרשאות כמו התראות, מיקום גיאוגרפי ופרטי כניסה רק אחרי שמספקים נימוק בהקשר, כדי לשפר את הסיכויים שהמשתמש יאשר את הבקשות.
פועל בהתאם לשיטות המומלצות ליצירת קוד תקין
אם תקפידו על אפליקציה עדכנית ועל תקינות ה-codebase, יהיה לכם קל יותר לספק תכונות חדשות שעומדות ביעדים האחרים שמפורטים ברשימת המשימות הזו.