Fitur arsitektur umum aplikasi web satu halaman (SPA) adalah sekumpulan HTML, CSS, dan JavaScript minimal yang diperlukan untuk mendukung fungsi global aplikasi. Dalam praktiknya, hal ini cenderung menjadi header, navigasi, dan elemen antarmuka pengguna umum lainnya yang tetap ada di semua halaman. Ketika pekerja layanan melakukan precache HTML UI minimal dan aset dependen ini, kita menyebutnya shell aplikasi.
Shell aplikasi memainkan peran penting dalam kinerja yang dirasakan dari aplikasi web. Ini adalah hal pertama yang dimuat, dan oleh karena itu, ini juga hal pertama yang dilihat pengguna saat mereka menunggu konten mengisi antarmuka pengguna.
Sementara shell aplikasi cepat dimuat—asalkan jaringan tersedia dan setidaknya agak cepat—pekerja layanan yang melakukan precache shell aplikasi dan aset terkaitnya memberi model shell aplikasi manfaat tambahan ini:
- Performa yang andal dan konsisten pada kunjungan berulang. Pada kunjungan pertama ke aplikasi tanpa pekerja layanan terpasang, markup aplikasi dan aset terkait harus dimuat dari jaringan sebelum pekerja layanan dapat memasukkannya ke dalam cache. Namun, kunjungan berulang akan menarik shell aplikasi dari cache, yang berarti pemuatan dan rendering akan berlangsung dengan seketika.
- Akses andal ke fungsi dalam skenario offline. Terkadang akses internet putus-putus, atau bahkan tidak ada sama sekali, dan layar yang ditakuti "kami tidak dapat menemukan situs web itu" menoleh ke belakang. Model shell aplikasi menangani hal ini dengan merespons permintaan navigasi apa pun dengan markup shell aplikasi dari cache. Bahkan jika seseorang mengunjungi URL yang belum pernah ia kunjungi sebelumnya, shell aplikasi akan disalurkan dari cache, dan dapat diisi dengan konten yang bermanfaat.
Kapan model shell aplikasi harus digunakan
Shell aplikasi paling masuk akal bila Anda memiliki elemen antarmuka pengguna umum yang tidak berubah dari satu rute ke rute lain, tetapi kontennya berubah. Sebagian besar aplikasi SPA kemungkinan besar menggunakan model shell aplikasi yang sudah digunakan.
Jika ini menjelaskan project Anda, dan Anda ingin menambahkan pekerja layanan untuk meningkatkan keandalan dan performanya, shell aplikasi harus:
- Memuat dengan cepat.
- Gunakan aset statis dari instance
Cache
. - Menyertakan elemen antarmuka umum seperti header dan sidebar, yang terpisah dari konten halaman.
- Mengambil dan menampilkan konten khusus halaman.
- Jika sesuai, Anda dapat menambahkan konten dinamis ke dalam cache untuk ditampilkan secara offline.
Shell aplikasi memuat konten khusus halaman secara dinamis melalui API atau konten yang dipaketkan dalam JavaScript. Aplikasi juga harus melakukan pembaruan sendiri dalam arti bahwa jika markup shell aplikasi berubah, pembaruan pekerja layanan akan mengambil shell aplikasi baru dan meng-cache-nya secara otomatis.
Membangun shell aplikasi
Shell aplikasi harus berada secara terpisah dari konten, namun menyediakan basis bagi konten yang akan diisi di dalamnya. Idealnya, file harus seramping mungkin, tetapi sertakan konten yang cukup bermakna dalam download awal sehingga pengguna memahami bahwa pengalaman dimuat dengan cepat.
Keseimbangan yang tepat bergantung pada aplikasi Anda. Shell aplikasi untuk aplikasiTrained To Thrill milik Jake Archibald menyertakan header dengan tombol muat ulang untuk mengambil konten baru dari Flickr.
Markup shell aplikasi akan bervariasi dari satu project ke project lain, tetapi berikut ini salah satu contoh file index.html
yang menyediakan boilerplate aplikasi:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Application Shell Example
</title>
<link rel="manifest" href="/manifest.json">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="styles/global.css">
</head>
<body>
<header class="header">
<!-- Application header -->
<h1 class="header__title">Application Shell Example</h1>
</header>
<nav class="nav">
<!-- Navigation items -->
</nav>
<main id="app">
<!-- Where the application content populates -->
</main>
<div class="loader">
<!-- Spinner/content placeholders -->
</div>
<!-- Critical application shell logic -->
<script src="app.js"></script>
<!-- Service worker registration script -->
<script>
if ('serviceWorker' in navigator) {
// Register a service worker after the load event
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js');
});
}
</script>
</body>
</html>
Bagaimanapun cara Anda membuat shell aplikasi untuk project, aplikasi tersebut harus memiliki karakteristik berikut:
- HTML harus memiliki area yang terisolasi dengan jelas untuk elemen antarmuka pengguna individual. Dalam contoh di atas, ini mencakup header aplikasi, navigasi, area konten utama, dan ruang untuk "putaran" pemuatan yang hanya muncul saat konten dimuat.
- JavaScript dan CSS awal yang dimuat untuk shell aplikasi harus bersifat minimal, dan hanya terkait dengan fungsi shell aplikasi itu sendiri, bukan kontennya. Hal ini memastikan bahwa aplikasi merender shell-nya secepat mungkin, dan meminimalkan pekerjaan thread utama hingga konten muncul.
- Skrip inline yang mendaftarkan pekerja layanan.
Setelah shell aplikasi dibangun, Anda bisa membangun service worker untuk meng-cache keduanya dan asetnya.
Menyimpan cache shell aplikasi
Shell aplikasi dan aset yang diperlukan adalah tempat yang harus segera di-precache oleh pekerja layanan pada waktu penginstalan. Dengan asumsi shell aplikasi seperti contoh di atas, mari kita lihat cara melakukannya dalam contoh Workbox dasar menggunakan workbox-build
:
// build-sw.js
import {generateSW} from 'workbox-build';
// Where the generated service worker will be written to:
const swDest = './dist/sw.js';
generateSW({
swDest,
globDirectory: './dist',
globPatterns: [
// The necessary CSS and JS for the app shell
'**/*.js',
'**/*.css',
// The app shell itself
'shell.html'
],
// All navigations for URLs not precached will use this HTML
navigateFallback: 'shell.html'
}).then(({count, size}) => {
console.log(`Generated ${swDest}, which precaches ${count} assets totaling ${size} bytes.`);
});
Konfigurasi yang disimpan di build-sw.js
akan mengimpor CSS dan JavaScript aplikasi, termasuk file markup shell aplikasi yang terdapat dalam shell.html
. Skrip dieksekusi dengan Node seperti berikut:
node build-sw.js
Pekerja layanan yang dihasilkan ditulis ke ./dist/sw.js
, dan akan mencatat pesan berikut saat selesai:
Generated ./dist/sw.js, which precaches 5 assets totaling 44375 bytes.
Saat halaman dimuat, pekerja layanan akan melakukan precache markup shell aplikasi dan dependensinya:
![Screenshot panel jaringan di Chrome DevTools yang menampilkan daftar aset yang didownload dari jaringan. Aset yang di-cache oleh pekerja layanan dibedakan dari aset lainnya dengan roda gigi di sebelah kiri pada baris. Beberapa file JavaScript dan CSS telah di-precache oleh pekerja layanan pada waktu penginstalan.](https://developer.chrome.com/static/docs/workbox/app-shell-model/image/a-screenshot-the-network-96ad6896c678b.png?authuser=6&hl=id)
Precaching HTML, CSS, dan JavaScript shell aplikasi Anda dapat dilakukan di hampir semua alur kerja, termasuk project yang menggunakan pemaket. Saat melanjutkan melalui dokumentasi, Anda akan mempelajari cara menggunakan Workbox secara langsung untuk menyiapkan toolchain guna membangun pekerja layanan yang paling sesuai untuk project Anda, terlepas dari apakah itu SPA.
Kesimpulan
Menggabungkan model shell aplikasi dengan pekerja layanan sangat bagus untuk caching offline, terutama jika Anda menggabungkan fungsi precaching dengan strategi cache yang mengutamakan jaringan, dan melakukan fallback ke cache untuk respons markup atau API. Hasilnya adalah pengalaman yang sangat cepat dan dapat diandalkan, yang akan langsung merender shell aplikasi Anda pada kunjungan berulang, bahkan dalam kondisi offline.