Mainline Menswear, PWA'yı uygulayarak dönüşüm oranında% 55 artış elde etti

Harry Theodoulou

Natasha Kosoglov

Thomas Steiner

Mainline, moda dünyasının en büyük tasarımcı markalarını sunan online bir giyim perakendecisidir. Birleşik Krallık merkezli şirket, herkese sorunsuz bir alışveriş deneyimi sunmak için stratejik olarak önemli iş ortaklarıyla birlikte çalışan şirket içi uzman ekibine güveniyor. Özel olarak tasarlanmış yedi bölgesel web sitesi ve bir uygulama aracılığıyla 100'den fazla ülkede pazar payına sahip olan Mainline, e-ticaret teklifinin rakiplerine rakip olmasını sağlamaya devam edecek.

Zorluk

Mainline Menswear'in hedefi, mevcut mobil cihazlar için optimize edilmiş web sitesini, büyüyen akıllı telefon pazarını göz önünde bulundurarak mobil cihazlara uygun tasarıma ve işlevselliğe odaklanan, "mobil öncelikli" vizyonlarına uygun ilerici özelliklerle tamamlamaktı.

Çözüm

Amaç, Mainline Menswear web sitesinin orijinal mobil uyumlu sürümünü tamamlayan bir PWA oluşturup kullanıma sunmak ve ardından istatistikleri şu anda Android ve iOS'te bulunan karma mobil uygulamalarıyla karşılaştırmaktı.

Uygulama kullanıma sunuldu ve Mainline Menswear kullanıcılarının küçük bir bölümü tarafından kullanılmaya başladıktan sonra PWA, uygulama ve web arasındaki temel istatistiklerdeki farkı belirleyebildiler.

Mainline, web sitesini PWA'ya dönüştürürken web sitesi için seçtikleri çerçevenin (Vue.js'i kullanan Nuxt.js) geleceğe hazır olduğundan ve hızlı hareket eden web teknolojisinden yararlanmalarına olanak tanıdığından emin olmak istedi.

Sonuçlar

Teknik ayrıntılı inceleme

Mainline Menswear, tek sayfalık bir uygulama (SPA) olan sitesini paketlemek ve oluşturmak için Nuxt.js çerçevesini kullanıyor.

Hizmet çalışanı dosyası oluşturma

Mainline Menswear, hizmet çalışanını oluşturmak için nuxt/pwa Workbox modülünün özel bir uygulamasıyla yapılandırma ekledi.

nuxt/pwa modülünü çatallamalarının nedeni, ekibin hizmet çalışanı dosyasına standart sürümü kullanırken yapamadığı veya sorun yaşadığı daha fazla özelleştirme eklemesine olanak tanımaktı. Bu optimizasyonlardan biri, sitenin çevrimdışı işleviyle ilgiliydi. Örneğin, varsayılan bir çevrimdışı sayfa yayınlama ve çevrimdışıyken analiz toplama gibi.

Web uygulaması manifest'inin anatomisi

Ekip, farklı mobil uygulama simgesi boyutları ve name, description ve theme_color gibi diğer web uygulaması ayrıntıları için simgeler içeren bir manifest oluşturdu:

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

Yüklenen web uygulaması, tarayıcıdan etkilenmeden ana ekrandan başlatılabilir. Bu işlem, web uygulaması manifest dosyasına display parametresi eklenerek yapılır:

{
  "display": "standalone"
}

Son olarak, şirket artık manifest dosyasının start_url alanına bir utm_source parametresi ekleyerek web uygulamasını ana ekrandan kaç kullanıcının ziyaret ettiğini kolayca izleyebilir:

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

Daha hızlı gezinmeler için çalışma zamanında önbelleğe alma

Web uygulamaları için önbelleğe alma, sayfa hızı optimizasyonu ve geri gelen kullanıcılara daha iyi bir kullanıcı deneyimi sunmak için gereklidir.

Web'de önbelleğe alma için birçok farklı yaklaşım vardır. Ekip, istemci tarafında öğeleri önbelleğe almak için HTTP önbelleği ve Cache API'yi birlikte kullanıyor.

Önbelleğe Alma API'si, Mainline Menswear'a önbelleğe alınan öğeler üzerinde daha ayrıntılı kontrol sağlar ve her dosya türüne karmaşık stratejiler uygulamalarını sağlar. Tüm bunlar kulağa karmaşık ve kurulumu ve bakımı zor gibi gelse de Workbox, bu tür karmaşık stratejileri tanımlamanın kolay bir yolunu sunar ve bakımın zorluğunu azaltır.

CSS ve JS'yi önbelleğe alma

