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

Harry Theodoulou

Natasha Kosoglov

Thomas Steiner

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

चैलेंज

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

समस्या का हल

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

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

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

नतीजे

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

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

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

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

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

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

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

सीएसएस और JS फ़ाइलों के लिए, टीम ने उन्हें कैश मेमोरी में सेव करने और StaleWhileRevalidate वर्कबॉक्स रणनीति का इस्तेमाल करके उन्हें कैश मेमोरी पर दिखाने का विकल्प चुना. इस रणनीति की मदद से, वे सभी Nuxt सीएसएस और 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',
);

इमेज कैश करना

इमेज के लिए, 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,
      }),
    ],
  }),
);

ऑफ़लाइन फ़ंक्शन उपलब्ध कराना

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

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);

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

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

इसके लिए, 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" के साथ) के अलावा, वेब ऐप्लिकेशन window को appinstalled इवेंट सुनकर, ऐप्लिकेशन इंस्टॉल होने की जानकारी भी देता है:

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

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

एंडी हॉयल, हेड ऑफ़ डेवलपमेंट

नतीजा

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

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