মেনলাইন মেন্সওয়্যার PWA প্রয়োগ করে এবং 55% রূপান্তর হারের উন্নতি দেখে

Harry Theodoulou
LinkedIn
নাতাশা কোসোগ্লোভ
Natasha Kosoglov
LinkedIn
টমাস স্টেইনার

মেইনলাইন হল একটি অনলাইন পোশাক খুচরা বিক্রেতা যা ফ্যাশনের সবচেয়ে বড় ডিজাইনার ব্র্যান্ডের নাম অফার করে। যুক্তরাজ্য-ভিত্তিক কোম্পানিটি সবার জন্য একটি ঘর্ষণহীন কেনাকাটার অভিজ্ঞতা প্রদানের জন্য মূল অংশীদারদের সাথে কৌশলগতভাবে মিশ্রিত, অভ্যন্তরীণ বিশেষজ্ঞদের দলকে অর্পণ করে। সাতটি কাস্টম-নির্মিত আঞ্চলিক ওয়েবসাইট এবং একটি অ্যাপের মাধ্যমে 100 টিরও বেশি দেশে বাজারে উপস্থিতি সহ, মেইনলাইন নিশ্চিত করতে থাকবে যে ইকমার্স অফারটি প্রতিযোগিতার প্রতিদ্বন্দ্বিতা করছে।

চ্যালেঞ্জ

মেনলাইন মেনসওয়্যারের লক্ষ্য ছিল বর্তমান মোবাইল অপ্টিমাইজ করা ওয়েবসাইটটিকে প্রগতিশীল বৈশিষ্ট্যের সাথে পরিপূরক করা যা তাদের 'মোবাইল ফার্স্ট' দৃষ্টিভঙ্গি মেনে চলবে, মোবাইল-বান্ধব ডিজাইন এবং কার্যকারিতাকে মাথায় রেখে ক্রমবর্ধমান স্মার্টফোন বাজারকে মাথায় রেখে।

সমাধান

উদ্দেশ্য ছিল একটি PWA তৈরি এবং চালু করা যা মেইনলাইন মেনসওয়্যার ওয়েবসাইটের আসল মোবাইল ফ্রেন্ডলি সংস্করণের পরিপূরক, এবং তারপর পরিসংখ্যানগুলিকে তাদের হাইব্রিড মোবাইল অ্যাপের সাথে তুলনা করা, যা বর্তমানে Android এবং iOS-এ উপলব্ধ।

অ্যাপটি চালু হওয়ার পরে এবং মেনলাইন মেনওয়্যার ব্যবহারকারীদের একটি ছোট অংশ দ্বারা ব্যবহার করা হচ্ছে, তারা PWA, অ্যাপ এবং ওয়েবের মধ্যে মূল পরিসংখ্যানের পার্থক্য নির্ধারণ করতে সক্ষম হয়েছিল।

তাদের ওয়েবসাইটকে PWA-তে রূপান্তর করার সময় মেইনলাইন যে পদ্ধতিটি গ্রহণ করেছিল তা ছিল নিশ্চিত করা যে তারা তাদের ওয়েবসাইটের জন্য (Nuxt.js, Vue.js ব্যবহার করে) যে ফ্রেমওয়ার্ক বেছে নিয়েছে তা ভবিষ্যত-প্রমাণ হবে এবং দ্রুত চলমান ওয়েব প্রযুক্তির সুবিধা নিতে সক্ষম হবে।

ফলাফল

139 %

PWA বনাম ওয়েবে প্রতি সেশনে আরও পৃষ্ঠা।

161 %

PWA বনাম ওয়েবে দীর্ঘ সেশনের সময়কাল।

10 %

PWA বনাম ওয়েবে কম বাউন্স রেট

12.5 %

PWA বনাম ওয়েবে উচ্চতর গড় অর্ডার মান

55 %

PWA বনাম ওয়েবে উচ্চতর রূপান্তর হার।

243 %

PWA বনাম ওয়েবে সেশন প্রতি উচ্চ আয়।

প্রযুক্তিগত গভীর ডুব

মেনলাইন মেনওয়্যার তাদের সাইট বান্ডেল এবং রেন্ডার করতে Nuxt.js ফ্রেমওয়ার্ক ব্যবহার করছে, যা একটি একক পৃষ্ঠা অ্যাপ্লিকেশন (SPA)।

একটি পরিষেবা কর্মী ফাইল তৈরি করা হচ্ছে

পরিষেবা কর্মী তৈরি করার জন্য, মেইনলাইন মেন্সওয়্যার 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"
}

সবশেষে কিন্তু কম নয়, কোম্পানি এখন ম্যানিফেস্টের start_url ফিল্ডে একটি utm_source প্যারামিটার যোগ করে হোম স্ক্রীন থেকে কতজন ব্যবহারকারী তাদের ওয়েব অ্যাপে ভিজিট করছে তা সহজেই ট্র্যাক করতে সক্ষম:

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

দ্রুত নেভিগেশনের জন্য রানটাইম ক্যাশিং

পৃষ্ঠার গতি অপ্টিমাইজেশানের জন্য এবং ফিরে আসা ব্যবহারকারীদের জন্য একটি ভাল ব্যবহারকারীর অভিজ্ঞতা প্রদানের জন্য ওয়েব অ্যাপগুলির জন্য ক্যাশে করা আবশ্যক৷

ওয়েবে ক্যাশে করার জন্য, বেশ কয়েকটি ভিন্ন পদ্ধতি রয়েছে। দলটি ক্লায়েন্ট সাইডে সম্পদ ক্যাশ করার জন্য HTTP ক্যাশে এবং ক্যাশে API- এর মিশ্রণ ব্যবহার করছে।

ক্যাশে এপিআই মেইনলাইন মেনসওয়্যারকে ক্যাশে করা সম্পদের উপর আরও সূক্ষ্ম নিয়ন্ত্রণ দেয়, তাদের প্রতিটি ফাইলের প্রকারে জটিল কৌশল প্রয়োগ করতে দেয়। যদিও এই সমস্তগুলি সেট আপ করা এবং বজায় রাখা জটিল এবং কঠিন বলে মনে হচ্ছে, ওয়ার্কবক্স তাদের এই ধরনের জটিল কৌশল ঘোষণা করার একটি সহজ উপায় প্রদান করে এবং রক্ষণাবেক্ষণের ব্যথা কমিয়ে দেয়।

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 ফন্ট ক্যাশ করার কৌশল দুটি ফাইল প্রকারের উপর নির্ভর করে:

  • স্টাইলশীট যেটিতে @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',
);

ক্যাশিং ইমেজ

ছবির জন্য, মেনলাইন মেন্সওয়্যার দুটি কৌশল নিয়ে যাওয়ার সিদ্ধান্ত নিয়েছে। প্রথম কৌশলটি তাদের CDN থেকে আসা সমস্ত চিত্রের ক্ষেত্রে প্রযোজ্য, যা সাধারণত পণ্যের ছবি। তাদের পৃষ্ঠাগুলি ইমেজ-ভারী তাই তারা তাদের ব্যবহারকারীদের ডিভাইসের সঞ্চয়স্থানের বেশি না নেওয়ার বিষয়ে সচেতন। তাই ওয়ার্কবক্সের মাধ্যমে, তারা একটি কৌশল যোগ করেছে যা শুধুমাত্র তাদের CDN থেকে আসা ছবিকে ক্যাশে করছে ExpirationPlugin ব্যবহার করে সর্বাধিক 60টি ছবি ।

অনুরোধ করা 61তম (নতুনতম) চিত্রটি 1ম (প্রাচীনতম) চিত্রটিকে প্রতিস্থাপন করে যাতে কোনো সময়ে 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' },
];

প্রিক্যাশ তালিকাটি তারপর ওয়ার্কবক্সে দেওয়া হয় যা ক্যাশে ইউআরএল যোগ করার সমস্ত ভারী উত্তোলনের যত্ন নেয়, কোনো সংশোধনের অমিল চেক করা, আপডেট করা, এবং CacheFirst কৌশল সহ প্রিক্যাচ করা ফাইলগুলি পরিবেশন করা।

workbox.precaching.precacheAndRoute(PRECACHE);

অফলাইন নেভিগেশন পরিচালনা করা

একবার পরিষেবা কর্মী সক্রিয় হয়ে গেলে এবং অফলাইন পৃষ্ঠাটি প্রিক্যাচ করা হলে, এটি ব্যবহারকারীর অফলাইন নেভিগেশন অনুরোধের প্রতিক্রিয়া জানাতে ব্যবহৃত হয়। মেনলাইন মেনওয়্যারের ওয়েব অ্যাপটি একটি এসপিএ হলেও, পৃষ্ঠাটি পুনরায় লোড হওয়ার পরে, ব্যবহারকারী ব্রাউজার ট্যাবটি বন্ধ করে আবার খুললে বা অফলাইনে থাকা অবস্থায় ওয়েব অ্যাপটি হোম স্ক্রীন থেকে চালু হলেই অফলাইন পৃষ্ঠাটি দেখায়৷

এটি অর্জনের জন্য, মেইনলাইন মেনসওয়্যার প্রিক্যাচড অফলাইন পৃষ্ঠার সাথে ব্যর্থ 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" সহ), ওয়েব অ্যাপটি window appinstalled ইভেন্ট শুনে সফল অ্যাপ ইনস্টলের রিপোর্টও করে: 

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

আপনার ওয়েবসাইটে PWA ক্ষমতা যুক্ত করা আপনার গ্রাহকদের আপনার সাথে কেনাকাটা করার অভিজ্ঞতাকে আরও বাড়িয়ে তুলবে এবং একটি [প্ল্যাটফর্ম-নির্দিষ্ট] অ্যাপের চেয়ে দ্রুত বাজার করা হবে।

অ্যান্ডি হোয়েল, হেড অফ ডেভেলপমেন্ট

উপসংহার

প্রগতিশীল ওয়েব অ্যাপস সম্পর্কে আরও জানতে এবং কীভাবে সেগুলি তৈরি করতে হয়, web.dev-এর প্রগ্রেসিভ ওয়েব অ্যাপস বিভাগে যান।

আরও প্রগতিশীল ওয়েব অ্যাপস কেস স্টাডি পড়তে, কেস স্টাডি বিভাগে ব্রাউজ করুন।