smartphone

PWA הולך לשנות את עולם הweb

מה זה PWA?

ראשי התיבות של PWA זה Progressive Web App.
המטרה היא להשתמש באתר קיים כפלטפורמה לדפדפנים וכן כאפליקציה שניתנת להתקנה על על פלאפונים ומחשבים.

ע”פ בדיקה שבוצעה בהשוואה בין 1000 האפליקציות המובילות לבין 1000 האתרים המובילים בעולם, החשיפה של קהל לאתרי אינטרנט גבוהה באופן משמעותי בהרבה מעל החשיפה של קהל לאפליקציות.
בכל אתר במבדק גלשו בממוצע 8.9 מליון מבקרים (unique visitors) לעומת 3.3 מליון בממוצע באפליקציות.

אבל יש גם צד שני למטבע, האפליקציות ניצחו בנוקאאוט בנושא אחר- מעורבות משתמש ( user engagement ). זמן האינטרקציה של של כל משתמש באפליקציות היה בממוצע 201.8 דקות לעומת רק כ10.9 דקות בממוצע למשתמש באתר אינטרנט. בזכות הביצועים הטובים יותר וההנהגות החלקה והנעימה של האפליקציות, החווית משתמש טובה יותר.

PWA - Top 1000 apps vs top 1000 web properties

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

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

איך PWA שונה מאפליקציות?

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

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

Service Workers

אחד מהשחקנים העיקריים בPWA זה (Service Workers (SW, כפי שGoogle מסבירים בדוקומנטציה שלהם:


It’s essentially a JavaScript file that runs separately from the main browser thread, intercepting network requests, caching or retrieving resources from the cache, and delivering push messages.

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

מחזור החיים של הSW

ישנם כמה שלבים שהSW עובר על מנת ‘להיטען’ לתוך הדפדפן ולהפוך לפונקציונלי באופן מלא.

רישום הSW

השלב הראשו ןהוא להוסיף פיסקת JS שרושמת את הSW לאפליקציה שרצה עם מתן אפשרות להגביל את תחום הפעילות של הSW באתר

אירועי התקנת והפעלת הSW בדפדפן

אירועים (events) אלו משוגרים ע”י הSW, אירוע ההתקנה הוא המקום לשמור במטמון משאבים מהדף כך שבפעם הבאה שהמשתמש יגיע לדף הוא יוכל לקבל את המשאבים ישר מהמטמון במהירות ללא צורך להוריד אותם שוב מהרשת (ביצועים טובים יותר, זוכרים?).

ברגע שהSW פונקציונלי ויכול להתמודד עם אירועים הוא משגר את אירוע ההפעלה שלו activate.

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

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *