Mainline Menswear menerapkan PWA dan mengalami peningkatan rasio konversi sebesar 55%

Harry Theodoulou

Natasha Kosoglov

Thomas Steiner

Mainline adalah pengecer pakaian {i>online<i} yang menawarkan nama merek desainer terbesar dalam dunia fesyen. Perusahaan yang berbasis di Inggris ini mempercayakan tim pakar internalnya, yang berbaur 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 dan aplikasi wilayah yang dibuat khusus, Mainline akan terus memastikan bahwa penawaran e-commerce menyaingi pesaing.

Tantangan

Sasaran Pakaian Pria Utama adalah untuk melengkapi situs web yang dioptimalkan untuk seluler saat ini dengan fitur progresif yang akan mematuhi visi 'utama seluler' mereka, yang berfokus pada desain dan fungsi yang mobile-friendly dengan mempertimbangkan pasar smartphone yang berkembang.

Solusi

Tujuannya adalah untuk membuat dan meluncurkan PWA yang melengkapi versi asli situs mobile-friendly dari situs Mainline Menswear, lalu membandingkan statistiknya dengan aplikasi seluler hybrid mereka, yang saat ini tersedia di Android dan iOS.

Setelah aplikasi diluncurkan dan digunakan oleh sebagian kecil pengguna Pakaian Pria Mainline, mereka dapat menentukan perbedaan statistik utama antara PWA, aplikasi, dan Web.

Pendekatan yang dilakukan Mainline saat mengonversi situs mereka menjadi PWA adalah untuk memastikan bahwa framework yang mereka pilih untuk situs mereka (Nuxt.js, memanfaatkan Vue.js) akan siap menghadapi masa depan dan memungkinkan mereka memanfaatkan teknologi web yang bergerak cepat.

Hasil

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 menghasilkan pekerja layanan, Mainline Menswear menambahkan konfigurasi melalui implementasi kustom modul Workbox nuxt/pwa.

Alasan mereka membuat modul nuxt/pwa adalah untuk memungkinkan tim menambahkan lebih banyak penyesuaian ke file pekerja layanan yang tidak dapat atau bermasalah 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 mengganggu browser. Hal ini dapat dilakukan dengan menambahkan parameter display di file manifes aplikasi web:

{
  "display": "standalone"
}

Terakhir, kini perusahaan dapat dengan mudah melacak jumlah pengguna yang mengunjungi aplikasi web mereka dari layar utama hanya dengan menambahkan parameter utm_source di kolom start_url manifes:

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

Penyimpanan cache runtime untuk navigasi yang lebih cepat

Menyimpan ke cache untuk aplikasi web adalah keharusan untuk pengoptimalan kecepatan halaman dan untuk memberikan pengalaman pengguna yang lebih baik bagi pengguna yang kembali.

Untuk caching di web, ada beberapa pendekatan berbeda. Tim ini 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 dapat menerapkan strategi kompleks ke setiap jenis file. Meskipun semua ini terdengar rumit dan sulit disiapkan serta dipelihara, Workbox memberi mereka cara mudah untuk menyatakan strategi yang begitu rumit dan meringankan beban pemeliharaan.

Menyimpan CSS dan JS ke 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 meningkatkan performa situs secara signifikan. Pada saat yang sama, file diupdate di latar belakang ke versi terbaru pada 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 menyimpan Google Fonts dalam cache 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 merupakan gambar produk. Halaman mereka penuh dengan gambar sehingga mereka sadar tidak akan memakan terlalu banyak penyimpanan perangkat pengguna. Jadi, melalui Workbox, mereka menambahkan strategi yaitu menyimpan gambar ke dalam cache hanya dari CDN dengan maksimum 60 gambar menggunakan ExpirationPlugin.

Gambar ke-61 (terbaru) yang diminta akan menggantikan gambar pertama (terlama) sehingga tidak lebih dari 60 gambar produk yang disimpan dalam 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 gambar lainnya yang diminta oleh origin. Gambar ini cenderung sangat sedikit dan kecil di seluruh situs asalnya, tetapi untuk sisi yang aman, 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 akan di-precache 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 dalam Workbox yang menangani semua pekerjaan berat saat menambahkan URL ke cache, memeriksa ketidakcocokan revisi, memperbarui, dan menyalurkan file yang di-precache dengan strategi CacheFirst.

workbox.precaching.precacheAndRoute(PRECACHE);

Menangani navigasi offline

Setelah pekerja layanan diaktifkan dan halaman offline di-precache, pekerja layanan tersebut akan 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 memberikan penggantian ke permintaan NavigationRoute yang gagal dengan halaman offline yang di-pracache:

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" di manifes aplikasi web), aplikasi web juga melaporkan penginstalan aplikasi yang berhasil dengan memproses peristiwa appinstalled pada window:

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

Menambahkan kemampuan PWA ke situs Anda akan lebih meningkatkan pengalaman pelanggan untuk berbelanja dengan Anda, dan akan lebih cepat dipasarkan daripada aplikasi [khusus platform].

Andy Hoyle, Head of Development

Kesimpulan

Untuk mempelajari lebih lanjut tentang progressive web app dan cara membangunnya, buka bagian Progressive Web App di web.dev.

Untuk membaca studi kasus Progressive Web App lainnya, lihat bagian studi kasus.