Mainline, moda alanında en büyük tasarımcı markalarını sunan, çevrimiçi bir giyim perakendecisidir. Birleşik Krallık merkezli şirket, önemli iş ortaklarıyla stratejik bir şekilde harmanlanmış şirket içi uzmanlardan oluşan ekibine güvenerek herkes için sorunsuz bir alışveriş deneyimi sunar. Özel olarak oluşturulmuş yedi bölgesel web sitesi ve bir uygulama aracılığıyla 100'den fazla ülkede pazarda faaliyet gösteren Mainline, e-ticaret tekliflerinin rakiplerine rakip olmasını sağlamaya devam edecek.
Zorluk
Mainline Menswear'ın hedefi, mobil cihazlar için optimize edilmiş mevcut web sitesini, büyüyen akıllı telefon pazarını göz önünde bulundurarak mobil uyumlu tasarım ve işlevselliğe odaklanarak "mobil öncelikli" vizyonuna uygun progresif ö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 benimsediği yaklaşım, web siteleri için seçtikleri çerçevenin (Vue.js kullanan Nuxt.js) geleceğe hazır olmasını ve hızlı hareket eden web teknolojisinden yararlanmalarını sağlamaktı.
Sonuçlar
%139
PWA'da web'e kıyasla oturum başına daha fazla sayfa.
%161
PWA'da web'e kıyasla daha uzun oturum süreleri
%10
PWA'da web'e kıyasla daha düşük hemen çıkma oranı
%12,5
PWA'da web'e kıyasla daha yüksek ortalama sipariş değeri
%55
PWA'da web'e kıyasla daha yüksek dönüşüm oranı.
%243
PWA'da web'e kıyasla daha yüksek oturum başına gelir.
Ayrıntılı teknik 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ını önbelleğe almak, sayfa hızı optimizasyonu ve geri gelen kullanıcılara daha iyi bir kullanıcı deneyimi sağlamak için olmazsa olmazdır.
Web'de önbelleğe alma için oldukça fazla 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.
Mainline Menswear, Cache API sayesinde önbelleğe alınan öğeler üzerinde daha ayrıntılı kontrol sahibi olarak her dosya türüne karmaşık stratejiler uygulayabiliyor. Tüm bunların kurulumu ve bakımı zor ve karmaşık görünse de Workbox, reklamverenlerin bu tür karmaşık stratejileri kolayca bildirmelerine olanak tanır ve bakım zahmetini 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 sunmalarına olanak tanıyarak 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-facebeyanları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'den (genellikle ürün resimleri) gelen tüm resimler 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'den gelen resimleri önbelleğe alma ve en fazla 60 resim içeren bir strateji ekledi.
İ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şlevler sağlama
Çevrimdışı sayfa, hizmet çalışanı yüklenip etkinleştirildikten hemen sonra önbelleğe alınır. Bunu, çevrimdışı HTML dosyası ve çevrimdışı SVG simgesi olmak üzere tüm çevrimdışı bağımlılıkların bir listesini oluşturarak yaparlar.
const OFFLINE_HTML = '/offline/offline.html';
const PRECACHE = [
{ url: OFFLINE_HTML, revision: '70f044fda3e9647a98f084763ae2c32a' },
{ url: '/offline/offline.svg', revision: 'efe016c546d7ba9f20aefc0afa9fc74a' },
];
Daha sonra önbellek listesi Workbox'a aktarılır. Bu sayede, URL'leri önbelleğe ekleme, düzeltme uyuşmazlığı olup olmadığını kontrol etme, önbelleğe alınmış dosyaların güncellenmesi ve CacheFirst stratejisiyle sunulması gibi zorlu işlerin üstesinden gelir.
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 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 çevrimdışıyken ana ekrandan web uygulaması başlatıldıktan sonra gösterilir.
Bunu başarmak için Mainline Menswear, başarısız NavigationRoute isteklerini önbelleğe alınmış çevrimdışı sayfayla bir yedek sağladı:
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 ekran başlatma izleme özelliğinin (web uygulaması manifest'inde "start_url": "/?utm_source=pwa" ile) yanı sıra window cihazındaki 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.