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

Harry Theodoulou

Natasha Kosoglov

Thomas Steiner

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

चुनौती

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

समाधान

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

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

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

नतीजे

तकनीकी चीज़ों की पूरी जानकारी

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

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

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

वेब पर कैश मेमोरी में डेटा सेव करने के कई तरीके हैं. टीम, क्लाइंट साइड पर ऐसेट को कैश मेमोरी में सेव करने के लिए, एचटीटीपी कैश और कैश एपीआई, दोनों का इस्तेमाल कर रही है.

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

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

सीएसएस और 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);

डेमो

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

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

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

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

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

नतीजा

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

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