בגדי גברים ממוצעים מיישמים PWA ומשיגים עלייה של 55% בשיעור ההמרות

Harry Theodoulou

Natasha Kosoglov

Thomas Steiner

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

האתגר

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

פתרון

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

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

הגישה של Mainline בהמרת האתר שלהם לאפליקציית PWA הייתה לוודא שהמסגרת שבה הם בחרו לאתר (Nuxt.js, עם שימוש ב-Vue.js) תהיה עמידת עתיד ותאפשר להם לנצל את היתרונות של טכנולוגיית האינטרנט המשתנה במהירות.

תוצאות

ניתוח מעמיק של הנתונים הטכניים

ב-Mainline Menswear משתמשים ב-Nuxt.js framework כדי לארוז ולייצר את האתר שלהם, שהוא אפליקציית דף יחיד (SPA).

יצירת קובץ Service Worker

כדי ליצור את Service Worker, קבוצת Mainline Menswear הוסיפה הגדרות אישיות באמצעות הטמעה מותאמת אישית של המודול nuxt/pwa Workbox.

הסיבה ליצירת ההסתעפות (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 הם הוסיפו אסטרטגיה של שמירה במטמון של תמונות שמגיעות רק מה-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');
});

הוספת יכולות של PWA לאתר תשפר את חוויית הקנייה של הלקוחות בעסק שלך, ותהיה לך אפשרות לשווק מהר יותר מאשר אפליקציה [ספציפית לפלטפורמה].

Andy Hoyle, מנהל הפיתוח

סיכום

מידע נוסף על אפליקציות אינטרנט מתקדמות ועל האופן שבו יוצרים אותן זמין בקטע Progressive Web Apps באתר web.dev.

כדי לקרוא מקרים נוספים לדוגמה בנושא Progressive Web Apps, אפשר לעבור אל הקטע 'מקרים לדוגמה'.