Mainline Menswear PWA را پیاده سازی می کند و نرخ تبدیل 55 درصدی را افزایش می دهد

Harry Theodoulou

Natasha Kosoglov

Thomas Steiner

مین‌لاین یک خرده‌فروش آنلاین لباس است که بزرگ‌ترین برندهای طراح را در حوزه مد ارائه می‌دهد. این شرکت مستقر در بریتانیا به تیم متخصصان داخلی خود که به صورت استراتژیک با شرکای کلیدی ترکیب شده اند، اعتماد می کند تا یک تجربه خرید بدون اصطکاک را برای همه فراهم کند. با حضور در بازار در بیش از 100 کشور از طریق هفت وب‌سایت منطقه‌ای سفارشی و یک برنامه، Mainline به اطمینان از رقابت پیشنهادی تجارت الکترونیک با رقبا ادامه خواهد داد.

چالش

هدف Mainline Menswear تکمیل وب‌سایت کنونی بهینه‌سازی شده برای موبایل با ویژگی‌های پیشرفته‌ای بود که به دیدگاه «اولین موبایل» آن‌ها، با تمرکز بر طراحی و عملکرد سازگار با موبایل با توجه به بازار رو به رشد گوشی‌های هوشمند، پایبند باشد.

راه حل

هدف ساخت و راه‌اندازی یک PWA بود که نسخه اصلی وب‌سایت Mainline Menswear را تکمیل می‌کرد و سپس آمارها را با برنامه تلفن همراه ترکیبی آن‌ها که در حال حاضر در اندروید و iOS در دسترس است، مقایسه کرد.

هنگامی که برنامه راه اندازی شد و توسط بخش کوچکی از کاربران Mainline Menswear استفاده شد، آنها قادر به تشخیص تفاوت در آمارهای کلیدی بین PWA، برنامه و وب بودند.

رویکرد Mainline هنگام تبدیل وب‌سایت خود به PWA این بود که اطمینان حاصل کند که چارچوبی که برای وب‌سایت خود انتخاب کرده‌اند (Nuxt.js، با استفاده از Vue.js) برای آینده مقاوم است و آنها را قادر می‌سازد از فناوری وب در حال حرکت سریع استفاده کنند.

نتایج

شیرجه عمیق فنی

Mainline Menswear از چارچوب Nuxt.js برای بسته‌بندی و رندر کردن سایت خود استفاده می‌کند که یک برنامه تک صفحه‌ای (SPA) است.

ایجاد فایل سرویسکار

برای ایجاد سرویس، Mainline Menswear پیکربندی را از طریق اجرای سفارشی ماژول nuxt/pwa Workbox اضافه کرد.

دلیل اینکه آنها ماژول 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، تیم تصمیم گرفت آن‌ها را کش کند و با استفاده از استراتژی StaleWhileRevalidate Workbox، آن‌ها را از طریق کش ارائه کند. این استراتژی به آن‌ها اجازه می‌دهد تا تمام فایل‌های Nuxt CSS و JS را به سرعت ارائه دهند، که به طور قابل توجهی عملکرد سایت آنها را افزایش می‌دهد. در همان زمان، فایل ها در پس زمینه به آخرین نسخه برای بازدید بعدی به روز می شوند:

/* sw.js */
workbox.routing.registerRoute(
  /\/_nuxt\/.*(?:js|css)$/,
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'css_js',
  }),
  'GET',
);

ذخیره فونت های گوگل

استراتژی ذخیره فونت های گوگل به دو نوع فایل بستگی دارد:

• شیوه نامه ای که حاوی اعلان های @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 ذخیره می‌کند.

شصت و یکمین (جدیدترین) تصویر درخواست شده جایگزین اولین (قدیمی ترین) تصویر می شود به طوری که در هر لحظه از زمان بیش از 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);

مدیریت ناوبری های آفلاین

هنگامی که سرویس‌کار فعال می‌شود و صفحه آفلاین از پیش ذخیره می‌شود، سپس برای پاسخ به درخواست‌های پیمایش آفلاین توسط کاربر استفاده می‌شود. در حالی که برنامه وب 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 به وب‌سایت شما، تجربه مشتریان شما از خرید با شما را بیشتر می‌کند، و سریع‌تر از یک برنامه [ویژه پلتفرم] به بازار عرضه می‌شود.

اندی هویل، رئیس توسعه

نتیجه گیری

برای کسب اطلاعات بیشتر در مورد برنامه های وب مترقی و نحوه ساخت آنها، به بخش برنامه های وب پیشرفته در web.dev بروید.

برای مطالعه بیشتر مطالعات موردی برنامه‌های وب پیشرفته، به بخش مطالعات موردی مراجعه کنید.