Progressive Web Apps (PWA)

מה הם Progressive Web Apps או PWAs?

Progressive Web Apps הם השילוב הטכנולוגי של יישומים native ויישומי האינטרנט מבוססי HTML5 שאנחנו מכירים. PWAs הגיעו כדי לגשר על הפער הטכנולוגי בין אפליקציות לעמודי אינטרנט.

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

תכונות שחייבות להיות ל-Progressive Web Apps

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

כמובן, אנחנו מדברים במונחים כלליים. משם, כל מודל עסק/שירות יתאים את היעדים שלו לצורכי קהל היעד שלו.

מהירות

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

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

למשתמשים כיום אין סבלנות; הם לא מחכים לאתר להיטען לחלוטין. 53% מהמשתמשים לא יחכו יותר מ-3 שניות לטעינת אתר, על פי Think with Google

אמין

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

ניתן להתקנה

PWAs ניתנים להתקנה ללא צורך ללכת ל-Chrome Store, Apple Store או לכל אחת מחנויות האפליקציות הקיימות. זכרו שהם אינם יישומי native, כך שאנחנו יכולים לגשת אליהם מבלי לעבור דרך החנויות הללו.

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

מכשירים שונים: נייד ודסקטופ

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

יתרונות וחסרונות של PWAs

חלק מהיתרונות כבר הוזכרו לעיל בעת הסבר על תכונות היישומים הפרוגרסיביים. אבל יש הרבה יותר סיבות לשקול שימוש בטכנולוגיה הזו בעסק שלנו.

• ›חיסכון במשאבים
• ›ללא דרישת התקנה
• ›מהירות טעינה גבוהה מאוד
• ›התראות push ישירות לסמארטפונים
• ›רץ על כל מערכות ההפעלה
• ›אבטחה משופרת
• ›פחות עבודת פיתוח ותחזוקה מאשר אפליקציית native.
• ›חסכוני יותר מאשר אפליקציית native.

חסרונות

• ›דורש חיבור אינטרנט.
• ›לא כל הדפדפנים תומכים ב-PWAs.
• ›צריכת סוללה גבוהה

מהו Service Worker?

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

דבר חשוב אחד שעלינו לדעת הוא ש-Service Workers יכולים לתפקד רק אם יש לכם תעודת SSL ואתם מגישים אותם דרך https.

עכשיו בואו נראה הכל עם דוגמה: האתר של BMW וה-PWA שלו.

דוגמת PWA: BMW

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

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

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

אבל בואו נגיע לעניין שעל הפרק היום.

ברגע בתוך האתר, בואו נלך לסרגל "התאמה אישית ובקרה" של Chrome.

כפי שיכולתם לראות, נפתח חלון עם התוכן של אתר BMW. בהשוואה בין שני התכנים, אנחנו רואים שהם כמעט זהים.

תמונה של האתר בדפדפן (Chrome)

תמונה של האתר ב-PWA דסקטופ

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

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

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

בעת כניסה לאתר עם PWA; נראה אפשרות ליצירת קיצור דרך.

אם נקבל, נראה אייקון PWA בדסקטופ הנייד שלנו.

DevTools ללמוד יותר על PWAs

בנקודה זו, אני רוצה לצלול לדוגמאות כדי להסביר מושגים ותכונות של סוג זה של אפליקציה.

לשם כך אנחנו עומדים להשתמש בכלי המפתח ש-Chrome מספק (DevTools). אנחנו פותחים את ה-inspector עם הכפתור הימני והולכים אל Application.

Chrome Devtools

App Manifest (Web Application Manifest)

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

דוגמה ל-Manifest (JSON)

Service Workers

כפי שהסברנו קודם, עכשיו אנחנו יכולים לראות על מה זה. אנחנו רואים את קובץ ה-JS ובו את הסקריפטים שהוא משתמש בהם. ה-Service Worker מותקן בדפדפן. יהיו לנו כמה מיישומי אינטרנט אחרים.

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

איך ליישם PWA ב-WordPress?

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

תוספים פופולריים ביותר ליישום PWA ב-WordPress.

PWAs בשיווק

עבור אלה מאיתנו שעובדים בשיווק, Progressive Web Apps יכולים לעזור לנו להשיג יעדים שכל מחלקת שיווק יש לה בראש כדי לצמוח את המותג.

נאמנות ומכירות

אחד היעדים שעובדים עליו הכי גרוע על ידי חלק מהמותגים. כולנו יודעים את המעורבות הנמוכה שמותגי טלפונים ניידים יש להם בעת הטיפול בלקוחות שלהם, לתת דוגמה.

התראות push ב-PWAs הן אחת הפעולות שעובדות הכי טוב ותורמות ליצירת מכירות.

מחקר שנערך על ידי Gartner על PWAs נותן לנו סדרה של סטטיסטיקות מאוד מעניינות על Lancome ו-Alibaba; Lancome מדווחת על עלייה של 17% בהמרות, 51% בסשנים ממכשירים ניידים ו-52% ב-iOS. Alibaba (הקבוצה ש-Aliexpress שייכת אליה) שיפרה את שיעור ההמרה שלה ב-76%.

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

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

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

הפניות

• ›תיעוד גוגל על PWAs