Tek sayfalık web uygulamalarının (SPA) yaygın bir mimari özelliği, bir uygulamanın küresel işlevini desteklemek için gereken minimum HTML, CSS ve JavaScript grubudur. Pratikte bu, tüm sayfalarda değişmeyen başlık, gezinme ve diğer yaygın 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 önbelleğe aldığında buna uygulama kabuğu adını veririz.
Uygulama kabuğu, bir 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ünü doldurmasını beklerken kullanıcıların da ilk gördüğü şeydir.
Ağın kullanılabilir olması ve en azından bir miktar hızlı olması koşuluyla uygulama kabuğu hızlı bir şekilde yüklense de, uygulama kabuğunu ve ilişkili öğelerini önceden önbelleğe alan bir hizmet çalışanı, uygulama kabuğu modeline şu ek avantajları sağlar:
- Tekrarlanan ziyaretlerde güvenilir ve tutarlı performans. Hizmet çalışanı yüklenmeyen bir uygulamaya yapılan ilk ziyarette, hizmet çalışanının önbelleğine yerleştirilebilmesi için uygulamanın işaretlemesinin ve ilişkili öğelerinin ağdan yüklenmesi gerekir. Ancak, tekrarlanan ziyaretler uygulama kabuğunu önbellekten çeker. Bu da, yükleme ve oluşturma işlemlerinin anında yapıldığı anlamına gelir.
- Çevrimdışı senaryolarda işlevlere güvenilir erişim. Bazen internet erişimi kesintili veya hiç yoktu ve korkunç "web sitesini bulamıyoruz" ekranı tepetaklak. Uygulama kabuğu modeli, bu sorunu önbellekten uygulama kabuğu işaretlemesiyle gezinme isteklerine yanıt vererek ele alır. Bir kullanıcı web uygulamanızda daha önce hiç ziyaret etmediği bir URL'yi ziyaret etse bile, uygulama kabuğu önbellekten sunulur ve yararlı içerikle doldurulabilir.
Uygulama kabuğu modelinin kullanılması gereken durumlar
Bir uygulama kabuğu, rotadan yola değişmeyen ancak içerik değişen genel kullanıcı arayüzü öğelerine sahip olduğunuzda daha anlamlı olur. Çoğu SPA muhtemelen halihazırda etkin bir uygulama kabuk modeli olan modeli kullanır.
Bu, 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:
- Hızlı yüklenir.
- Bir
Cacheörneğindeki statik öğeleri kullanın. - Sayfanın içeriğinden ayrı, başlık ve kenar çubuğu gibi genel arayüz öğeleri ekleyin.
- Sayfaya özgü içeriği alın ve görüntüleyin.
- Uygunsa çevrimdışı görüntüleme için dinamik içeriği isteğe bağlı olarak önbelleğe alın.
Uygulama kabuğu, sayfaya özel içeriği API'lar veya JavaScript'te paketlenmiş içerik aracılığıyla dinamik olarak yükler. Aynı zamanda, uygulama kabuğunun işaretlemesi değişirse bir hizmet çalışanı güncellemesinin yeni uygulama kabuğunu alıp otomatik olarak önbelleğe alması gerektiği anlamına gelir.
Uygulama kabuğu oluşturma
Uygulama kabuğu, içerikten bağımsız olarak oluşturulmalı, aynı zamanda içeriğin içinde doldurulması için bir temel sağlamalıdır. İdeal olarak, dosya mümkün olduğunca ince olmalı, ancak ilk indirmede kullanıcının deneyimin hızlı bir şekilde yüklendiğini anlaması için yeterli miktarda anlamlı içerik barındırmalıdır.
Doğru denge 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 kabuk işaretlemesi projeden projeye değişir, ancak uygulama ortak metnini sağlayan index.html dosyası örneğini burada 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 derlerseniz bu uygulama aşağıdaki özelliklere sahip olmalıdır:
- HTML'de, her bir kullanıcı arayüzü öğesi için açık bir şekilde birbirinden ayrılmış alanlar bulunmalıdır. Yukarıdaki örnekte buna uygulama başlığı, gezinme, ana içerik alanı ve yalnızca içerik yüklenirken görünen bir yükleme "döndürücü" için alan dahildir.
- 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şlevselliğiyle 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.
- Service Worker'ı kaydeden satır içi komut dosyası.
Uygulama kabuğu derlendikten sonra hizmet çalışanı oluşturup hem onu hem de öğelerini önbelleğe alabilirsiniz.
Uygulama kabuğunu önbelleğe alma
Uygulama kabuğu ve gerekli öğeleri, hizmet çalışanının yükleme sırasında hemen önbelleğe alması gereken öğelerdir. Yukarıdaki örneğe benzer bir uygulama kabuğu olduğunu varsayarsak, workbox-build kullanılarak temel bir Workbox örneğinde bu işlemi nasıl gerçekleştirebileceğinizi görelim:
// 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 politikasındaki 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 şu şekilde çalıştırılır:
node build-sw.js
Oluşturulan hizmet çalışanı ./dist/sw.js adresine yazılır ve işlem 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, Service Worker uygulama kabuğu işaretlemesini ve bağımlılıklarını önbelleğe alır:
Paketleyici kullanan projeler de dahil olmak üzere neredeyse tüm iş akışlarında uygulama kabuğunuzun HTML, CSS ve JavaScript'ini önbelleğe almak mümkündür. Belgelerde ilerledikçe SPA olsun ya da olmasın, projeniz için en uygun hizmet çalışanı derlemek amacıyla araç zincirinizi doğrudan Workbox'ı nasıl kullanacağınızı öğreneceksiniz.
Sonuç
Uygulama kabuğu modelini bir Service Worker ile birleştirmek, özellikle de işaretleme veya API yanıtları için önbelleğe alma işlevini ağ öncelikli bir önbellek stratejisiyle birleştirdiğinizde çevrimdışı önbelleğe alma için çok uygundur. Bunun sonucunda, çevrimdışı koşullarda bile uygulama kabuğunu yinelenen ziyaretlerde anında oluşturacak güvenilir bir şekilde ve hızlı bir deneyim elde edersiniz.