מה זה PWA - אפליקציה שהיא בעצם אתר

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

אז מה זה בעצם PWA

PWA (Progressive Web App) הוא בעצם אתר אינטרנט רגיל, שנבנה עם כמה תוספות טכניות שגורמות לו להתנהג ולהרגיש כמו אפליקציה מותקנת. זה לא טכנולוגיה חדשה ומסתורית - זה HTML, CSS ו-JavaScript רגילים, עם שתי תוספות מרכזיות שהופכות את הקסם הזה לאפשרי.

שני המרכיבים שהופכים אתר ל-PWA

הראשון הוא קובץ manifest - קובץ JSON קטן שמתאר לדפדפן איך האפליקציה אמורה להיראות כשהיא מותקנת - איזה שם להציג, איזה אייקון להשתמש, ואיזה צבעים.

{
  "name": "האפליקציה שלי",
  "short_name": "האפליקציה",
  "icons": [{ "src": "icon.png", "sizes": "512x512" }],
  "start_url": "/",
  "display": "standalone"
}

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

למה זה שימושי - מה שאתם מקבלים בפועל

ה-service worker הוא בעצם הקסם האמיתי כאן. הוא מאפשר כמה יכולות שהיו שמורות בעבר רק לאפליקציות מותקנות:

• עבודה אופליין - אם המשתמש כבר ביקר באתר, service worker יכול לשמור גרסה של הדפים במטמון, כך שגם בלי אינטרנט האתר עדיין נטען וניתן לשימוש חלקי לפחות.
• התקנה על מסך הבית - בלי לעבור בכלל דרך חנות אפליקציות, המשתמש יכול "להתקין" את האתר בלחיצה אחת, ומקבל אייקון שמתנהג כמעט כמו אפליקציה נייטיבית.
• התראות דחיפה (push notifications) - כן, גם זה אפשרי מאתר רגיל, בלי צורך באפליקציה בחנות.
• טעינה מהירה יותר בביקורים חוזרים - כי הרבה מהתוכן כבר שמור במטמון מקומי בזכות ה-service worker.

למה לא כולם בונים PWA אם זה כל כך טוב

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

מתי כדאי לבנות PWA

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

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

איך זה קשור למה שאתם כבר לומדים

החדשות הטובות - אם אתם כבר לומדים HTML, CSS ו-JavaScript, אתם לא צריכים ללמוד שפה חדשה כדי לבנות PWA. אתם בעצם לוקחים את מה שאתם כבר יודעים, ומוסיפים עליו שתי שכבות טכניות ממוקדות - manifest ו-service worker. זה נושא שכדאי להכיר אחרי שאתם כבר מרגישים בנוח עם היסודות של פרונטאנד, ורוצים להוסיף כלי נוסף לארגז.

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

לסיכום

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

יש לכם רעיון לפרויקט שיכול להיות PWA? תשתפו בדיסקורד, נשמח לשמוע.

הצטרפו לקהילה בדיסקורד