Mainline היא חנות בגדים אונליין שמציעה את מותגי האופנה הגדולים ביותר של מעצבים. החברה שבסיסה בבריטניה מסתמכת על צוות המומחים שלה, בשילוב אסטרטגי עם שותפים מרכזיים, כדי לספק חוויית קנייה חלקה לכולם. החברה קיימת ביותר מ-100 מדינות באמצעות שבעה אתרים אזוריים מותאמים אישית ואפליקציה, ותמשיך להבטיח שהמוצרים שלה למסחר אלקטרוני יהיו תחרותיים.
האתגר
המטרה של Mainline Menswear הייתה להשלים את האתר הנוכחי המותאם לניידים בתכונות מתקדמות שתואמות לחזון שלהם 'נייד קודם', תוך התמקדות בעיצוב ובפונקציונליות שמתאימים לניידים, בהתאם לשוק הסמארטפונים הצומח.
פתרון
המטרה הייתה ליצור ולהשיק אפליקציית PWA שתשלים את הגרסה המקורית של אתר Mainline Menswear שתוכננה במיוחד לנייד, ולאחר מכן להשוות את הנתונים הסטטיסטיים לאפליקציה ההיברידית לנייד שלהם, שזמינה כרגע ל-Android ול-iOS.
אחרי שהאפליקציה הושקה וחלק קטן ממשתמשי Mainline Menswear השתמש בה, הצוות הצליח לקבוע את ההבדל בנתונים הסטטיסטיים העיקריים בין אפליקציית ה-PWA, האפליקציה והאתר.
הגישה של Mainline בהמרת האתר שלהם לאפליקציית PWA הייתה לוודא שהמסגרת שבה הם בחרו לאתר (Nuxt.js, עם שימוש ב-Vue.js) תהיה עמידת עתיד ותאפשר להם לנצל את היתרונות של טכנולוגיית האינטרנט המשתנה במהירות.
תוצאות
139%
יותר דפים בסשן באפליקציה ל-PWA בהשוואה לאפליקציה לאינטרנט.
161%
משך סשנים ארוך יותר באפליקציות ל-PWA בהשוואה לאפליקציות לאינטרנט.
10%
שיעור עזיבה נמוך יותר ב-PWA לעומת באתר
12.5%
ערך הזמנה ממוצע גבוה יותר באפליקציה לעומת באתר
55%
שיעור המרה גבוה יותר באפליקציה לנייד לעומת באתר.
243%
הכנסה גבוהה יותר לכל סשן באפליקציה לנייד לעומת באתר.
ניתוח מעמיק של הנתונים הטכניים
ב-Mainline Menswear משתמשים ב-Nuxt.js framework כדי לארוז ולייצר את האתר שלהם, שהוא אפליקציית דף יחיד (SPA).
יצירת קובץ של שירות עובד
כדי ליצור את ה-service worker, הצוות של Mainline Menswear הוסיף הגדרה באמצעות הטמעה בהתאמה אישית של מודול Workbox של nuxt/pwa
.
הסיבה ליצירת ההסתעפות (fork) של המודול nuxt/pwa
הייתה לאפשר לצוות להוסיף התאמות אישיות נוספות לקובץ של ה-service worker שלא הצליחו לבצע או שהיו להם בעיות בביצוען כשהשתמשו בגרסה הרגילה.
אחת מהאופטימיזציות האלה הייתה בנושא הפונקציונליות אופליין של האתר, למשל הצגת דף ברירת מחדל אופליין ואיסוף נתוני ניתוח בזמן שהמשתמשים נמצאים במצב אופליין.
מבנה המניפסט של אפליקציית האינטרנט
הצוות יצר מניפסט עם סמלים בגדלים שונים של אפליקציות לנייד ופרטים אחרים של אפליקציות אינטרנט, כמו name
, description
ו-theme_color
:
{
"name": "Mainline Menswear",
"short_name": "MMW",
"description": "Shop mens designer clothes with Mainline Menswear. Famous brands including Hugo Boss, Adidas, and Emporio Armani.",
"icons": [
{
"src": "/_nuxt/icons/icon_512.c2336e.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#107cbb"
}
אחרי שתתקינו את אפליקציית האינטרנט, תוכלו להפעיל אותה ממסך הבית בלי שהדפדפן יפריע לכם. כדי לעשות זאת, מוסיפים את הפרמטר display
לקובץ המניפסט של אפליקציית האינטרנט:
{
"display": "standalone"
}
יתרון נוסף הוא שהחברה יכולה עכשיו לעקוב בקלות אחרי מספר המשתמשים שנכנסים לאפליקציית האינטרנט שלה ממסך הבית, פשוט על ידי הוספת הפרמטר utm_source
בשדה start_url
במניפסט:
{
"start_url": "/?utm_source=pwa"
}
אחסון במטמון בזמן ריצה לניווט מהיר יותר
אחסון במטמון לאפליקציות אינטרנט הוא חובה לאופטימיזציה של מהירות הדף ולשיפור חוויית המשתמש של משתמשים חוזרים.
יש כמה גישות שונות לשמירת נתונים במטמון באינטרנט. הצוות משתמש בשילוב של מטמון ה-HTTP ו-Cache API כדי לשמור נכסים במטמון בצד הלקוח.
Cache API מעניק ל-Mainline Menswear שליטה טובה יותר בנכסים שנשמרו במטמון, ומאפשר להם להחיל אסטרטגיות מורכבות על כל סוג קובץ. אומנם כל זה נשמע מסובך וקשה להגדרה ולתחזוקה, אבל Workbox מספק דרך קלה להצהיר על אסטרטגיות מורכבות כאלה ומקל על תחזוקת הקוד.
שמירת CSS ו-JS במטמון
לגבי קובצי CSS ו-JS, הצוות בחר לשמור אותם במטמון ולהציג אותם דרך המטמון באמצעות שיטת Workbox StaleWhileRevalidate
. האסטרטגיה הזו מאפשרת להם להציג במהירות את כל קובצי ה-CSS ו-JS של Nuxt, וכך לשפר משמעותית את ביצועי האתר.
במקביל, הקבצים מעודכנים ברקע לגרסה האחרונה לקראת הביקור הבא:
/* sw.js */
workbox.routing.registerRoute(
/\/_nuxt\/.*(?:js|css)$/,
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'css_js',
}),
'GET',
);
שמירת גופנים של Google במטמון
האסטרטגיה לשמירת Google Fonts במטמון תלויה בשני סוגי קבצים:
- גיליון הסגנונות שמכיל את ההצהרות של
@font-face
. - קובצי הגופן הבסיסיים (שנשלחו בתוך גיליון הסגנונות שצוין למעלה).
// Cache the Google Fonts stylesheets with a stale-while-revalidate strategy.
workbox.routing.registerRoute(
/https:\/\/fonts\.googleapis\.com\/*/,
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'google_fonts_stylesheets',
}),
'GET',
);
// Cache the underlying font files with a cache-first strategy for 1 year.
workbox.routing.registerRoute(
/https:\/\/fonts\.gstatic\.com\/*/,
new workbox.strategies.CacheFirst({
cacheName: 'google_fonts_webfonts',
plugins: [
new workbox.cacheableResponse.CacheableResponsePlugin({
statuses: [0, 200],
}),
new workbox.expiration.ExpirationPlugin({
maxAgeSeconds: 60 * 60 * 24 * 365, // 1 year
maxEntries: 30,
}),
],
}),
'GET',
);
שמירת תמונות במטמון
לגבי התמונות, ב-Mainline Menswear החליטו להשתמש בשתי אסטרטגיות. האסטרטגיה הראשונה חלה על כל התמונות שמגיעות מה-CDN שלהם, בדרך כלל תמונות של מוצרים. הדפים שלהם מכילים הרבה תמונות, ולכן הם מקפידים לא לנצל יותר מדי מקום באחסון של המכשירים של המשתמשים. לכן, באמצעות Workbox, הם הוסיפו אסטרטגיה שמאפשרת אחסון ב-cache של תמונות שמגיעות רק מה-CDN שלהם, עם עד 60 תמונות באמצעות ExpirationPlugin
.
התמונה ה-61 (החדשה ביותר) שהתבקשה מחליפה את התמונה ה-1 (העתיקה ביותר), כך שבכל זמן נתון לא מאוחסנות במטמון יותר מ-60 תמונות של מוצרים.
workbox.routing.registerRoute(
({ url, request }) =>
url.origin === 'https://mainline-menswear-res.cloudinary.com' &&
request.destination === 'image',
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'product_images',
plugins: [
new workbox.expiration.ExpirationPlugin({
// Only cache 60 images.
maxEntries: 60,
purgeOnQuotaError: true,
}),
],
}),
);
אסטרטגיית התמונות השנייה מטפלת בשאר התמונות שמקור הבקשה מבקש. בדרך כלל יש מעט מאוד תמונות קטנות כאלה בכל המקור, אבל למקרה הצורך, מספר התמונות האלה ששמורות במטמון מוגבל גם הוא ל-60.
workbox.routing.registerRoute(
/\.(?:png|gif|jpg|jpeg|svg|webp)$/,
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'images',
plugins: [
new workbox.expiration.ExpirationPlugin({
// Only cache 60 images.
maxEntries: 60,
purgeOnQuotaError: true,
}),
],
}),
);
מתן פונקציונליות אופליין
הדף אופליין מאוחסן במטמון מראש מיד אחרי התקנת קובץ השירות והפעלתו. כדי לעשות זאת, הם יוצרים רשימה של כל יחסי התלות אופליין: קובץ ה-HTML אופליין וסמל ה-SVG אופליין.
const OFFLINE_HTML = '/offline/offline.html';
const PRECACHE = [
{ url: OFFLINE_HTML, revision: '70f044fda3e9647a98f084763ae2c32a' },
{ url: '/offline/offline.svg', revision: 'efe016c546d7ba9f20aefc0afa9fc74a' },
];
לאחר מכן, רשימת הקבצים שנשמרו במטמון מועברת ל-Workbox, שמטפל בכל העבודה הקשה של הוספת כתובות ה-URL למטמון, בדיקה אם יש אי-התאמה בין הגרסאות, עדכון והצגת הקבצים שנשמרו במטמון באמצעות אסטרטגיית CacheFirst
.
workbox.precaching.precacheAndRoute(PRECACHE);
טיפול בניווטים אופליין
אחרי שהקובץ הפעיל של השירות (service worker) מופעל והדף אופליין מאוחסן מראש במטמון, הוא משמש לתגובה לבקשות ניווט אופליין של המשתמש. אפליקציית האינטרנט של Mainline Menswear היא אפליקציית SPA, אבל הדף אופליין מוצג רק אחרי טעינת הדף מחדש, אחרי שהמשתמש סוגר את הכרטיסייה בדפדפן ופותח אותה מחדש, או כשאפליקציית האינטרנט מופעלת ממסך הבית במצב אופליין.
כדי לעשות זאת, ב-Mainline Menswear הגדירו חלופה לבקשות NavigationRoute
שנכשלו באמצעות הדף אופליין שנשמר במטמון מראש:
const htmlHandler = new workbox.strategies.NetworkOnly();
const navigationRoute = new workbox.routing.NavigationRoute(({ event }) => {
const request = event.request;
// A NavigationRoute matches navigation requests in the browser, i.e. requests for HTML
return htmlHandler.handle({ event, request }).catch(() => caches.match(OFFLINE_HTML, {
ignoreSearch: true
}));
});
workbox.routing.registerRoute(navigationRoute);
הדגמה (דמו)
דיווח על התקנות מוצלחות
בנוסף למעקב אחר ההפעלה במסך הבית (באמצעות "start_url": "/?utm_source=pwa"
במניפסט של אפליקציית האינטרנט), אפליקציית האינטרנט מדווחת גם על התקנות מוצלחות של האפליקציה על ידי האזנה לאירוע appinstalled
ב-window
:
window.addEventListener('appinstalled', (evt) => {
ga('send', 'event', 'Install', 'Success');
});
הוספת יכולות של אפליקציה לניהול נתונים באתר תשפר עוד יותר את חוויית הקנייה של הלקוחות, והיא תאפשר לכם להתחיל לשווק את האתר מהר יותר מאשר אפליקציה [ספציפית לפלטפורמה].
אנדי הויל (Andy Hoyle), מנהל הפיתוח
סיכום
מידע נוסף על אפליקציות אינטרנט מתקדמות ועל האופן שבו יוצרים אותן זמין בקטע Progressive Web Apps באתר web.dev.
כדי לקרוא מקרים נוספים לדוגמה בנושא Progressive Web Apps, אפשר לעבור אל הקטע 'מקרים לדוגמה'.