אם אתם מנהלי פרויקטים טכניים או אנליסטים של שיווק דיגיטלי, ואתם רוצים לספק חוויית אינטרנט מודרנית לאפליקציית האינטרנט שלכם ב-Adobe Experience Manager (AEM), ואתם מחפשים אפשרויות לעשות זאת, הגעתם למאמר הנכון. במאמר הזה נסביר מהן אפליקציות Progressive Web App (PWA) ומה צריך כדי ליצור אפליקציית PWA ב-AEM באמצעות ספריית WorkBox דרך הגדרה, בלי קוד.
למה כדאי להשתמש ב-PWA?
Progressive Web Apps מפיקות תועלת ממה שאינטרנט מודרני יכול לעשות. הן ניתנות להתקנה במכשיר שלך, נטענים במהירות והביקורים הבאים נטענים באופן מיידי. הם מגיבים לקלט במהירות. הם פועלים היטב בחיבור לא מהימן או במצב אופליין. באפליקציות ל-PWA נעשה שימוש בממשקי API מודרניים כדי לספק חוויה מרתקת שדומה לאפליקציה, עם ממשק משתמש אופציונלי במסך מלא, עדכון ברקע וגישה לנתונים במצב אופליין.
כדי לשדרג אפליקציית אינטרנט לאפליקציית Progressive Web App, צריך להוסיף שני ארטיפקטים:
- מניפסט של אפליקציית אינטרנט: קובץ תצורה מסוג JSON שמגדיר את כתובת ה-URL של נקודת הכניסה של האפליקציה, את הסמל שמשמש לייצוג ה-PWA והגדרות אחרות שמתארות את המראה וההתנהגות של האפליקציה.
- service worker: סקריפט שמספק שירותי רקע שמעשירים את ה-PWA על ידי הגדרת המשאבים שבהם ה-PWA משתמש ואת האסטרטגיות לגישה אליהם.
מהו קובץ שירות (service worker)?
בעיקרון, Service Worker הוא רק סקריפט שהדפדפן מפעיל באופן עצמאי במהלך האינטראקציה עם אפליקציית האינטרנט. עובד שירות פעיל מספק שירותים כמו אחסון במטמון חכם באמצעות Cache API, עדכון נתונים באמצעות Background Sync API ושילוב עם התראות דחיפה. service worker עם אסטרטגיית מטמון מתאימה מספק חוויות משתמש יציבות ואמינות בתרחישים שונים, ומחזיר משאבים שנשמרו במטמון באופן מיידי, מאחסן נתונים במטמון ומעדכן משאבים כשיש חיבור לאינטרנט.
קשה לכתוב קובצי שירות מאפס. Workbox נוצר כדי להקל על כך. תיבת עבודה היא קבוצה של ספריות שיכולות לעזור לכם לכתוב ולנהל service worker ולשמור במטמון בעזרת Cache Storage API. כשמשתמשים ב-Service Workers וב-Cache Storage API יחד, הם שולטים באופן שבו הבקשות לנכסים (HTML, CSS, JS, תמונות וכו') נשלחות מהרשת או מהמטמון, ומאפשרים גם להחזיר תוכן שנשמר במטמון במצב אופליין. בעזרת Workbox תוכלו להגדיר ולנהל את שניהם במהירות, ועוד הרבה יותר, באמצעות קוד מוכן לייצור.
שדרוג אתר AEM ל-PWA
Adobe Experience Manager (AEM) הוא פתרון מקיף לניהול תוכן לבניית אתרים, אפליקציות לנייד, טפסים ושילוט דיגיטלי. כך קל לנהל את התוכן ואת הנכסים השיווקיים.
AEM מספק ספרייה עשירה לבניית אפליקציות אינטרנט, אבל עד עכשיו היה קשה לבנות PWA על ידי הוספת Service Worker ומניפסט.
Adobe Experience Manager Sites הוא הכלי ליצירת ממשק משתמש, שנכלל ב-Adobe Experience Manager. כשמשתמשים ב-Adobe Experience Manager כשירות ענן, קל להמיר אתרים קיימים של AEM או דף יחיד של אפליקציה ל-Progressive Web App שאפשר להתקין במצב אופליין. כדי לעשות את זה, פשוט מגדירים את האתר ללא צורך בתכנות. הוא משתמש ב-Workbox כדי לספק את השיטות המומלצות ל-Progressive Web Apps, ומפשט את המורכבות של כתיבת מניפסטים סטנדרטיים ושל שירותי עבודה.
AEM תומך בלוקליזציה של תוכן, כך שאפשר להציג מיתוג שונה ואפילו תוכן שונה אופליין ללוקאלים שונים. כדי לעשות זאת, צריך ליצור הגדרות PWA שונות לכל גרסה ראשית בשפה.
תחילת העבודה עם הגדרת PWA ב-AEM
צריך להתחבר אל Adobe Experience Manager כשירות ענן, ולבחור כל דף ב-Adobe Experience Manager של Google Sites או כל דף של מאסטר שפה או מאפייני קליקים. אמורה להופיע כרטיסייה בשם Progressive Web App (אפליקציית אינטרנט מתקדמת). (הערה: אם הכרטיסייה הזו לא מופיעה, צריך לפנות אל Adobe כדי להפעיל את התכונה הזו). תוכלו להגדיר את ההתקנה ואת העיצוב והסגנון של Progressive Web Apps בכמה לחיצות.
אם כבר סיימתם את מדריכי AEM Sites, סביר להניח שכבר ראיתם את האתר WKND. המאמר הזה משתמש בהדגמה של WKND בתור נקודת ההתחלה. בסיום, אפליקציית WKND תתעדכן מאפליקציית אינטרנט ל-PWA באמצעות WorkBox.
הגדרת המניפסט
מניפסט של אפליקציית אינטרנט הוא קובץ JSON שמכיל מאפיינים שמתארים את המראה וההתנהגות של אפליקציית ה-PWA. ב-Adobe Experience Manager Sites יש ממשק משתמש ידידותי להגדרת המאפיינים.
כתובת ה-URL להתחלה היא נקודת הכניסה של אפליקציית ה-PWA. כשמשתמש מקשיק על סמל ה-PWA בטלפון, הוא ניגש לכתובת ה-URL של סטארט-אפ. מצב התצוגה קובע אם האפליקציה תופעל בחלון או במסך מלא. אפשר גם לציין את כיוון המסך של האפליקציה. צבע העיצוב הוא הצבע של החלון וסרגל הכלים, וצבע הרקע הוא הצבע של מסך הפתיחה בזמן הפעלת האפליקציה. הסמל הוא התמונה שמוצגת במסך הבית של המכשיר או בחלונית ההזזה של האפליקציות כשהאפליקציה מותקנת במכשיר. ההגדרה שמוצגת בתמונה יוצרת את קובץ ה-JSON של המניפסט שמוצג בהמשך.
{
"name": "WKND Adventures and Travel",
"short_name": "WKND Adventures and Travel",
"start_url": "/content/wknd/us/en.html",
"display": "standalone",
"theme_color": "#FFDC00",
"background_color": "#FF851B",
"orientation": "any",
"icons": [
{
"src": "/content/dam/wknd/pwa-logo.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "any maskable"
}
]
}
כתובת ה-URL להתחלה יכולה להיות שונה מדף הנחיתה שמוגדר כברירת מחדל לדומיין שלכם. שינוי של הפרמטר start_url מאפשר לשלוח את המשתמשים ישירות לממשק של האפליקציה, במקום לדף ברירת המחדל שיוצג למשתמשים חדשים או לא מאומתים. כך המשתמשים ב-PWA יכולים ליהנות מחוויה חלקה יותר שדומה יותר לאפליקציה.
מערכת AEM מבינה שלשפות מקומיות שונות יכולים להיות מראה ותחושה שונים. אפשר להגדיר מאפיינים, צבעים וסמלים שונים לאזורים שונים או לשפות שונות, ולאחר מכן לסנכרן את ההגדרות עם הדפים המקושרים.
אחרי שמפעילים את אפליקציית ה-PWA בדפדפן, אפשר ללחוץ לחיצה ימנית ולבדוק אותה כדי להציג את כלי הפיתוח ולראות את המניפסט בחלונית Applications (אפליקציות).
הגדרת ה-service worker
אתם יכולים להגדיר את התוכן שרוצים לשמור במטמון ואת אסטרטגיית השמירה במטמון שבה רוצים להשתמש.
אם כבר השתמשתם ב-service workers, יכול להיות שאתם מכירים את אסטרטגיות האחסון במטמון. אסטרטגיות שמירת נתונים במטמון מציינות אילו משאבים לשמור במטמון ואם לחפש את המשאבים האלה קודם במטמון, קודם ברשת או קודם במטמון עם חלופה לרשת. לאחר מכן תוכלו לבחור את המשאבים שיישמרו מראש במטמון כשה-Service Worker מותקן. שירותי ה-Application worker של AEM מיישמים אסטרטגיית מטמון חם, כלומר חוויית המשתמש לא תיפגע גם אם מציינים נתיב חסר או שגוי.
ב-AEM, המונח 'ספריות לקוח' מתייחס לספריות בצד הלקוח: השילוב של JavaScript, CSS ומשאבים סטטיים קשורים שנוספו לפרויקט, שמוצגים לדפדפן האינטרנט של הלקוח ומשמשים אותו. כדי להגדיר בקלות את הספריות בצד הלקוח לשימוש אופליין, מציינים את הספריות האלה בממשק המשתמש.
אפשר גם לכלול משאבים של צד שלישי, כמו גופנים. הגדרת המטמון אופליין מספקת פרטי תצורה ל-service worker שנוצר לאפליקציה שלכם, שמשתמשת ב-workbox באופן פנימי. זה כמעט כל מה שצריך לעשות כדי שניתן יהיה להתקין את האפליקציה שלך. לאחר ההתקנה, סמל האפליקציה יופיע במסך הבית של המכשיר הנייד, בדיוק כמו אפליקציית פלטפורמה. לחיצה על הסמל תפתח את האתר החדש.
חשוב לזכור שאפשר לשנות את התוכן או את ההגדרות האלה בכל שלב. כשמפרסמים את השינויים, ה-Service Worker מתעדכן אצל הלקוח על ידי הדפדפן, ובמשתמש תוצג הודעה על כך שיש גרסה חדשה יותר של ה-PWA. המשתמש יכול ללחוץ על ההודעה כדי לטעון מחדש את האפליקציה ולקבל את העדכונים האחרונים. אפשר לפתוח את חלונית האפליקציות וכלי הפיתוח בדפדפן כדי להציג את פרטי ה-service worker.
אפשר להרחיב את נפח האחסון במטמון כדי להציג את התוכן שנשמר במטמון המקומי:
התוצאות
הגיע הזמן לבדוק את התוצאות של העבודה הקשה שלכם. בעזרת הגדרה בלבד, בלי קוד, הפכתם את האתר ב-AEM לאפליקציית Progressive Web App.
הכלים למפתחים של Chrome מספקים ביקורת של Lighthouse שמאפשרת לכם לבדוק את מידת התאימות של אפליקציית האינטרנט וההגדרות שלה לתקני Progressive Web App.
סיכום
אפליקציות Progressive Web App מספקות חוויית שימוש כמו באפליקציה לאתר שלכם, שמשתמשת בפלטפורמות שונות ובאופי הפתוח של האינטרנט בעלות נמוכה יותר של פיתוח ותחזוקה, תוך מתן שליטה על ההפצה. כך תשפרו את רמת העניין והשימור, והכי חשוב - תוכלו להגדיל את שיעורי ההמרה. בעזרת AEM בשילוב עם Workbox, אפשר לשדרג בקלות את האתר הקיים ל-PWA רק באמצעות הגדרה בלי צורך בקוד.