Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

Model Shell Aplikasi

Arsitektur shell aplikasi (atau app shell) adalah satu cara untuk membangun Progressive Web App yang bisa diandalkan dan langsung dimuat pada layar pengguna, serupa dengan yang Anda lihat di aplikasi asli.

"Shell" aplikasi adalah HTML, CSS, dan JavaScript minimal yang diperlukan untuk menjalankan antarmuka pengguna dan bila di-cache offline bisa menjamin kinerja yang bagus, instan, dan bisa diandalkan pada pengguna saat kunjungan berulang. Ini berarti shell aplikasi tidak dimuat dari jaringan setiap kali pengguna berkunjung. Hanya materi yang dibutuhkan yang dimuat dari jaringan.

Untuk aplikasi laman-tunggal dengan arsitektur yang sarat JavaScript, shell aplikasi menjadi pendekatan yang dianjurkan. Pendekatan ini mengandalkan caching shell secara agresif (dengan menggunakan service worker) untuk menjalankan aplikasi. Berikutnya, konten dinamis dimuat untuk setiap laman menggunakan JavaScript. Shell aplikasi berguna untuk menempatkan sebagian HTML awal ke layar dengan cepat tanpa jaringan.

Arsitektur Shell Aplikasi

Sisihkan yang lain, shell aplikasi serupa dengan bundel kode yang Anda publikasikan ke toko aplikasi saat membangun aplikasi asli. Ini adalah kerangka UI Anda dan komponen inti yang diperlukan aplikasi Anda agar berhasil, namun kemungkinan tidak berisi data.

Kapan menggunakan model shell aplikasi

Membangun PWA bukan berarti memulai dari nol. Jika Anda sedang membangun aplikasi laman-tunggal yang modern, maka Anda barangkali menggunakan sesuatu yang serupa dengan shell aplikasi, baik Anda menyebutnya demikian ataupun tidak. Detailnya mungkin sedikit bervariasi yang bergantung pada pustaka atau kerangka kerja mana yang Anda gunakan, namun konsepnya sendiri tidak memedulikan kerangka kerja.

Arsitektur shell aplikasi paling layak untuk aplikasi dan situs dengan navigasi yang relatif tidak berubah namun materinya berubah. Sejumlah kerangka kerja dan pustaka JavaScript modern sudah mendorong pemisahan logika aplikasi dari materinya, sehingga membuat arsitektur ini lebih sederhana untuk diterapkan. Untuk kelas situs web tertentu yang hanya memiliki materi statis, Anda tetap bisa mengikuti model yang sama namun situs tersebut 100% shell aplikasi.

Untuk melihat cara Google membangun arsitektur shell aplikasi, perhatikan Membangun Google I/O 2016 Progressive Web App. Aplikasi sungguhan ini dimulai dengan SPA untuk membuat PWA yang melakukan precache materi dengan menggunakan service worker, memuat laman baru secara dinamis, melakukan transisi secara halus antar tampilan, dan menggunakan kembali materi setelah pemuatan pertama.

Manfaat

Manfaat arsitektur shell aplikasi dengan service worker antara lain:

  • Kinerja yang cepat secara konsisten dan bisa diandalkan. Kunjungan berulang menjadi sangat cepat sekali. Aset statis dan UI (mis. HTML, JavaScript, gambar dan CSS) disimpan ke cache pada kunjungan pertama sehingga akan dimuat seketika pada kunjungan berulang. Materi mungkin akan di-cache pada kunjungan pertama, namun umumnya akan dimuat bila dibutuhkan.

  • Interaksi seperti-asli. Dengan mengadopsi model shell aplikasi, Anda bisa membuat pengalaman dengan interaksi dan navigasi instan seperti-aplikasi-asli, lengkap dengan dukungan offline.

  • Penggunaan data yang ekonomis. Desain untuk penggunaan data minimal dan bijaksanalah dalam hal apa yang Anda cache karena pencantuman file yang tidak begitu penting (misalnya gambar besar yang tidak ditampilkan pada setiap laman) mengakibatkan browser mengunduh data lebih banyak daripada yang dibutuhkan. Walaupun data relatif murah di negara-negara barat, tidak demikian halnya di negara-negara yang sedang berkembang di mana konektivitas dan data adalah sesuatu yang mahal.

Persyaratan

Shell aplikasi idealnya:

  • Memuat dengan cepat
  • Menggunakan data sekecil mungkin
  • Menggunakan aset statis dari cache lokal
  • Memisahkan materi dari navigasi
  • Mengambil dan menampilkan materi laman tertentu (HTML, JSON, dll.)
  • Opsional, meng-cache konten dinamis

Shell aplikasi menjaga UI Anda tetap lokal dan menarik konten secara dinamis melalui API namun tidak mengorbankan kemampuan untuk dapat ditemukan dan ditautkan dari web. Saat berikutnya pengguna mengakses aplikasi Anda, versi terbaru ditampilkan secara otomatis. Tidak perlu mengunduh versi baru sebelum menggunakannya.

Membangun shell aplikasi Anda

