شركة Mainline للملابس الرجالية تستخدم PWA وتشهد زيادة في معدل الإحالات الناجحة بنسبة 55%

Harry Theodoulou
LinkedIn
Natasha Kosoglov
Natasha Kosoglov
LinkedIn
Thomas Steiner

Mainline هي متجر تجزئة للملابس على الإنترنت يقدم أكبر علامات تجارية لمصممين بارزين في مجال الموضة. تعهد الشركة التي يقع مقرها في المملكة المتحدة بفريقها من الخبراء الداخليين إلى جانب الشركاء الرئيسيين بشكل استراتيجي لتوفير تجربة تسوق سلسة للجميع. ومع وجود تواجد في السوق في أكثر من 100 بلد من خلال تطبيق وسبعة مواقع إقليمية مخصصة، ستواصل شركة Mainline التأكد من أن عروض التجارة الإلكترونية تنافس المنافسة.

التحدّي

كان هدف Mainline Menswear هو استكمال الموقع الإلكتروني الحالي المُحسَّن للأجهزة الجوّالة بميزات تدريجية تلتزم برؤيتها "على الأجهزة الجوّالة أولاً"، مع التركيز على التصميم والوظائف المتوافقة مع الأجهزة الجوّالة مع وضع سوق الهواتف الذكية المتنامية في الاعتبار.

الحلّ

كان الهدف هو إنشاء وإطلاق تطبيق ويب تقدّمي (PWA) مكمّلًا للإصدار الأصلي المتوافق مع الأجهزة الجوّالة من موقع Mainline Menswear (الملابس الرجالية) على الويب، ثم مقارنة الإحصاءات بتطبيقهم المختلط للأجهزة الجوّالة، والمتاح حاليًا على نظامَي التشغيل Android وiOS.

بعد إطلاق التطبيق واستخدامه من قِبل قسم صغير من مستخدمي Mainline Menswear، تمكنوا من تحديد الفرق في الإحصاءات الرئيسية بين PWA والتطبيق والويب.

كان النهج الذي اعتمده Mainline عند تحويل موقعه الإلكتروني إلى تطبيق ويب تقدّمي هو التأكّد من أنّ إطار العمل الذي اختاره لموقع الشركة الإلكتروني (Nuxt.js، باستخدام Vue.js) سيكون فعّالاً في المستقبل وسيتيح للشركة الاستفادة من تكنولوجيا الويب سريعة التغيُّر.

النتائج

%139

زيادة في عدد الصفحات لكل جلسة في تطبيق الويب التقدّمي (PWA) مقارنةً بالويب

زيادة بنسبة %161

فترات جلسات أطول في تطبيق الويب التقدّمي (PWA) مقارنةً بالويب

زيادة بنسبة %10

انخفاض معدّل الارتداد في تطبيق الويب التقدّمي (PWA) مقارنةً بالويب

زيادة بنسبة %12.5

ارتفاع متوسط قيمة طلب الشراء في تطبيق الويب التقدّمي (PWA) مقارنةً بالويب

زيادة بنسبة %55

معدّل إحالات ناجحة أعلى في تطبيق الويب التقدّمي (PWA) مقارنةً بالويب

%243

أرباح أعلى لكل جلسة في تطبيق الويب التقدّمي (PWA) مقارنةً بالويب

نظرة تفصيلية على الجوانب الفنية

تستخدم Mainline Menswear إطار عمل Nuxt.js لتجميع موقعها الإلكتروني وعرضه، وهو تطبيق من صفحة واحدة (SPA).

إنشاء ملف مشغّل خدمات

لإنشاء مشغّل الخدمات، أضافت Mainline Menswear إعدادًا من خلال تنفيذ مخصّص لوحدة Workbox nuxt/pwa.

وقد كان سبب استخدام وحدة nuxt/pwa هو السماح للفريق بإضافة المزيد من عمليات التخصيص إلى ملف مشغِّل الخدمات، الذي لم يتمكّن من خلاله أو واجه مشاكل عند استخدام الإصدار العادي. كان أحد هذه التحسينات هو الوظائف بلا إنترنت التي يوفّرها الموقع الإلكتروني، مثل عرض صفحة تلقائية بلا اتصال بالإنترنت وجمع الإحصاءات عندما تكون غير متصل بالإنترنت.

بنية بيان تطبيق الويب

أنشأ الفريق بيانًا يضم رموزًا لأحجام مختلفة لرموز تطبيقات الأجهزة الجوّالة وتفاصيل أخرى خاصة بتطبيق الويب، مثل 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 إمكانية التحكّم بشكل أفضل في مواد العرض المخزّنة مؤقتًا، ما يسمح لها بتطبيق استراتيجيات معقّدة على كل نوع من أنواع الملفات. وعلى الرغم من أنّ كل هذا يبدو معقدًا ويصعب إعداده وصيانته، يوفّر 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',
);

التخزين المؤقت لخطوط Google

تعتمد إستراتيجية التخزين المؤقت لخطوط Google على نوعين من الملفات:

  • ورقة الأنماط التي تحتوي على تعريفات @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 (الأحدث) محلّ الصورة الأولى (الأقدم)، وبالتالي لا يتم تخزين أكثر من 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);

عرض توضيحي

مثال على صفحة بلا اتصال بالإنترنت كما هو موضّح على www.mainlinemenswear.co.uk.

الإبلاغ عن عمليات التثبيت الناجحة

بالإضافة إلى تتبُّع إطلاق الشاشة الرئيسية (مع "start_url": "/?utm_source=pwa" في بيان تطبيق الويب)، يسجِّل تطبيق الويب أيضًا عمليات تثبيت التطبيق الناجحة من خلال الاستماع إلى حدث appinstalled على window:

window.addEventListener('appinstalled', (evt) => {
  ga('send', 'event', 'Install', 'Success');
});

ستؤدي إضافة إمكانات تطبيق الويب التقدّمي (PWA) إلى موقعك الإلكتروني إلى تحسين تجربة العملاء في التسوّق معك، وستكون أسرع في التسويق مقارنةً بتطبيق [خاص بالنظام الأساسي].

"آندي هويل"، رئيس قسم التطوير

الخلاصة

للاطّلاع على المزيد من المعلومات حول تطبيقات الويب التقدّمية وكيفية إنشائها، يمكنك الانتقال إلى قسم تطبيقات الويب التقدّمية على web.dev.

لقراءة المزيد من دراسات الحالة لتطبيقات الويب التقدّمية، انتقِل إلى قسم دراسات الحالة.