Mainline adalah retailer pakaian online yang menawarkan nama merek desainer terbesar dalam mode. Perusahaan yang berbasis di Inggris Raya mempercayakan tim pakar internalnya, yang dipadukan secara strategis dengan partner utama, untuk memberikan pengalaman belanja yang lancar bagi semua orang. Dengan kehadiran pasar di lebih dari 100 negara melalui tujuh situs teritorial dan aplikasi yang dibuat khusus, Mainline akan terus memastikan penawaran e-commerce-nya dapat menyaingi pesaing.
Tantangan
Sasaran Mainline Menswear adalah melengkapi situs yang dioptimalkan untuk seluler saat ini dengan fitur progresif yang akan mematuhi visi 'mobile-first' mereka, dengan berfokus pada desain dan fungsi yang mudah digunakan di perangkat seluler dengan mempertimbangkan pasar smartphone yang terus berkembang.
Solusi
Tujuannya adalah untuk membuat dan meluncurkan PWA yang melengkapi versi mobile-friendly asli dari situs Mainline Menswear, lalu membandingkan statistiknya dengan aplikasi seluler hybrid yang saat ini tersedia di Android dan iOS.
Setelah aplikasi diluncurkan dan digunakan oleh sebagian kecil pengguna Mainline Menswear, mereka dapat menentukan perbedaan statistik utama antara PWA, aplikasi, dan Web.
Pendekatan yang diambil Mainline saat mengonversi situs mereka menjadi PWA adalah untuk memastikan bahwa framework yang mereka pilih untuk situs mereka (Nuxt.js, yang menggunakan Vue.js) akan siap menghadapi masa depan dan memungkinkan mereka memanfaatkan teknologi web yang bergerak cepat.
Hasil
139%
Lebih banyak halaman per sesi di PWA dibandingkan web.
161%
Durasi sesi yang lebih lama di PWA vs. web.
10%
Rasio pantulan lebih rendah di PWA vs. web
12,5%
Nilai pesanan rata-rata yang lebih tinggi di PWA vs. web
55%
Rasio konversi yang lebih tinggi di PWA vs. web.
243%
Pendapatan per sesi yang lebih tinggi di PWA dibandingkan web.
Pembahasan mendalam teknis
Pakaian Pria Utama menggunakan framework Nuxt.js untuk memaketkan dan merender situs mereka, yang merupakan aplikasi halaman tunggal (SPA).
Membuat file pekerja layanan
Untuk membuat pekerja layanan, Mainline Menswear menambahkan konfigurasi melalui implementasi
kustom modul Workbox nuxt/pwa.
Alasan mereka mengambil modul nuxt/pwa adalah agar tim dapat menambahkan lebih banyak penyesuaian ke file pekerja layanan yang tidak dapat atau mengalami masalah saat mereka menggunakan versi standar.
Salah satu pengoptimalan tersebut adalah seputar fungsi offline
situs, seperti, misalnya, menayangkan halaman offline default dan mengumpulkan analisis saat offline.
Anatomi manifes aplikasi web
Tim membuat manifes dengan ikon untuk berbagai ukuran ikon aplikasi seluler dan detail aplikasi web
lainnya seperti name, description, dan 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"
}
Setelah diinstal, aplikasi web dapat diluncurkan dari layar utama tanpa browser yang mengganggu. Hal ini dapat dilakukan dengan menambahkan parameter display di file manifes aplikasi web:
{
"display": "standalone"
}
Terakhir, perusahaan kini dapat dengan mudah melacak jumlah pengguna yang mengunjungi
aplikasi web mereka dari layar utama dengan menambahkan parameter utm_source di kolom start_url
manifes:
{
"start_url": "/?utm_source=pwa"
}
Cache runtime untuk navigasi yang lebih cepat
Penyimpanan dalam cache untuk aplikasi web adalah hal yang wajib dilakukan untuk pengoptimalan kecepatan halaman dan untuk memberikan pengalaman pengguna yang lebih baik bagi pengguna yang kembali.
Untuk penyimpanan dalam cache di web, ada beberapa pendekatan yang berbeda. Tim menggunakan gabungan cache HTTP dan Cache API untuk menyimpan aset dalam cache di sisi klien.
Cache API memberi Mainline Menswear kontrol yang lebih baik atas aset yang di-cache, sehingga mereka dapat menerapkan strategi yang kompleks ke setiap jenis file. Meskipun semua ini terdengar rumit dan sulit disiapkan serta dikelola, Workbox memberi mereka cara mudah untuk mendeklarasikan strategi yang kompleks tersebut dan meringankan beban pemeliharaan.
Menyimpan CSS dan JS dalam cache
Untuk file CSS dan JS, tim memilih untuk menyimpan file tersebut dalam cache dan menayangkannya melalui cache menggunakan strategi Workbox StaleWhileRevalidate. Strategi ini memungkinkan mereka menayangkan semua file CSS dan JS Nuxt dengan cepat, yang meningkatkan performa situs secara signifikan.
Pada saat yang sama, file sedang diupdate di latar belakang ke versi terbaru untuk kunjungan berikutnya:
/* sw.js */
workbox.routing.registerRoute(
/\/_nuxt\/.*(?:js|css)$/,
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'css_js',
}),
'GET',
);
Menyimpan font Google ke cache
Strategi untuk meng-cache Google Fonts bergantung pada dua jenis file:
- Stylesheet yang berisi deklarasi
@font-face. - File font yang mendasarinya (diminta dalam stylesheet yang disebutkan di atas).
// 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',
);
Menyimpan gambar ke dalam cache
Untuk gambar, Mainline Menswear memutuskan untuk menggunakan dua strategi. Strategi pertama berlaku
untuk semua gambar yang berasal dari CDN mereka, yang biasanya berupa gambar produk. Halamannya banyak berisi gambar sehingga
mereka sadar untuk tidak menggunakan terlalu banyak penyimpanan perangkat pengguna. Jadi, melalui Workbox, mereka
menambahkan strategi yang menyimpan gambar dalam cache yang hanya berasal dari CDN mereka dengan maksimum
60 gambar menggunakan
ExpirationPlugin.
Gambar ke-61 (terbaru) yang diminta, menggantikan gambar pertama (terlama) sehingga tidak lebih dari 60 gambar produk di-cache kapan saja.
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,
}),
],
}),
);
Strategi gambar kedua menangani sisa gambar yang diminta oleh origin. Gambar ini cenderung sangat sedikit dan kecil di seluruh origin, tetapi untuk berjaga-jaga, jumlah gambar yang di-cache ini juga dibatasi hingga 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,
}),
],
}),
);
Menyediakan fungsi offline
Halaman offline dipra-cache tepat setelah pekerja layanan diinstal dan diaktifkan. Mereka melakukannya dengan membuat daftar semua dependensi offline: file HTML offline dan ikon SVG offline.
const OFFLINE_HTML = '/offline/offline.html';
const PRECACHE = [
{ url: OFFLINE_HTML, revision: '70f044fda3e9647a98f084763ae2c32a' },
{ url: '/offline/offline.svg', revision: 'efe016c546d7ba9f20aefc0afa9fc74a' },
];
Daftar pra-cache kemudian dimasukkan ke Workbox yang menangani semua pekerjaan berat untuk menambahkan
URL ke cache, memeriksa ketidakcocokan revisi, mengupdate, dan menayangkan
file yang dipra-cache dengan strategi CacheFirst.
workbox.precaching.precacheAndRoute(PRECACHE);
Menangani navigasi offline
Setelah diaktifkan dan halaman offline dipra-cache, service worker kemudian digunakan untuk merespons permintaan navigasi offline oleh pengguna. Meskipun aplikasi web Mainline Menswear adalah SPA, halaman offline hanya ditampilkan setelah halaman dimuat ulang, pengguna menutup dan membuka kembali tab browser, atau saat aplikasi web diluncurkan dari layar utama saat offline.
Untuk mencapai hal ini, Mainline Menswear menyediakan penggantian untuk permintaan
NavigationRoute
yang gagal dengan halaman offline yang di-cache sebelumnya:
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
Melaporkan penginstalan yang berhasil
Selain pelacakan peluncuran layar utama (dengan "start_url": "/?utm_source=pwa" dalam manifes
aplikasi web), aplikasi web juga melaporkan penginstalan aplikasi yang berhasil dengan memproses
peristiwa appinstalled di window:
window.addEventListener('appinstalled', (evt) => {
ga('send', 'event', 'Install', 'Success');
});
Menambahkan kemampuan PWA ke situs Anda akan lebih meningkatkan pengalaman belanja pelanggan dengan Anda, dan akan lebih cepat dipasarkan daripada aplikasi [khusus platform].
Andy Hoyle, Head of Development
Kesimpulan
Untuk mempelajari lebih lanjut progressive web app dan cara membuatnya, buka bagian Progressive Web App di web.dev.
Untuk membaca studi kasus Progressive Web App lainnya, buka bagian studi kasus.