Tek sayfalık web uygulamalarının (SPA) yaygın bir mimari özelliği, bir uygulamanın genel işlevselliğini desteklemek için gereken minimum HTML, CSS ve JavaScript kümesidir. Pratikte bu, başlık, gezinme ve tüm sayfalarda kalan diğer ortak kullanıcı arayüzü öğeleri olma eğilimindedir. Bir hizmet çalışanı, bu minimal kullanıcı arayüzünün HTML'sini ve bağımlı öğelerini önceden önbelleğe aldığında buna uygulama kabuğu denir.
Uygulama kabuğu, web uygulamasının algılanan performansında önemli bir rol oynar. Bu, yüklenen ilk şeydir; dolayısıyla, içeriğin kullanıcı arayüzüne doldurulmasını beklerken kullanıcılar ilk olarak bu içeriği görür.
Uygulama kabuğunun yüklenmesi hızlı olsa da (ağın kullanılabilir olması ve en azından bir şekilde hızlı olması koşuluyla) uygulama kabuğunu ve ilişkili öğelerini önbellek üzerinden önbelleğe alan bir hizmet çalışanı, uygulama kabuğu modeline şu ek avantajları sağlar:
- Tekrarlanan ziyaretlerde güvenilir ve tutarlı performans. Service Worker yüklü olmayan bir uygulamayı ilk kez ziyaret ettiğinizde, hizmet çalışanının bunları önbelleğine ekleyebilmesi için uygulamanın işaretlemesinin ve ilişkili öğelerinin ağ üzerinden yüklenmesi gerekir. Bununla birlikte, tekrarlanan ziyaretler uygulama kabuğunu önbellekten çeker. Bu da yükleme ve oluşturma işlemlerinin anında gerçekleşeceği anlamına gelir.
- Çevrimdışı senaryolarda işlevlere güvenilir erişim. Bazen internet erişimi sınırlı olabiliyor ya da hiç yok olabiliyor. Bu yüzden, "o web sitesini bulamadık" diye korkuyoruz. zihninizi çalıştırıyor. Uygulama kabuğu modeli, herhangi bir gezinme isteğine önbellekten uygulama kabuğu işaretlemesiyle yanıt vererek bu sorunu ele alır. Kullanıcı, web uygulamanızda daha önce hiç gitmediği bir URL'yi ziyaret etse bile, uygulama kabuğu önbellekten sunulur ve yararlı içerikle doldurulabilir.
Uygulama kabuğu modelinin ne zaman kullanılması gerektiği
Uygulama kabuğu, yoldan rotaya değişmeyen ortak kullanıcı arayüzü öğelerinize rağmen içeriğin değişmesine daha uygundur. Çoğu SPA'lar muhtemelen zaten etkin bir şekilde uygulama kabuğu modeli olanları kullanır.
Bu ifade projenizi tanımlıyorsa ve güvenilirliği ile performansını artırmak için bir hizmet çalışanı eklemek istiyorsanız uygulama kabuğu şu özelliklere sahip olmalıdır:
- Hızlı yüklenir.
- Bir
Cacheörneğindeki statik öğeleri kullanın. - Sayfanın içeriğinden ayrı olarak, başlık ve kenar çubuğu gibi ortak arayüz öğelerini ekleyin.
- Sayfaya özgü içeriği alın ve görüntüleyin.
- Uygun durumlarda, isteğe bağlı olarak dinamik içeriği çevrimdışı görüntüleme için önbelleğe alın.
Uygulama kabuğu, sayfaya özel içeriği API'ler veya JavaScript'te gruplandırılmış içerik üzerinden dinamik olarak yükler. Ayrıca, uygulama kabuğunun işaretlemesi değişirse bir hizmet çalışanı güncellemesinin yeni uygulama kabuğunu alması ve otomatik olarak önbelleğe alması gerektiği anlamında da kendi kendine güncellenmelidir.
Uygulama kabuğunu oluşturma
Uygulama kabuğu, içerikten bağımsız olarak var olmalı, yine de içinde doldurulacak içerik için bir temel sağlamalıdır. İdeal olarak, içerik olabildiğince ince olmalıdır ancak ilk indirmede, kullanıcının deneyimin hızlı yüklendiğini anlaması için yeterince anlamlı içerik bulunmalıdır.
Doğru bakiye, uygulamanıza bağlıdır. Jake Archibald'ın Trained To Thrill uygulamasının uygulama kabuğunda, Flickr'dan yeni içerik almak için yenileme düğmesi bulunan bir başlık bulunur.
Uygulama kabuğu işaretlemesi, projeden projeye farklılık gösterir ancak uygulama ortak metnini sağlayan bir index.html dosyası örneğini aşağıda bulabilirsiniz:
<!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>
Ancak projeniz için bir uygulama kabuğu oluşturmak istiyorsanız kabuğun aşağıdaki özelliklere sahip olması gerekir:
- HTML'de ayrı kullanıcı arayüzü öğeleri için açıkça izole alanlar bulunmalıdır. Yukarıdaki örnekte bu, uygulamanın başlığını, gezinme bölümünü, ana içerik alanını ve yüklenen "döndürücü" alanını içerir. yalnızca içerik yüklenirken gösterilen reklamlar.
- Uygulama kabuğu için yüklenen ilk JavaScript ve CSS minimum düzeyde olmalı ve içerikle değil, yalnızca uygulama kabuğunun işlevleriyle ilgili olmalıdır. Bu, uygulamanın kabuğunu mümkün olduğunca hızlı oluşturmasını sağlar ve içerik görünene kadar ana iş parçacığı çalışmasını en aza indirir.
- Hizmet çalışanını kaydeden bir satır içi komut dosyası.
Uygulama kabuğu derlendikten sonra, hem bu uygulamayı hem de öğelerini önbelleğe almak için bir hizmet çalışanı derleyebilirsiniz.
Uygulama kabuğunu önbelleğe alma
Hizmet çalışanı, yükleme sırasında uygulama kabuğunu ve gerekli öğelerini önbellekte hemen almalıdır. Yukarıdaki örneğe benzer bir uygulama kabuğunu kabul ederek, workbox-build kullanılarak temel bir Çalışma Kutusu örneğinde bunu nasıl başarabileceğinize bakalım:
// 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.`);
});
build-sw.js içinde depolanan bu yapılandırma, shell.html öğesindeki uygulama kabuğu işaretleme dosyası da dahil olmak üzere uygulamanın CSS ve JavaScript'ini içe aktarır. Komut dosyası, Düğüm ile aşağıdaki şekilde yürütülür:
node build-sw.js
Oluşturulan hizmet çalışanı ./dist/sw.js alanına yazılır ve tamamlandığında aşağıdaki mesajı günlüğe kaydeder:
Generated ./dist/sw.js, which precaches 5 assets totaling 44375 bytes.
Sayfa yüklendiğinde hizmet çalışanı, uygulama kabuğu işaretlemesini ve bağımlılıklarını önbelleğe alır:
Uygulama kabuğunuzun HTML, CSS ve JavaScript'ini önbelleğe almak, paketleyici kullanan projeler de dahil olmak üzere hemen hemen her iş akışında mümkündür. Dokümanlarda ilerledikçe, SPA olsun ya da olmasın projeniz için en iyi şekilde çalışan bir hizmet çalışanı oluşturmak amacıyla araç zincirinizi ayarlamak için Workbox'ı doğrudan nasıl kullanacağınızı öğreneceksiniz.
Sonuç
Uygulama kabuğu modelini Service Worker ile birleştirmek, özellikle önbelleğe alma işlevini işaretleme veya API yanıtları için ağ öncelikli, önbellek stratejisine yedek olarak birleştiriyorsanız çevrimdışı önbelleğe alma için idealdir. Sonuç olarak, çevrimdışı koşullarda bile yinelenen ziyaretlerde uygulama kabuğunuzu anında oluşturacak güvenilir, hızlı bir deneyim elde edilir.