पुरुषों के कपड़े, मेनलाइन ने PWA लागू किया और कन्वर्ज़न रेट में 55% की बढ़ोतरी हुई

Mainline, कपड़ों का ऑनलाइन खुदरा स्टोर है. यहां फै़शन के सबसे बड़े डिज़ाइनर ब्रैंड के नाम मिलते हैं. यूनाइटेड किंगडम की इस कंपनी ने अपने विशेषज्ञों की टीम को भरोसा दिया है. साथ ही, इस टीम को मुख्य पार्टनर के साथ मिलकर काम करने की रणनीति दी है, ताकि सभी को खरीदारी का बेहतर अनुभव दिया जा सके. Mainline, 100 से ज़्यादा देशों में अपनी सेवाएं देती है. इसके लिए, कंपनी ने ज़रूरत के हिसाब से बनाई गई सात वेबसाइटें और एक ऐप्लिकेशन लॉन्च किया है. Mainline यह पक्का करती रहेगी कि ई-कॉमर्स की सेवाओं में, वह अपने प्रतिस्पर्धियों से आगे रहे.

चुनौती

Mainline Menswear का लक्ष्य, मोबाइल के लिए ऑप्टिमाइज़ की गई मौजूदा वेबसाइट को बेहतर सुविधाओं के साथ बेहतर बनाना था. ये सुविधाएं, 'मोबाइल फ़र्स्ट' के उनके विज़न के मुताबिक होंगी. इनमें, स्मार्टफ़ोन के बढ़ते बाज़ार को ध्यान में रखते हुए, मोबाइल-फ़्रेंडली डिज़ाइन और फ़ंक्शन पर फ़ोकस किया जाएगा.

समाधान

इसका मकसद, ऐसा PWA बनाना और लॉन्च करना था जो Mainline Menswear की वेबसाइट के ओरिजनल मोबाइल फ़्रेंडली वर्शन के साथ काम करता हो. इसके बाद, इसके आंकड़ों की तुलना, Android और iOS पर उपलब्ध उनके हाइब्रिड मोबाइल ऐप्लिकेशन से की गई.

ऐप्लिकेशन लॉन्च होने के बाद, Mainline Menswear के कुछ उपयोगकर्ताओं ने इसका इस्तेमाल किया. इससे उन्हें PWA, ऐप्लिकेशन, और वेब के बीच मुख्य आंकड़ों में अंतर पता चल पाया.

Mainline ने अपनी वेबसाइट को PWA में बदलने के लिए यह पक्का किया कि वे अपनी वेबसाइट के लिए जो फ़्रेमवर्क (Vue.js का इस्तेमाल करने वाला Nuxt.js) चुनें वह आने वाले समय में भी काम करता रहे. साथ ही, वे तेज़ी से बदलती वेब टेक्नोलॉजी का फ़ायदा ले सकें.

नतीजे

139%

वेब के मुकाबले, पीडब्ल्यूए में हर सेशन में ज़्यादा पेज देखे जाते हैं.

161%

PWA बनाम वेब में सेशन की अवधि ज़्यादा होती है.

10%

PWA बनाम वेब में बाउंस रेट कम होना

12.5%

वेब के मुकाबले PWA में ऑर्डर की औसत कीमत ज़्यादा है

55%

वेब के मुकाबले PWA में ज़्यादा कन्वर्ज़न रेट.

243%

वेब के मुकाबले PWA से हर सेशन में ज़्यादा रेवेन्यू.

तकनीकी जानकारी

Mainline Menswear अपनी साइट को बंडल और रेंडर करने के लिए, Nuxt.js फ़्रेमवर्क का इस्तेमाल कर रहा है. यह साइट एक पेज वाला ऐप्लिकेशन (एसपीए) है.

सेवा वर्कर फ़ाइल जनरेट करना

सेवा वर्कर जनरेट करने के लिए, Mainline Menswear ने nuxt/pwa Workbox मॉड्यूल को कस्टम तरीके से लागू करके कॉन्फ़िगरेशन जोड़ा.

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"
}

आखिर में, कंपनी अब आसानी से यह ट्रैक कर सकती है कि कितने उपयोगकर्ता होम स्क्रीन से उनके वेब ऐप्लिकेशन पर जा रहे हैं. इसके लिए, बस मेनिफ़ेस्ट के start_url फ़ील्ड में utm_source पैरामीटर जोड़ना होगा:

{
  "start_url": "/?utm_source=pwa"
}

तेज़ नेविगेशन के लिए रनटाइम कैश मेमोरी

पेज की स्पीड को ऑप्टिमाइज़ करने और वापस आने वाले उपयोगकर्ताओं को बेहतर उपयोगकर्ता अनुभव देने के लिए, वेब ऐप्लिकेशन के लिए कैश मेमोरी का इस्तेमाल करना ज़रूरी है.

वेब पर कैश मेमोरी का इस्तेमाल करने के लिए, कई तरह के अलग-अलग तरीके अपनाए जा सकते हैं. क्लाइंट साइड पर ऐसेट को कैश मेमोरी में सेव करने के लिए, टीम एचटीटीपी कैश मेमोरी और Cache API का इस्तेमाल कर रही है.

कैश मेमोरी में सेव की गई एसेट पर बेहतर कंट्रोल पाने के लिए, Mainline Menswear ने कैश मेमोरी में सेव की गई एसेट के लिए Cache API का इस्तेमाल किया. इससे, वे हर फ़ाइल टाइप पर जटिल रणनीतियां लागू कर पा रहे हैं. ऐसा लग सकता है कि इन रणनीतियों को सेट अप करना और उनका रखरखाव करना मुश्किल है. हालांकि, Workbox की मदद से, इन रणनीतियों को आसानी से सेट अप किया जा सकता है और उनका रखरखाव किया जा सकता है.

