אם אתם אחראיים טכניים או מנתחי שיווק בדיגיטל שמעוניינים לספק חוויית אינטרנט מודרנית לאפליקציית האינטרנט שלכם ב-Adobe Experience Manager (AEM) וחיפשתם את האפשרויות שעומדות לרשותכם, אז הגעת למאמר הנכון. בשיעור זה נסביר מהן אפליקציות Progressive Web Apps (PWA) ומה צריך כדי ליצור PWA ב-AEM הממנף את ספריית WorkBox באמצעות הגדרה ללא צורך בתכנות.
למה כדאי לבחור ב-PWA?
אפליקציות מסוג Progressive Web App ממנפות את כל מה שהאינטרנט המודרני יכול לעשות. ניתן להתקין אותן במכשיר שלכם, נטענות במהירות והביקורים הבאים נטענים באופן מיידי. הם מגיבים מהר לקלט. הן פועלות היטב בחיבור לא אמין או במצב אופליין. אפליקציות PWA משתמשות בממשקי API מודרניים כדי לספק חוויה מעניינת כמו באפליקציה עם ממשק משתמש אופציונלי במסך מלא, עדכון ברקע וגישה אופליין לנתונים.
כדי לשפר אפליקציית אינטרנט ולהפוך אותה ל-Progressive Web App, צריך להוסיף שני פריטי מידע שנוצרו בתהליך הפיתוח (Artifact):
- מניפסט של אפליקציית אינטרנט: קובץ תצורה בפורמט JSON שמגדיר את כתובת ה-URL של נקודת הכניסה לאפליקציה. הסמל משמש לייצוג ה-PWA והגדרות נוספות, שמתארות את המראה וההתנהגות של האפליקציה.
- קובץ שירות (service worker): סקריפט שמספק שירותי רקע שמעשירים את ה-PWA באמצעות הגדרת המשאבים שבהם ה-PWA משתמשת והאסטרטגיות לגישה אליהם.
מהו קובץ שירות (service worker)?
בבסיסו, קובץ שירות (service worker) הוא סקריפט שהדפדפן מריץ באופן עצמאי בזמן האינטראקציה עם אפליקציית האינטרנט שלכם. קובץ שירות (service worker) פעיל מספק שירותים כגון שמירה חכמה במטמון באמצעות Cache API, עדכון נתונים באמצעות Background Sync API ושילוב עם הודעות Push. קובץ שירות (service worker) עם אסטרטגיית השמירה הנכונה במטמון מספק חוויית משתמש יציבה ואמינה לתרחישים שונים, החזרה מיידית של משאבים שנשמרו מראש, אחסון נתונים במטמון ועדכון משאבים כשהם מחוברים לאינטרנט.
ב-Service Workers לפעמים קשה לכתוב מאפס. כדי שיהיה לך קל יותר, יצרנו את תיבת העבודה. Workbox היא קבוצת ספריות שיכולות לעזור לכם לכתוב ולנהל service worker ושמירה במטמון באמצעות Cache Storage API. כשמשתמשים ב-Service Workers ובממשק ה-API של זכרון המטמון, כשמשתמשים בהם יחד, קובעים באיזה אופן יתקבלו נכסים (HTML, CSS, JS, תמונות וכו') מהרשת או מהמטמון, ואפילו מאפשרים לכם להחזיר תוכן שנשמר במטמון במצב אופליין. בעזרת Workbox ניתן להגדיר ולנהל במהירות את שניהם, ועוד, באמצעות קוד שמוכן לייצור.
שדרוג של אתר AEM ל-PWA
Adobe Experience Manager (AEM) הוא פתרון מקיף לניהול תוכן לבניית אתרים, אפליקציות לנייד, טפסים ושילוט דיגיטלי. כך אפשר לנהל בקלות את התוכן השיווקי ואת הנכסים השיווקיים.
למרות ש-AEM מספקת ספרייה עשירה לבניית אפליקציות אינטרנט, עד כה היה קשה לבנות PWA על ידי הוספת קובץ שירות (service worker) ומניפסט.
'האתרים של Adobe Experience Manager' הוא הכלי לבניית ממשק משתמש שהוא חלק מ-Adobe Experience Manager. כשמשתמשים ב-AEM Sites יחד עם Adobe Experience Manager כשירות ענן, קל להמיר כל אתר AEM קיים או אפליקציה בדף יחיד לאפליקציה מסוג Progressive Web App עם תמיכה אופליין, עם הגדרות אישיות בלבד וללא קוד. היא משתמשת ב-Workbox כדי לספק את השיטות המומלצות עבור Progressive Web Apps ומפשטת את המורכבות של כתיבת מניפסטים סטנדרטיים ו-Service Workers.
AEM תומך בלוקליזציה של תוכן, כך שאפשר להשתמש במיתוג שונה ואפילו תוכן אופליין שונה ללוקאלים שונים. כדי לעשות זאת, צריך לפתח הגדרות PWA שונות לכל מאסטר של השפה.
תחילת העבודה עם הגדרות PWA ב-AEM
מתחברים ל-Adobe Experience Manager בתור שירות ענן ובוחרים בדף או במאסטר של השפה הראשית ב-Adobe Experience Manager ומאפייני קליקים. אמורה להופיע כרטיסייה בשם 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 בדפדפן, אפשר ללחוץ לחיצה ימנית ולבדוק את כלי הפיתוח כדי להציג את המניפסט בחלונית האפליקציות.
הגדרת קובץ השירות (service worker)
אתם יכולים להגדיר את התוכן לשמירה במטמון ואת אסטרטגיית השמירה במטמון שבה תשתמשו.
אם אתם משתמשים ב-Service Workers, ייתכן שאתם מכירים את אסטרטגיות השמירה במטמון. אסטרטגיות של שמירה במטמון מציינות אילו משאבים לשמור במטמון והאם לחפש קודם את המשאבים האלה במטמון, קודם ברשת או במטמון עם אפשרות רשת. לאחר מכן אפשר לבחור את המשאבים לשמירה מראש במטמון כש-Service Worker מותקן. עובדים של שירות אפליקציות של AEM מיישמים אסטרטגיית מטמון חם, והמשמעות היא שחוויית המשתמש לא תיפגע גם אם תציינו נתיב חסר או פגום.
ב-AEM, המונח "clientlibs" מתייחס לספריות בצד הלקוח: השילוב של JavaScript, CSS ומשאבים סטטיים קשורים שהתווספו לפרויקט שלכם שמוצגים בדפדפן האינטרנט של הלקוח ומשמשים אותו. ניתן להגדיר בקלות את הספריות בצד הלקוח לשימוש אופליין על ידי ציון הספריות האלה בממשק המשתמש.
אפשר גם לכלול משאבים של צד שלישי כמו גופנים. התצורה של המטמון הלא מקוון מספקת פרטי תצורה ל-Service Worker שנוצר עבור האפליקציה שמשתמשת בתיבת העבודה באופן פנימי. זה פחות או יותר כל מה שצריך כדי לאפשר את ההתקנה של האפליקציה. לאחר ההתקנה, סמל האפליקציה יופיע במסך הבית של המכשיר הנייד בדיוק כמו אפליקציה בפלטפורמה. לחיצה על הסמל תיגש לאתר X.
לתשומת ליבך, תמיד אפשר לשנות את התוכן או את ההגדרות האלה. כשתפרסם את השינויים, ה-Service Worker יתעדכן על ידי הדפדפן ותוצג למשתמש הודעה על כך שיש גרסה חדשה יותר של ה-PWA. המשתמש יכול ללחוץ על ההודעה כדי לטעון מחדש את האפליקציה ולקבל את העדכונים האחרונים. אפשר לפתוח את חלונית הכלים והאפליקציות למפתחים בדפדפן כדי להציג את פרטי קובץ השירות (service worker).
ניתן להרחיב את נפח האחסון של המטמון כדי להציג את התוכן שנשמר במטמון באופן מקומי:
התוצאות
הגיע הזמן לבחון את התוצאות של העבודה הקשה שלכם. בעזרת תצורה בלבד ובלי תכנות, שיפרת את אתר AEM שלך והפך ל-Progressive Web App.
הכלים למפתחים ב-Chrome מספקים בדיקת מגדלור שמאפשרת לבדוק עד כמה אפליקציית האינטרנט וההגדרות שלכם עומדות בסטנדרטים של Progressive Web App.
סיכום
אפליקציות מסוג Progressive Web Apps מספקות חוויה דמוית-אפליקציה לאתר שלך, שמשתמשת בפלטפורמות השונות ובטבע הפתוח של האינטרנט, בעלות נמוכה יותר של פיתוח ותחזוקה, תוך שליטה על ההפצה. כך ניתן להגביר את המעורבות, השימור, והכי חשוב, להשיג שיעורי המרה גבוהים יותר. AEM בשילוב עם Workbox מאפשרים לכם להפוך בקלות את האתר הקיים שלכם ל-PWA באמצעות תצורה בלבד וללא קוד.