Mainline, moda alanında en büyük tasarımcı markalarını sunan bir online giyim perakendecisidir. Birleşik Krallık merkezli şirket, herkese sorunsuz bir alışveriş deneyimi sunmak için şirket içi uzmanlardan oluşan ekibine güveniyor ve önemli iş ortaklarıyla stratejik olarak harmanlanıyor. Mainline, özel olarak oluşturulmuş yedi bölgesel web sitesi ve bir uygulama aracılığıyla 100'den fazla ülkede pazar varlığıyla, e-ticaret tekliflerinin rakipleri arasında olduğundan emin olmaya devam edecek.
Zorluk
Mainline Menswear'in hedefi, mobil cihazlar için optimize edilmiş mevcut web sitesini, giderek büyüyen akıllı telefon pazarı göz önünde bulundurularak mobil uyumlu tasarıma ve işlevselliğe odaklanarak, "mobil cihazlara öncelik veren" vizyonlarına bağlı olacak ilerlemeli ö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 daha sonra istatistikleri şu anda Android ve iOS'te kullanılabilen hibrit mobil uygulamalarıyla karşılaştırmaktı.
Uygulama kullanıma sunulduğunda ve Mainline Menswear kullanıcılarının küçük bir bölümü tarafından kullanıldığında, PWA, uygulama ve web arasındaki temel istatistikler arasındaki farkı belirleyebildiler.
Web sitesini PWA'ya dönüştürürken Mainline'ın benimsediği yaklaşım, web sitesi için seçtikleri çerçevenin (Vue.js'yi kullanan Nuxt.js) geleceğe hazır olmasını ve hızlı değişen web teknolojisinden yararlanmalarını sağlamaktı.
Sonuçlar
%139
Web'e kıyasla PWA'da oturum başına daha fazla sayfa görüntülenir.
%161
PWA'da web'e kıyasla daha uzun oturum süreleri.
%10
Web'e kıyasla PWA'daki hemen çıkma oranındaki düşüş
%12,5
Web'e kıyasla PWA'da daha yüksek ortalama sipariş değeri
%55
Web'e kıyasla PWA'da daha yüksek dönüşüm oranı.
%243
Web'e kıyasla PWA'da oturum başına daha yüksek 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.
Service Worker dosyası oluşturuluyor
Mainline Menswear, hizmet çalışanı oluşturmak için nuxt/pwa Workbox modülünün özel bir uygulaması aracılığıyla yapılandırma ekledi.
nuxt/pwa modülünü çatallamalarının nedeni, ekibin standart sürümü kullanırken yapamadığı veya sorun yaşadığı Service Worker dosyasına daha fazla özelleştirme eklemesine olanak tanımaktı.
Bu optimizasyonlardan biri, sitenin çevrimdışı işlevselliği çerçevesindeydi (örneğin, varsayılan bir çevrimdışı sayfa sunma ve çevrimdışıyken analiz toplama).
Web uygulaması manifestinin anatomisi
Ekip, farklı mobil uygulama simge 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"
}
Web uygulaması yüklendikten sonra, tarayıcı müdahale etmeden ana ekrandan başlatılabilir. Bu işlem, web uygulaması manifest dosyasına display parametresi eklenerek gerçekleştirilir:
{
"display": "standalone"
}
Son olarak, şirket artık kaç kullanıcının web uygulamasını ana ekrandan ziyaret ettiğini kolayca izlemek için manifest dosyasının start_url alanına utm_source parametresini ekliyor:
{
"start_url": "/?utm_source=pwa"
}
Daha hızlı gezinme için çalışma zamanını önbelleğe alma
Web uygulamalarının önbelleğe alınması, sayfa hızı optimizasyonu ve geri gelen kullanıcılara daha iyi bir kullanıcı deneyimi sağlamak için bir zorunluluktur.
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 ile Cache API'nin bir karışımını kullanır.
Cache API, Mainline Menswear'a önbelleğe alınan öğeler üzerinde daha hassas bir kontrol sağlayarak her dosya türüne karmaşık stratejiler uygulamasına olanak tanır. Tüm bunlar kulağa karmaşık ve bakımı ve bakımı zor gelebilir ancak Workbox, bu tür karmaşık stratejileri kolayca bildirmelerine olanak tanır ve bakım zorluğunu azaltır.
CSS ve JS'yi önbelleğe alma
Ekip, CSS ve JS dosyaları için bunları önbelleğe almayı ve StaleWhileRevalidate Çalışma Kutusu stratejisini kullanarak önbellekte sunmayı seçti. Bu strateji, tüm Nuxt CSS ve JS dosyalarını hızlı bir şekilde sunmalarını sağlayarak sitelerinin performansını önemli ölçüde artırır.
Aynı zamanda dosyalar da bir sonraki ziyaret için arka planda en son sürüme güncelleniyor:
/* sw.js */
workbox.routing.registerRoute(
/\/_nuxt\/.*(?:js|css)$/,
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'css_js',
}),
'GET',
);
Google yazı tipleri önbelleğe alınıyor
Google Fonts'u önbelleğe alma stratejisi iki dosya türüne bağlıdır:
@font-facebildirimlerini 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',
);
Görüntüleri önbelleğe alma
Mainline Menswear, resimler konusunda iki stratejiyle devam etmeye karar verdi. İlk strateji genellikle ürün resimleri olan CDN'den gelen tüm resimler için geçerlidir. Sayfalarında çok fazla resim olduğundan, kullanıcılarının
cihaz depolama alanını çok fazla kullanmadıklarını bilmektedirler. Bu nedenle Workbox'ı kullanarak ExpirationPlugin aracılığıyla en fazla 60 resim ile yalnızca CDN'lerinden gelen resimleri önbelleğe alma stratejisinden yararlandılar.
İstenen 61. (en yeni) resim, 1. (en eski) resmin yerini alır. Böylece, herhangi bir zamanda 60'tan fazla ürün resmi önbelleğe alınmaz.
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, kaynağın tamamında çok az ve küçük olma eğilimindedir. Ancak, güvenliği sağlama amacıyla, önbelleğe alınan bu resimlerin sayısı da 60 ile sınırlandırılmıştı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şlevsellik sağlama
Hizmet çalışanı yüklenip etkinleştirildikten hemen sonra çevrimdışı sayfa ö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 ön önbellek listesi, URL'leri önbelleğe ekleme, düzeltme uyuşmazlığı olup olmadığını kontrol etme, önceden önbelleğe alınan dosyaları güncelleme ve dosyaları bir CacheFirst stratejisiyle sunma gibi işlerin tümünü halleden Workbox'a aktarılır.
workbox.precaching.precacheAndRoute(PRECACHE);
Çevrimdışı gezinmeleri işleme
Service Worker etkinleştikten ve çevrimdışı sayfa önbelleğe alındıktan sonra kullanıcının ç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üklendiğinde, kullanıcı tarayıcı sekmesini kapatıp yeniden açtığında veya web uygulaması internete bağlı değilken ana ekrandan başlatıldığında gösteriliyor.
Bunu başarmak için Mainline Menswear, önceden önbelleğe alınmış çevrimdışı sayfayla başarısız NavigationRoute isteklerine 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 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 raporlar:
window.addEventListener('appinstalled', (evt) => {
ga('send', 'event', 'Install', 'Success');
});
Web sitenize PWA özellikleri eklemek, müşterilerinizin sizinle alışveriş yapma deneyimini daha da iyileştirir ve [platforma özel] bir uygulamaya kıyasla pazara daha hızlı sunulur.
Andy Hoyle, Geliştirme Başkanı
Sonuç
Progresif web uygulamaları ve bunların nasıl geliştirileceği hakkında daha fazla bilgi edinmek için web.dev'de Progresif Web Uygulamaları bölümüne gidin.
Progresif Web Uygulamaları ile ilgili diğer örnek olayları okumak için örnek olaylar bölümüne göz atın.