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