Tek sayfalık uygulama (SPA) tamamen yeni bir sayfa yüklemek yerine, kullanıcı sitenin farklı bir bölümünü ziyaret ettiğinde mevcut sayfayı güncellemek için tarayıcının JavaScript kodunu çalıştırdığı bir mimari kalıptır.
Bu, web uygulamasının gerçek bir sayfa yeniden yüklemesi gerçekleştirmediği anlamına gelir. bu Geçmiş API’sı bunun yerine kullanıcının geçmişinde ileri geri gezinmek ve geçmiş yığınının içeriğini değiştirmek için kullanılır.
Bu tür bir mimarinin kullanılması, hızlı, güvenilir ve gezinirken genellikle daha az veri tüketen bir uygulama kabuğu UX sağlayabilir.
Çok sayfalı uygulamalarda (MPA’lar), bir kullanıcı yeni bir URL’ye her gittiğinde, tarayıcı aşamalı olarak o sayfaya özel HTML’yi işler. Bu, yeni bir sayfayı her ziyaret ettiğinizde tam sayfanın yenilenmesi anlamına gelir.
Her ikisi de kullanmak için eşit derecede geçerli modeller olsa da, SPA’ların uygulama kabuğu UX’inin bazı avantajlarını mevcut MPA sitenize getirmek isteyebilirsiniz. Bu makalede, kısmi öğeleri, hizmet çalışanlarını ve akışları birleştirerek çok sayfalı uygulamalarda SPA benzeri bir mimariye nasıl ulaşabileceğinizi analiz edeceğiz.
Üretim durumu #
dev yazılım geliştiricilerin makaleler yazdığı, tartışmalara katıldığı ve profesyonel profillerini oluşturduğu bir topluluktur.
Mimarileri, Ruby on Rails aracılığıyla geleneksel arka uç şablon oluşturmaya dayalı çok sayfalı bir uygulamadır. Ekipleri, bir uygulama kabuğu modelinin bazı faydalarıyla ilgilendi, ancak büyük bir mimari değişiklik yapmak veya orijinal teknoloji yığınından uzaklaşmak istemedi.
Çözümleri şu şekilde çalışır:
- İlk olarak, üstbilgi ve altbilgi için ana sayfalarının kısmi bölümlerini oluştururlar (
shell_top.htmlVeshell_bottom.html) ve bunları bir uç nokta ile bağımsız HTML parçacıkları olarak sunun. Bu varlıklar, hizmet çalışanındaki önbelleğe eklenirinstallolay (yaygın olarak önceden önbelleğe alma olarak adlandırılan). - Servis çalışanı tarafından bir navigasyon talebi yakalandığında, bir akışlı yanıt önbelleğe alınmış üstbilgi ve altbilgiyi sunucudan yeni gelen ana sayfa içeriğiyle birleştirerek. Gövde, sayfanın ağdan veri alınmasını gerektiren tek gerçek parçasıdır.
Bu çözümün temel unsuru, Canlı Yayınlarsağlayan artımlı kreasyonlar ve güncellemeler veri kaynakları. Akışlar API’si ayrıca, herhangi bir zamanda bellekte yalnızca bir alt kümesi mevcut olabilecek eşzamansız veri yığınlarını okumak veya yazmak için bir arabirim sağlar. Bu şekilde, içeriğin geri kalanı ağdan getirilirken, sayfanın başlığı önbellekten alınır alınmaz işlenebilir. Sonuç olarak, gezinme deneyimi o kadar hızlıdır ki, kullanıcılar gerçek bir sayfa yenilemesi algılamaz, yalnızca yeni içeriğin (gövde) güncellendiğini algılar.
Ortaya çıkan UX, bir MPA sitesinde uygulanan SPA’ların uygulama kabuğu UX modeline benzer.
Workbox ile MPA’larda bir uygulama kabuğu UX mimarisi uygulayın #
Bu bölümde, MPA’larda bir uygulama kabuğu UX mimarisinin uygulanmasında yer alan farklı bölümlerin bir özetini ele alacağız. Bunun gerçek bir sitede nasıl uygulanacağına ilişkin daha ayrıntılı bir gönderi için göz atın SPA’ların Ötesinde: PWA’nız için alternatif mimariler.
Sunucu #
Kısmi Parçalar #
İlk adım, HTML bölümlerine dayalı bir site yapısı benimsemektir. Bunlar, sayfalarınızın sitenizde yeniden kullanılabilen ve ayrıca bağımsız HTML parçacıkları olarak teslim edilebilen modüler parçalarıdır.
bu kafa kısmi sayfanın başlığını biçimlendirmek ve işlemek için gereken tüm mantığı içerebilir. bu gezinme çubuğu kısmi gezinme çubuğu için mantığı içerebilir, altbilgi kısmi orada çalıştırılması gereken kod vb.
Kullanıcı siteyi ilk ziyaret ettiğinde, sunucunuz sayfanın farklı bölümlerini birleştirerek bir yanıt oluşturur:
app.get(routes.get('index'), async (req, res) => {
res.write(headPartial + navbarPartial);
const tag = req.query.tag || DEFAULT_TAG;
const data = await requestData(…);
res.write(templates.index(tag, data.items));
res.write(footPartial);
res.end();
});
kullanarak res (yanıt) nesnenin yazma() yöntemive yerel olarak depolanan kısmi şablonlara başvurularak yanıt şu şekilde olabilir: akışlı herhangi bir harici veri kaynağı tarafından engellenmeden anında. Tarayıcı bu ilk HTML’yi alır ve hemen anlamlı bir arayüz ve yükleme mesajı oluşturur.
Sayfanın bir sonraki bölümü, bir ağ isteği içeren API verilerini kullanır. Web uygulaması, bir yanıt alıp işleyene kadar başka bir şey oluşturamaz, ancak en azından kullanıcılar beklerken boş bir ekrana bakmıyorlar.
hizmet çalışanı #
Bir kullanıcı bir siteyi ilk kez ziyaret ettiğinde, sayfanın gövdesini beklemeye gerek kalmadan sayfanın başlığı daha hızlı işlenecektir. Sayfanın geri kalanını getirmek için tarayıcının yine de ağa gitmesi gerekiyor.
İlk sayfa yüklemesinden sonra, hizmet çalışanı kaydedilir ve sayfanın farklı statik bölümlerinin (üstbilgi, navbar, altbilgi vb.) kısmi bölümlerini önbellekten almanıza olanak tanır.
Statik varlıkları önbelleğe alma #
İlk adım, kısmi HTML şablonlarını önbelleğe almaktır, böylece hemen kullanılabilirler. İle İş kutusu önbelleği bu dosyaları şu adreste saklayabilirsiniz: install servis çalışanının olayı ve değişiklikler web uygulamasına dağıtıldığında onları güncel tutun.
Derleme sürecine bağlı olarak, Workbox’ın bir hizmet çalışanı oluşturmak ve önbelleğe alınacak dosyaların listesini belirtmek için farklı çözümleri vardır. web paketi Ve yudum eklentiler, bir genel düğüm modülü ve bir komut satırı arayüzü.
Daha önce açıklanan gibi bir kısmi yapılandırma için, ortaya çıkan hizmet çalışanı dosyası aşağıdakine benzer bir şey içermelidir:
workbox.precaching.precacheAndRoute([
{
url: 'partials/about.html',
revision: '518747aad9d7e',
},
{
url: 'partials/foot.html',
revision: '69bf746a9ecc6',
},
// etc.
]);
Yayın Akışı #
Ardından, önceden önbelleğe alınan kısmi HTML’nin web uygulamasına hemen geri gönderilebilmesi için hizmet çalışanı mantığını ekleyin. Bu, güvenilir bir şekilde hızlı olmanın çok önemli bir parçasıdır. Kullanmak Akış API’sı servis çalışanımızın içinde bunu mümkün kılar. Çalışma Kutusu Akışları akışın nasıl çalıştığının ayrıntılarını özetler. Paket, hem önbelleklerden hem de ağdan gelebilecek çalışma zamanı verilerinden oluşan akış kaynaklarının bir karışımını kitaplığa iletmenizi sağlar. Workbox, tek tek kaynakları koordine etme ve bunları tek bir akış yanıtında birleştirme işini üstlenir.
İlk olarak, akış yanıtını oluşturacak farklı kaynakları işlemek için Workbox’ta stratejileri ayarlayın.
const cacheStrategy = workbox.strategies.cacheFirst({
cacheName: workbox.core.cacheNames.precache,
});const apiStrategy = workbox.strategies.staleWhileRevalidate({
cacheName: API_CACHE_NAME,
plugins: [
new workbox.expiration.Plugin({maxEntries: 50}),
],
});
Ardından, Workbox’a, hemen yürütülecek işlevler olarak bir dizi kaynağı ileterek eksiksiz, akışlı bir yanıt oluşturmak için stratejileri nasıl kullanacağını söyleyin:
workbox.streams.strategy([
() => cacheStrategy.handle({
request: new Request(getCacheKeyForURL("/head.html")),
}),
() => cacheStrategy.handle({
request: new Request(getCacheKeyForURL("/navbar.html")),
}),
async ({event, url}) => {
const tag = url.searchParams.get('tag') || DEFAULT_TAG;
const listResponse = await apiStrategy.handle(…);
const data = await listResponse.json();
return templates.index(tag, data.items);
},
() => cacheStrategy.handle({
request: new Request(getCacheKeyForURL("/foot.html")),
}),
]);
- İlk iki kaynak, doğrudan hizmet çalışanının önbelleğinden okunan önceden önbelleğe alınmış kısmi şablonlardır, bu nedenle bunlar her zaman anında kullanılabilir olacaktır.
- Bir sonraki kaynak işlevi ağdan veri alır ve yanıtı web uygulamasının beklediği HTML’ye işler.
- Son olarak, yanıtı tamamlamak için altbilginin ve kapanış HTML etiketlerinin önbelleğe alınmış bir kopyası akışa alınır.
Workbox, sonucu her kaynaktan alır ve sırayla web uygulamasına aktarır, yalnızca dizideki bir sonraki işlev henüz tamamlanmadıysa geciktirir. Sonuç olarak, kullanıcı sayfanın boyandığını hemen görür. Deneyim o kadar hızlıdır ki, başlık gezinirken kullanıcının tam sayfa yenilemesini algılamasına neden olmadan konumunda kalır. Bu, uygulama kabuğu SPA modelinin sağladığı kullanıcı deneyimine çok benzer.