یکی از ویژگی‌های معماری رایج برنامه‌های وب تک صفحه‌ای (SPA) مجموعه حداقلی از HTML، CSS و جاوا اسکریپت است که برای تقویت عملکرد کلی یک برنامه مورد نیاز است. در عمل، این به عنوان هدر، ناوبری و دیگر عناصر رابط کاربری رایج است که در تمام صفحات باقی می ماند. هنگامی که یک سرویس‌دهنده این حداقل HTML و دارایی‌های وابسته را از پیش ذخیره می‌کند، آن را پوسته برنامه می‌نامیم.
پوسته برنامه نقش مهمی در عملکرد درک شده یک برنامه وب دارد. این اولین چیزی است که بارگیری می شود، و بنابراین، اولین چیزی است که کاربران در حالی که منتظر می مانند تا محتوا در رابط کاربری پر شود، می بینند.
در حالی که پوسته برنامه به سرعت بارگیری می شود - به شرطی که شبکه در دسترس باشد و حداقل تا حدودی سریع باشد - یک سرویس دهنده که پوسته برنامه و دارایی های مرتبط با آن را پیش کش می کند، این مزایای اضافه را به مدل پوسته برنامه می دهد:
- عملکرد قابل اعتماد و ثابت در بازدیدهای مکرر. در اولین بازدید از برنامه‌ای که سرویسکار نصب نشده است، نشانه‌گذاری برنامه و دارایی‌های مرتبط با آن باید از شبکه بارگیری شوند تا کارگر سرویس بتواند آنها را در حافظه پنهان خود قرار دهد. با این حال، بازدیدهای مکرر پوسته برنامه را از حافظه پنهان خارج می کند، به این معنی که بارگیری و رندر آنی خواهد بود.
- دسترسی قابل اعتماد به عملکرد در سناریوهای آفلاین. گاهی اوقات دسترسی به اینترنت ناقص است، یا اصلاً وجود ندارد، و صفحه وحشتناک "ما نمی توانیم آن وب سایت را پیدا کنیم" سر خود را بالا می برد. مدل پوسته برنامه با پاسخ دادن به هر درخواست ناوبری با نشانه گذاری پوسته برنامه از حافظه نهان به این موضوع می پردازد. حتی اگر شخصی از یک URL در برنامه وب شما بازدید کند که قبلاً هرگز به آن نرفته است، پوسته برنامه از حافظه پنهان ارائه می شود و می تواند با محتوای مفید پر شود.
زمانی که باید از مدل پوسته برنامه استفاده شود
پوسته برنامه زمانی بیشترین حس را دارد که عناصر رابط کاربری مشترکی داشته باشید که از مسیری به مسیر دیگر تغییر نمی‌کنند، اما محتوا تغییر می‌کند. اکثر SPA ها احتمالاً از آنچه که قبلاً یک مدل پوسته برنامه است استفاده می کنند.
اگر این پروژه شما را توصیف می‌کند و می‌خواهید برای افزایش قابلیت اطمینان و عملکرد آن یک سرویسکار اضافه کنید، پوسته برنامه باید:
- سریع بارگیری کنید .
- از دارایی های ثابت از یک نمونه
Cacheاستفاده کنید. - عناصر رابط مشترک مانند سرصفحه و نوار کناری، جدا از محتوای صفحه را شامل شود.
- محتوای خاص صفحه را بازیابی و نمایش دهید.
- در صورت لزوم، به صورت اختیاری محتوای پویا را برای مشاهده آفلاین ذخیره کنید.
پوسته برنامه محتوای خاص صفحه را به صورت پویا از طریق API یا محتوای همراه در جاوا اسکریپت بارگیری می کند. همچنین باید خود به‌روزرسانی شود، به این معنا که اگر نشانه‌گذاری پوسته برنامه تغییر کند، یک سرویسکار به‌روزرسانی باید پوسته برنامه جدید را دریافت کرده و آن را به صورت خودکار ذخیره کند.
ساخت پوسته برنامه
پوسته برنامه باید مستقل از محتوا وجود داشته باشد، در عین حال مبنایی برای پر شدن محتوا در آن فراهم کند. در حالت ایده‌آل، باید تا حد امکان باریک باشد، اما به اندازه کافی محتوای معنادار در دانلود اولیه گنجانده شود تا کاربر بفهمد که تجربه به سرعت بارگذاری می‌شود.
تعادل مناسب به برنامه شما بستگی دارد. پوسته برنامه برای برنامه Jake Archibald's Trained To Thrill شامل یک هدر با دکمه refresh است تا محتوای جدید را از Flickr وارد کند.
نشانه گذاری پوسته برنامه از پروژه ای به پروژه دیگر متفاوت است، اما در اینجا نمونه ای از فایل index.html است که boilerplate برنامه را ارائه می دهد:
<!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>
به هر حال شما یک پوسته برنامه برای پروژه خود می سازید، باید ویژگی های زیر را داشته باشد:
- HTML باید دارای نواحی کاملاً ایزوله برای عناصر رابط کاربری فردی باشد. در مثال بالا، این شامل هدر برنامه، ناوبری، ناحیه محتوای اصلی و فضای یک "اسپینر" در حال بارگیری است که فقط هنگام بارگیری محتوا ظاهر می شود.
- جاوا اسکریپت و CSS اولیه بارگیری شده برای پوسته برنامه باید حداقل باشد و فقط به عملکرد پوسته برنامه مربوط می شود و نه محتوا. این تضمین می‌کند که برنامه در سریع‌ترین زمان ممکن پوسته خود را ارائه می‌کند و تا زمانی که محتوا ظاهر شود، کار رشته اصلی را به حداقل می‌رساند.
- یک اسکریپت درون خطی که یک سرویسکار را ثبت می کند.
هنگامی که پوسته برنامه ساخته شد، می توانید یک سرویس دهنده بسازید تا هم آن و هم دارایی هایش را در حافظه پنهان کند.
کش کردن پوسته برنامه
پوسته برنامه و دارایی‌های مورد نیاز آن چیزی است که سرویسکار باید بلافاصله در زمان نصب آن را پیش کش کند. با فرض یک پوسته برنامه مانند مثال بالا، بیایید ببینیم چگونه می توان این کار را در یک مثال اصلی Workbox با استفاده از 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.`);
});
این پیکربندی ذخیره شده در build-sw.js CSS و جاوا اسکریپت برنامه، از جمله فایل نشانه گذاری پوسته برنامه موجود در shell.html را وارد می کند. اسکریپت با Node به این صورت اجرا می شود:
node build-sw.js
سرویسکار تولید شده در ./dist/sw.js نوشته می‌شود و پس از اتمام، پیام زیر را ثبت می‌کند:
Generated ./dist/sw.js, which precaches 5 assets totaling 44375 bytes.
هنگامی که صفحه بارگیری می شود، سرویس دهنده نشانه گذاری پوسته برنامه و وابستگی های آن را از پیش ذخیره می کند:
پیش کش کردن HTML، CSS و جاوا اسکریپت پوسته برنامه شما تقریباً در هر گردش کاری، از جمله پروژه هایی که از باندلرها استفاده می کنند، امکان پذیر است. همانطور که در اسناد پیشرفت می کنید، یاد می گیرید که چگونه مستقیماً از Workbox برای راه اندازی زنجیره ابزار خود استفاده کنید تا یک سرویس دهنده را بسازید که برای پروژه شما بهترین کار را داشته باشد، صرف نظر از اینکه SPA است یا خیر.
نتیجه گیری
ترکیب مدل پوسته برنامه با یک سرویسکار برای ذخیره‌سازی آفلاین عالی است، به خصوص اگر عملکرد پیش کش آن را با یک شبکه ترکیب کنید و ابتدا به استراتژی کش برای نشانه‌گذاری یا پاسخ‌های API بازگردید . نتیجه یک تجربه سریع قابل اعتماد است که بلافاصله پوسته برنامه شما را در بازدیدهای مکرر حتی در شرایط آفلاین ارائه می دهد.