Progressive Web App הוא אתר. כל הנכסים שלו זהים לאלה שבאינטרנט, אבל עם כלים חדשים שמאפשרים לטעון את הנכסים האלה במהירות כשהם אונליין וזמינים במצב אופליין.
רכיבי אפליקציה
בדרך כלל פיתוח של אפליקציה כרוך בכמה נכסים ומשאבים, החל מהלוגיקה והקוד (בין אם הידור כולל או לא) ועד לאלמנטים של ממשק המשתמש כמו עיצובי מסך, תמונות, סמלי לוגו וגופנים.
Progressive Web App היא אתר, ולכן כל הנכסים שלה זהים לאלה שבאינטרנט:
- HTML לתוכן ועיבוד ראשוני של דף.
- JavaScript למטרות לוגיקה, כולל היכולת להריץ מודולים של WebAssembly (קוד הידור) ולעבד גרפיקה בהתאמה לחומרה בדו-ממד ובתלת-ממד.
- CSS לפריסה, לעיצוב ולאנימציות.
- תמונות בפורמטים של אינטרנט, כמו PNG, JPEG, WebP ו-SVG.
- סרטונים בפורמטים של אינטרנט, כגון MPEG-4 ו-WebM.
- גופני אינטרנט.
- נתונים בפורמט JSON או בפורמטים אחרים.
כברירת מחדל, אתרים מורידים נכסים דרך הרשת, שמתחילים ב-HTML וממשיכים לשאר המשאבים.
ניהול המשאבים האלה כך שייטענו במהירות ויהיו זמינים במצב אופליין הוא אתגר באינטרנט. כיום, אפליקציות PWA משתמשות ביכולות ששויכו בעבר רק לאפליקציות ספציפיות לפלטפורמה.
אפליקציות ספציפיות לפלטפורמה לעומת PWA
כשמתקינים אפליקציה ספציפית לפלטפורמה, לרוב מורידים חבילה שכוללת את כל נכסי האפליקציה: קוד, תמונות, גופנים, סרטונים ועוד. לכן, כל המשאבים האלה זמינים מהאחסון של המכשיר, גם כשהאפליקציה במצב אופליין.
מצד שני, אתר בגרסה הקלאסית של Google צריך חיבור לרשת כדי להוריד את הנכסים במקרה הצורך. אם אתם במצב אופליין, תופיע הודעת שגיאה בדפדפן כי אין נכסים בצד הלקוח.
גישת PWA משפרת את חוויית האינטרנט המסורתית באמצעות הפיכת חלק מהנכסים או כולם לזמינים בצד הלקוח, כמו באפליקציות ספציפיות לפלטפורמה. לכן, כשפותחים PWA, העיבוד הראשוני יכול להיות מיידי כמו אפליקציה של פלטפורמה, כי הנכסים זמינים בלי לעבור לרשת.
מטמון ואחסון
מאז תחילת האינטרנט, למפתחים לא הייתה שליטה מלאה על אופן השמירה של המשאב במטמון. הדפדפן אחראי על מטמון ה-HTTP, והוא עשוי לשמור במטמון ולהציג משאבים בהתאם לכללי מדיניות שונים. אפשרויות אחסון אחרות כמו Web Storage ו-IndexedDB נועדו לשמור נתונים ואובייקטים פשוטים.
אפליקציות PWA לא צריכות להסתמך רק על כללי המדיניות האלה ליצירת התוכן שלהן. במקום זאת, יש לנו פתרונות כיום, שמאפשרים לנו לשלוט טוב יותר על הזמן והאופן שבהם ניתן לשמור משאבים במטמון ועל הזמן והאופן שבהם מעבירים אותם באופן מקומי: ממשק ה-API של אחסון המטמון. באינטרנט יש כמה פתרונות אחסון בצד הלקוח שזמינים:
- אחסון באינטרנט: כולל
localStorageו-sessionStorage. ממשקי ה-API האלה מאחסנים צמדים פשוטים של מחרוזות מפתח/ערך. נפח האחסון באינטרנט מוגבל ובעל ממשק API סינכרוני, כך שיש להימנע ממנו ככל האפשר. - IndexedDB: מסד נתונים מבוסס אובייקטים (No-SQL) עם API אסינכרוני שמתאים לביצועים באינטרנט. IndexedDB יכול לאחסן נתונים מובְנים ונתונים בינאריים בצד הלקוח. בדרך כלל משתמשים בה כדי לאחסן נתונים, כמו המידע שיתקבל או המידע שיתקבל כבקשת API. מומלץ גם לשמור נתונים באופן מקומי באופן מיידי, ולאחר מכן לסנכרן אותם עם השרת. ה-IndexedDB API משמש לאינטראקציה עם מסד הנתונים.
- אחסון במטמון: אוסף של צמדי בקשות ותגובה של HTTP שבהם אפשר להשתמש כדי לאחסן ולאחזר משאבים – עם כותרות ה-HTTP שלהם – בדיוק כפי שהם נשלחים מהשרת. Cache Storage API מאפשר לך לאחסן, לאחזר, לעדכן ולמחוק בקשות רשת, למשל עבור הנכסים שלך, גם במצב אופליין.
הצורך ב-Service Workers
אפשר לאחסן את הנכסים ב-PWA באחסון במטמון וב-IndexedDB, אבל איך אנחנו יכולים להשתמש בנכסים האלה כדי לספק למשתמשים חוויה מהירה ואופליין. התשובה? קובצי שירות (service worker).
בעזרת קובץ שירות (service worker), אפשר להציג נכסים בלי להתחבר לרשת, לשלוח התראות למשתמש, להוסיף תג לסמל ה-PWA, לעדכן תוכן ברקע ואפילו להפעיל את כל ה-PWA במצב אופליין. מידע נוסף על Service Workers זמין בפרק הבא.
מצב אופליין מוכן
המשתמשים מצפים שהאפליקציה שלכם תציע חוויה מהירה ומוכנה תמיד. כלומר, האפליקציה אמורה לפעול אופליין.
כשעוברים למצב אופליין, זה לא אומר שכל התוכן או השירותים צריכים להיות זמינים ללא חיבור לרשת. עם זאת, חוויה בסיסית לפחות של המשתמש במצב אופליין (למשל, דף שמבקש ממך להתחבר לאינטרנט כדי להמשיך), תשפר את חוויית המשתמש ותשאיר את המשתמש בתוך חוויית המשתמש באפליקציה במקום שגיאת דפדפן כללית. בחלק מהדפדפנים, חובה להשתמש בתכונה הזאת כדי לעבור את הקריטריונים להתקנת PWA. עדיף להציג את ממשק המשתמש של ה-PWA יחד עם התוכן שנשמר במטמון. האפשרות לאפשר למשתמשים להמשיך להשתמש בכל ה-PWA ולסנכרן שינויים בשרת כשהם מתחברים מחדש לאינטרנט היא תקן הזהב לעבודה במצב אופליין.
כדי שהאפליקציה תהיה זמינה במצב אופליין, צריך לשמור במטמון את הנכסים הנחוצים לשימוש במצב אופליין ולאפשר ל-Service Worker להציג אותם מאוחר יותר. חשוב להוסיף את הנכסים אופליין למטמון לפני שיש בהם צורך. זהו מקרה ספציפי שבו לא ניתן לשמור אותן במטמון לפי בקשה.
גישות נפוצות למטמון
ב-PWA, כל ההחלטות הן שאתם קובעים. אתם יכולים לבחור את הדרך הטובה ביותר לשמור במטמון או להתקין נכסים דיגיטליים, בהתאם לצרכים שלכם. הנה כמה מההחלטות שעליך לקבל:
- טעינה מראש: יש לבחור את הנכסים שרוצים להתקין בטעינה הראשונה. הנכסים צריכים לכלול את ה-HTML ואת הנכסים המינימליים לעיבוד האפליקציה. כשמשתמשים במטמון מראש, חשוב לזכור שמשתמשים במרחב והרשת של המכשיר. חשוב להיות מודעים ואחראים כשמורידים נכסים ושומרים אותם במטמון.
- שמירה לפי הצורך: משמשת להוספת נכסים למטמון לפי הצורך. בדרך כלל מדובר בנכסים שיכולים להשתנות ללא קשר לגרסת האפליקציה, כמו תמונות או תוכן. בקטע שמירה במטמון מפורטות אסטרטגיות שונות לשמירה במטמון לפי הצורך.
- ממשקי API ושירותי אינטרנט: ניתן לשמור קריאות ל-API במטמון. לחלופין, במקום לשמור במטמון את תגובות ה-API, תוכלו לשמור את הנתונים שלהן ב-IndexedDB.
המערכת מעדכנת את הנכסים
במודל האפליקציה הרגיל של אפליקציות מותקנות מקטלוג האפליקציות, כשמפתחים צריכים לעדכן את האפליקציה, הם מפרסמים חבילה חדשה. המשתמשים צריכים להוריד את החבילה כולה שוב, גם אם רוב הנכסים לא השתנו. אתם יכולים להשתמש בגישות שמפורטות בקטע שלמעלה כדי להפעיל אפליקציות PWA, כך שתוכלו להחליט איך ומתי לעדכן את הנכסים. יש אפשרויות שונות לעדכון נכסים:
- עדכון מלא: במקרה הזה, בכל פעם שתבצעו שינוי באפליקציה, גם אם מדובר בשינוי קל, הקוד יוריד שוב את כל הנכסים במטמון.
- עדכון חלקי: בשיטה הזו אתם יוצרים שיטה להגדרת הנכסים שעודכנו, ומעדכנים רק את הנכסים, עם או בלי התערבות המשתמש.
- עדכון רציף: באמצעות השיטה הזו, הנכסים ייבדקו ויעודכנו באופן אוטומטי בכל שימוש ב-PWA בנפרד
גודל ומשך חיים
בדרך כלל אפליקציות ספציפיות לפלטפורמה לא מתמודדות עם מגבלות גודל. בזמן ההתקנה, האפליקציות יכולות להיות בגודל של ג'יגה-בייט או יותר. כל עוד המכשיר תואם לקיבולת, ההתקנה תאושר. בנוסף, כל עוד האפליקציה מותקנת, היא תנצל את נפח האחסון הכולל, גם אם לא משתמשים בה. האחסון של אפליקציות PWA מטופל באופן שונה. הדפדפן יאחסן את הנכסים בהתאם למדיניות שהגדרתם בלוגיקת ה-PWA.
מגבלות הגודל תלויות בדפדפן. היא לא גמישה כמו אפליקציות ספציפיות לפלטפורמה, אבל בדרך כלל היא טובה מספיק לרוב אפליקציות האינטרנט. במאמר הזה אפשר לקרוא על המגבלות הספציפיות לכל דפדפן.
דפדפנים יכולים להוציא נכסים על סמך לחץ באחסון, או אחרי כמה שבועות של חוסר פעילות, אם המשתמש משתמש ב-PWA בדפדפן. בפלטפורמות מסוימות, אם המשתמש מתקין את ה-PWA, לא תתבצע הסרה. כשהדבר אפשרי, קוד יכול לבקש אחסון קבוע באמצעות API כדי למנוע את המחיקה הזו.