Ekip, CSS ve JS dosyalarını önbelleğe almayı ve StaleWhileRevalidate Workbox stratejisini kullanarak önbellekten yayınlamayı tercih etti. Bu strateji, tüm Nuxt CSS ve JS dosyalarını hızlı bir şekilde yayınlamalarına olanak tanır. Bu da sitelerinin performansını önemli ölçüde artırır. Aynı zamanda, dosyalar arka planda bir sonraki ziyaret için en son sürüme güncellenir:

/* sw.js */
workbox.routing.registerRoute(
  /\/_nuxt\/.*(?:js|css)$/,
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'css_js',
  }),
  'GET',
);

Google yazı tiplerini önbelleğe alma

Google Fonts'u önbelleğe alma stratejisi iki dosya türüne bağlıdır:

• @font-face beyanlarını içeren stil sayfası.
• Temel yazı tipi dosyaları (yukarıda belirtilen stil sayfasında istenir).

// 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',
);

Resimleri önbelleğe alma

Mainline Menswear, resimler için iki strateji kullanmaya karar verdi. İlk strateji, CDN'lerinden gelen tüm resimler (genellikle ürün resimleri) için geçerlidir. Sayfalarında çok fazla resim bulunduğundan kullanıcılarının cihaz depolama alanını çok fazla kullanmamaya dikkat ediyorlar. Bu nedenle Workbox aracılığıyla, ExpirationPlugin kullanarak yalnızca CDN'lerinden gelen resimleri maksimum 60 resim ile önbelleğe alan bir strateji eklediler.

İstenen 61. (en yeni) resim, 1. (en eski) resmin yerini alır. Böylece herhangi bir zamanda en fazla 60 ürün resmi önbelleğe alınır.

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,
      }),
    ],
  }),
);

İkinci resim stratejisi, kaynak tarafından istenen diğer resimleri işler. Bu resimler, kaynak genelinde çok az ve küçük olma eğilimindedir ancak güvenli tarafta olmak için bu önbelleğe alınmış resimlerin sayısı da 60 ile sınırlıdır.

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,
      }),
    ],
  }),
);

Çevrimdışı işlev sunma

Çevrimdışı sayfa, hizmet çalışanı yüklenip etkinleştirildikten hemen sonra önceden önbelleğe alınır. Bunu yapmak için tüm çevrimdışı bağımlılıkların listesini (çevrimdışı HTML dosyası ve çevrimdışı SVG simgesi) oluşturur.

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

Ardından önbelleğe alma listesi Workbox'a beslenir. Workbox, URL'leri önbelleğe ekleme, düzeltme uyuşmazlığı olup olmadığını kontrol etme, güncelleme ve önbelleğe alınmış dosyaları CacheFirst stratejisiyle yayınlama gibi tüm ağır işleri üstlenir.

workbox.precaching.precacheAndRoute(PRECACHE);

Çevrimdışı gezinmeleri işleme

Hizmet çalışanı etkinleştirildikten ve çevrimdışı sayfa önceden önbelleğe alındıktan sonra, kullanıcı tarafından yapılan çevrimdışı gezinme isteklerine yanıt vermek için kullanılır. Mainline Menswear'in web uygulaması bir SPA olsa da çevrimdışı sayfa yalnızca sayfa yeniden yüklendikten, kullanıcı tarayıcı sekmesini kapatıp yeniden açtıktan veya web uygulaması çevrimdışıyken ana ekrandan başlatıldığında gösterilir.

Mainline Menswear, bu amaca ulaşmak için önceden önbelleğe alınmış çevrimdışı sayfayla başarısız NavigationRoute isteklerine yedek bir çözüm sundu:

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

Demo

Başarılı yüklemeleri raporlama

Web uygulaması, ana ekranda başlatma izlemenin yanı sıra (web uygulaması manifest dosyasında "start_url": "/?utm_source=pwa" ile) window üzerinde appinstalled etkinliğini dinleyerek başarılı uygulama yüklemelerini de raporlar:

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

Web sitenize PWA özellikleri eklemek, müşterilerinizin sizden alışveriş yapma deneyimini daha da iyileştirir ve [platforma özel] bir uygulamaya kıyasla daha hızlı pazara sunulur.

Andy Hoyle, Geliştirme Yöneticisi

Sonuç

Progresif web uygulamaları ve bunların nasıl oluşturulacağı hakkında daha fazla bilgi edinmek için web.dev'deki Progresif Web Uygulamaları bölümüne gidin.

Daha fazla Progresif Web Uygulaması örnek olayını okumak için örnek olay bölümüne göz atın.