Buat struktur aplikasi Anda agar ada tujuan jelas antara shell laman dan konten dinamis. Secara umum, aplikasi Anda harus memuat shell yang sesederhana mungkin namun menyertakan materi laman yang cukup berarti bersama unduhan pertama. Tentukan keseimbangan yang tepat antara kecepatan dan kebaruan data untuk setiap sumber data.

Aplikasi Wikipedia offline menggunakan shell aplikasi bersama caching materi
Aplikasi Wikipedia offline dari Jake Archibald adalah contoh bagus PWA yang menggunakan model shell aplikasi. Aplikasi ini secara instan dimuat pada kunjungan berulang, namun secara dinamis mengambil materi menggunakan JS. Materi ini kemudian di-cache secara offline untuk kunjungan yang akan datang.

Contoh HTML untuk shell aplikasi

Contoh ini memisahkan infrastruktur aplikasi inti dan UI dari data. Pemuatan pertama perlu sesederhana mungkin untuk menampilkan layout laman saja begitu aplikasi web dibuka. Sebagian yang dimuat berasal dari file indeks aplikasi Anda (inline DOM, gaya) dan selebihnya dimuat dari stylesheet dan skrip eksternal.

Semua UI dan infrastruktur di-cache secara lokal menggunakan service worker sehingga pada pemuatan selanjutnya, hanya data baru dan berubah yang diambil, daripada harus memuat semuanya.

File index.html di direktori kerja Anda seharusnya terlihat seperti kode berikut. Ini adalah subset materi sesungguhnya dan bukan file indeks lengkap. Mari kita lihat apa materinya.

  • HTML dan CSS untuk "kerangka" antarmuka pengguna Anda lengkap dengan placeholder materi dan navigasi.
  • File eksternal JavaScript (app.js) untuk menangani navigasi dan logika UI serta kode untuk menampilkan entri blog diambil dari server dan disimpan secara lokal menggunakan mekanisme storage seperti IndexedDB.
  • Manifes aplikasi web dan service worker loader untuk mengaktifkan kemampuan offline.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Shell Aplikasi</title>
  <link rel="manifest" href="/manifest.json">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shell Aplikasi</title>
  <link rel="stylesheet" type="text/css" href="styles/inline.css">
</head>

<body>
  <header class="header">
    <h1 class="header__title">Shell Aplikasi</h1>
  </header>

  <nav class="nav">
  ...
  </nav>

  <main class="main">
  ...
  </main>

  <div class="dialog-container">
  ...
  </div>

  <div class="loader">
    <!-- Show a spinner or placeholders for content -->
  </div>

  <script src="app.js" async></script>
  <script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }).catch(function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  }
  </script>
</body>
</html>

Meng-cache shell aplikasi

Shell aplikasi bisa di-cache menggunakan service worker yang ditulis secara manual atau yang dihasilkan oleh service worker menggunakan alat (bantu) precache aset statis seperti sw-precache.

Meng-cache shell aplikasi secara manual

Di bawah ini adalah contoh kode service worker yang meng-cache sumber daya statis dari shell aplikasi ke dalam Cache API menggunakan kejadian install service worker:

var cacheName = 'shell-content';
var filesToCache = [
  '/css/styles.css',
  '/js/scripts.js',
  '/images/logo.svg',

  '/offline.html’,

  '/’,
];

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    })
  );
});

Menggunakan sw-precache untuk meng-cache shell aplikasi

Service worker yang dihasilkan oleh sw-precache akan meng-cache dan menyajikan sumber daya yang Anda konfigurasi sebagai bagian dari proses pembangunan. Anda bisa menyuruhnya meng-cache lebih dahulu setiap file HTML, JavaScript, dan CSS yang membentuk shell aplikasi Anda. Segala sesuatunya akan bekerja offline, dan dimuat cepat pada kunjungan selanjutnya tanpa upaya tambahan.

Inilah sebuah contoh dasar penggunaan sw-precache sebagai bagian dari proses pembangunan gulp:

gulp.task('generate-service-worker', function(callback) {
  var path = require('path');
  var swPrecache = require('sw-precache');
  var rootDir = 'app';

  swPrecache.write(path.join(rootDir, 'service-worker.js'), {
    staticFileGlobs: [rootDir + '/**/*.{js,html,css,png,jpg,gif}'],
    stripPrefix: rootDir
  }, callback);
});

Untuk mengetahui selengkapnya tentang caching aset statis, lihat codelab Menambahkan Service Worker dengan sw-precache.

Kesimpulan

Shell aplikasi yang menggunakan Service worker adalah pola andal untuk caching offline juga menawarkan keunggulan kinerja yang signifikan dalam bentuk pemuatan instan untuk kunjungan berulang ke PWA Anda. Anda bisa meng-cache shell aplikasi supaya bekerja secara offline dan mengisi materinya menggunakan JavaScript.

Pada kunjungan berulang, hal ini memungkinkan Anda menampilkan piksel yang memadai ke layar tanpa perlu jaringan, sekalipun materi Anda pada akhirnya akan berasal dari jaringan.