सीएसएस और JS को कैश मेमोरी में सेव करना

सीएसएस और जेएस फ़ाइलों के लिए, टीम ने उन्हें कैश मेमोरी में सेव करने का विकल्प चुना. साथ ही, StaleWhileRevalidate Workbox की रणनीति का इस्तेमाल करके, उन्हें कैश मेमोरी से दिखाया. इस रणनीति की मदद से, वे सभी Nuxt CSS और JS फ़ाइलों को तेज़ी से दिखा पाते हैं. इससे उनकी साइट की परफ़ॉर्मेंस काफ़ी बेहतर होती है. साथ ही, अगली बार आने पर फ़ाइलों को बैकग्राउंड में नए वर्शन पर अपडेट किया जा रहा है:

/* 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 ने दो रणनीतियों का इस्तेमाल करने का फ़ैसला लिया. पहली रणनीति, उनके सीडीएन से आने वाली सभी इमेज पर लागू होती है. आम तौर पर, ये प्रॉडक्ट इमेज होती हैं. उनके पेजों पर ज़्यादा इमेज होती हैं. इसलिए, वे अपने उपयोगकर्ताओं के डिवाइस के स्टोरेज का ज़्यादा इस्तेमाल नहीं करना चाहते. इसलिए, उन्होंने Workbox की मदद से एक रणनीति जोड़ी है. इस रणनीति के तहत, सिर्फ़ अपने सीडीएन से आने वाली इमेज को कैश मेमोरी में सेव किया जाता है. साथ ही, ExpirationPlugin का इस्तेमाल करके, ज़्यादा से ज़्यादा 60 इमेज सेव की जाती हैं.

मांगी गई 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,
      }),
    ],
  }),
);

ऑफ़लाइन सुविधाएं उपलब्ध कराना

सर्विस वर्कर के इंस्टॉल और चालू होने के तुरंत बाद, ऑफ़लाइन पेज को पहले से कैश मेमोरी में सेव कर लिया जाता है. ऐसा करने के लिए, वे सभी ऑफ़लाइन डिपेंडेंसी की सूची बनाते हैं: ऑफ़लाइन एचटीएमएल फ़ाइल और ऑफ़लाइन एसवीजी आइकॉन.

const OFFLINE_HTML = '/offline/offline.html';
const PRECACHE = [
  { url: OFFLINE_HTML, revision: '70f044fda3e9647a98f084763ae2c32a' },
  { url: '/offline/offline.svg', revision: 'efe016c546d7ba9f20aefc0afa9fc74a' },
];

इसके बाद, पहले से कैश मेमोरी में सेव की जाने वाली फ़ाइलों की सूची को Workbox में डाला जाता है. यह कैश मेमोरी में यूआरएल जोड़ने, बदलावों में कोई अंतर होने की जांच करने, अपडेट करने, और पहले से कैश मेमोरी में सेव की गई फ़ाइलों को CacheFirst की रणनीति के साथ दिखाने जैसे सभी काम करता है.

workbox.precaching.precacheAndRoute(PRECACHE);

ऑफ़लाइन नेविगेशन मैनेज करना

सर्विस वर्कर के चालू होने और ऑफ़लाइन पेज के पहले से कैश मेमोरी में सेव होने के बाद, इसका इस्तेमाल उपयोगकर्ता के ऑफ़लाइन नेविगेशन के अनुरोधों का जवाब देने के लिए किया जाता है. Mainline Menswear का वेब ऐप्लिकेशन एसपीए है. हालांकि, ऑफ़लाइन पेज सिर्फ़ तब दिखता है, जब पेज फिर से लोड हो जाए, उपयोगकर्ता ब्राउज़र टैब को बंद करके फिर से खोले या ऑफ़लाइन होने पर होम स्क्रीन से वेब ऐप्लिकेशन को लॉन्च किया जाए.

ऐसा करने के लिए, 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 पर मौजूद ऑफ़लाइन पेज का उदाहरण.

इंस्टॉल होने की जानकारी देने वाली रिपोर्ट

वेब ऐप्लिकेशन, होम स्क्रीन पर ऐप्लिकेशन लॉन्च होने की ट्रैकिंग के अलावा, window पर appinstalled इवेंट को सुनकर, ऐप्लिकेशन के इंस्टॉल होने की जानकारी भी देता है. इसके लिए, वेब ऐप्लिकेशन के मेनिफ़ेस्ट में "start_url": "/?utm_source=pwa" का इस्तेमाल किया जाता है:

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

अपनी वेबसाइट में PWA की सुविधाएं जोड़ने से, आपके ग्राहकों को आपके साथ खरीदारी करने का बेहतर अनुभव मिलेगा. साथ ही, यह [प्लैटफ़ॉर्म के हिसाब से] ऐप्लिकेशन की तुलना में, मार्केट में तेज़ी से पहुंच जाएगा.

एंडी होयल, डेवलपमेंट हेड

नतीजा

प्रोग्रेसिव वेब ऐप्लिकेशन और उन्हें बनाने के तरीके के बारे में ज़्यादा जानने के लिए, web.dev पर प्रोग्रेसिव वेब ऐप्लिकेशन सेक्शन पर जाएं.

प्रोग्रेसिव वेब ऐप्लिकेशन की ज़्यादा केस स्टडी पढ़ने के लिए, केस स्टडी सेक्शन पर जाएं.