Mainline adalah retailer pakaian online yang menawarkan nama merek desainer terbesar dalam mode. Perusahaan yang berbasis di Inggris Raya ini 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 pertumbuhan pasar smartphone.
Solusi
Tujuannya adalah mem-build dan meluncurkan PWA yang melengkapi versi asli situs Mainline Menswear yang cocok untuk perangkat seluler, lalu membandingkan statistiknya dengan aplikasi seluler hibrida mereka, 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 situsnya menjadi PWA adalah untuk memastikan bahwa framework yang mereka pilih untuk situs mereka (Nuxt.js, yang menggunakan Vue.js) akan siap untuk masa mendatang dan memungkinkan mereka memanfaatkan teknologi web yang berkembang pesat.
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 lebih tinggi di PWA dibandingkan web.
243%
Pendapatan per sesi yang lebih tinggi di PWA dibandingkan web.
Pembahasan mendalam teknis
Mainline Menswear menggunakan framework Nuxt.js untuk memaketkan dan merender situs mereka, yang merupakan aplikasi satu halaman (SPA).
Membuat file pekerja layanan
Untuk membuat pekerja layanan, Mainline Menswear menambahkan konfigurasi melalui implementasi
kustom modul Workbox nuxt/pwa
.
Alasan mereka melakukan fork modul nuxt/pwa
adalah untuk memungkinkan tim menambahkan lebih banyak penyesuaian ke
file pekerja layanan yang tidak dapat mereka lakukan atau mengalami masalah saat 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 cukup banyak pendekatan yang berbeda. Tim ini menggunakan campuran cache HTTP dan Cache API untuk meng-cache aset 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 yang 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 meng-cache dan menayangkannya melalui cache menggunakan strategi Workbox
StaleWhileRevalidate
. Strategi ini memungkinkan mereka menayangkan semua file CSS dan JS Nuxt dengan cepat,
yang secara signifikan meningkatkan performa situs mereka.
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 dalam 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 cache gambar yang hanya berasal dari CDN mereka dengan maksimum
60 gambar menggunakan
ExpirationPlugin
.
Gambar ke-61 (terbaru) yang diminta, akan menggantikan gambar ke-1 (terlama) sehingga tidak lebih dari 60 gambar produk akan di-cache pada waktu tertentu.
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. Hal ini dilakukan 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 tugas 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 progressive web app lebih lanjut dan cara membuatnya, buka bagian Progressive Web Apps di web.dev.
Untuk membaca studi kasus Progressive Web App lainnya, buka bagian studi kasus.