چگونه می‌توان Blazor را برای ساخت برنامه‌های (PWA (App Web Progressive استفاده کرد؟

ساخت برنامه های PWA با استفاده از Blazor به عنوان یک فناوری قدرتمند کارتان را برای توسعه وب راحت می‌کند. تصور کنید یک وب‌سایت دارید که همه‌ ویژگی‌های یک اپلیکیشن‌وب را داشته باشد. این دقیقا همان چیزی است که وب اپلیکیشن‌های پیشرفته Blazor یا PWA برای شما به ارمغان می‌آورند. اگرچه استیو جابز برای اولین بار در مراسم رونمایی از آیفون در سال ۲۰۰۷ این مفهوم را به دنیا معرفی کرد، اما ۸ سال طول کشید تا این ایده به یک اصطلاح کاربردی و واقعی تبدیل شود. در نهایت، PWA در سال ۲۰۱۵ توسط گوگل به بازار معرفی شد. در این مقاله، نحوه ساخت برنامه PWA به‌کمک Blazor را به‌طور گام‌به‌گام بررسی خواهیم کرد.

Blazor یک چارچوب توسعه وب است که به شما امکان می‌دهد برنامه‌های وب تعاملی را با استفاده از C# و Razor Pages یا HTML ایجاد کنید. Blazor از WebAssembly برای اجرای کد C# در مرورگر استفاده می‌کند و به شما امکان می‌دهد برنامه‌های وب با کارایی و پاسخگویی بالا بسازید. Blazor همچنین از ویژگی‌های Service Worker API و Web Manifest API پشتیبانی می‌کند که برای ساخت برنامه‌های وب پیشرو (PWA) ضروری هستند.

PWA چیست؟

برنامه‌های کاربردی وب پیشرفته (PWA) ترکیبی از بهترین ویژگی‌های برنامه‌های وب و برنامه‌های موبایل هستند. این وب اپلیکیشن‌ها مانند یک برنامه‌ مجزا در گوشی یا کامپیوتر شما اجرا می‌شوند. شما می‌توانید آن‌ها را روی صفحه‌ اصلی گوشی‌تان داشته باشید، نوتیفیکیشن دریافت کنید، حتی به‌صورت خودکار آپدیت کنید. برای این کار، Blazor از جدیدترین امکانات مرورگرهای وب استفاده می‌کند تا تجربه‌ای شبیه به اپلیکیشن‌های حرفه‌ای دسکتاپ برای شما رقم بزند. 

مزایای استفاده از Blazor برای ساخت PWAها

استفاده از Blazor برای ساخت PWAها مزایای مختلفی دارد، از جمله:

• کارایی بالا: Blazor از WebAssembly برای اجرای کد C# در مرورگر استفاده می‌کند که به شما امکان می‌دهد برنامه‌های وب با کارایی بالا و پاسخگویی بالا بسازید.
• قابلیت استفاده: Blazor از Razor Pages یا HTML برای ساخت رابط کاربری استفاده می‌کند که به شما امکان می‌دهد برنامه‌های وب بصری و کاربرپسند بسازید.
• انعطاف‌پذیری: Blazor از طیف گسترده‌ای از کتابخانه‌ها و ابزارهای .NET پشتیبانی می‌کند که به شما امکان می‌دهد برنامه‌های وب پیچیده و قدرتمند بسازید.

با Blazor WebAssembly که یک پلتفرم برنامه‌نویسی مبتنی بر استانداردهای وب است، از تمامی امکانات PWA بهره‌مند خواهید شد، از جمله:

• ظاهر مستقل و مجزا
• کارکرد بدون نیاز به اینترنت
• قابلیت به‌روزرسانی خودکار 
• قابل نصب روی گوشی و کامپیوتر
• امکان دریافت اعلان‌های لحظه‌ای

پیش‌ نیاز ساخت برنامه‌ PWA با Blazor

برای ساخت یک برنامه PWA با Blazor، به موارد زیر نیاز دارید:

• پروژه Blazor WebAssembly: می‌توانید با استفاده از دستور dotnet new در خط فرمان یک پروژه Blazor WebAssembly جدید ایجاد کنید.
• Service Worker: Service Worker یک اسکریپت جاوا اسکریپت است که در پس‌زمینه مرورگر اجرا می‌شود و به شما امکان می‌دهد عملکردهای مختلف PWA مانند ذخیره‌سازی آفلاین و ارسال اعلان را پیاده‌سازی کنید.
• Web Manifest: Web Manifest یک فایل JSON است که اطلاعات مربوط به برنامه PWA شما مانند نام، آیکون و رنگ تم را ارائه می‌دهد.

مراحل ساخت برنامه های PWA با استفاده از Blazor

در ادامه،قدم‌به‌قدم مراحل ساخت یک اپلیکیشن PWA را باهم بررسی می‌کنیم:

قدم اول: ایجاد یک پروژه Blazor WebAssembly

برای ایجاد یک پروژه PWA با استفاده از خط فرمان، دستور زیر را اجرا کنید:

dotnet new blazorwasm -o MyBlazorPwa --pwa

در این دستور، گزینه -o یا –output پوشه‌ای جدید به نام MyBlazorPwa برای برنامه شما ایجاد می‌کند.

قدم دوم: ساخت یک service worker

Service Worker یک اسکریپت جاوااسکریپت است که جدا از هسته اصلی مرورگر اجرا می‌شود. این اسکریپت درخواست‌های شبکه را کنترل کرده و منابع را در حافظه موقت ذخیره (cache) یا از حافظه بازیابی می‌کند.

برای شروع، یک فایل خالی به نام serviceWorker.js در همان پوشه‌ای که فایل index.html شما قرار دارد، ایجاد کنید. سپس در تگ body فایل index.html اسکریپت زیر را قرار دهید:

<script>
if (‘serviceWorker’ in navigator) {
window.addEventListener(‘load’, function() {
navigator.serviceWorker.register(‘serviceWorker.js’).then(function(registration) {
// Registration was successful
console.log(‘ServiceWorker registration successful with scope: ‘, registration.scope);
}, function(err) {
// registration failed 🙁
console.log(‘ServiceWorker registration failed: ‘, err);
});
});
}
</script>

بعد از اجرای سرور، کنسول ابزار توسعه (DevTools) مرورگر کروم را باز کنید. باید پیامی شبیه به متن زیر مشاهده نمایید:

برای مشاهده اطلاعات جزئی‌تر در مورد Service Worker ثبت شده، به تب Application بروید. در این برگه می‌توانید جزئیات بیشتری راجع به کارکرد و وظایف این سرویس مشاهده کنید.

قدم سوم: نصب کردن Service Worker

در این مرحله، فرایند ثبت آغاز می‌شود و ما می‌توانیم به سراغ اسکریپت Service Worker برویم که رویداد نصب را مدیریت می‌کند.

در serviceWorker.js، باید یک تابع فراخوان برای رویداد نصب تعریف و مشخص کنیم چه فایل‌هایی را می‌خواهیم کش کنیم. درون این تابع، باید یک کش باز کنیم، فایل‌ها را درون آن ذخیره کنیم و تاییدیه‌ ذخیره‌سازی فایل‌ها را دریافت کنیم. کد serviceWorker.js به شکل زیر است:

let CACHE_NAME = ‘my-site-cache-v1’;
const urlsToCache = [
‘/’,
‘/index.html’,
];
self.addEventListener(‘install’, function(event) {
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log(‘Opened cache’);
return cache.addAll(urlsToCache);
})
);
});

همچنین می‌خواهیم به Service Worker بگوییم که با فایل‌های کش‌شده چه کار کند. این کار با رویداد fetch انجام می‌شود. در این رویداد، Service Worker بررسی می‌کند آیا درخواست کاربر برای فایلی است که قبلا در کش ذخیره شده است یا خیر. اگر فایل در کش وجود داشته باشد، آن را برمی‌گرداند. درغیراین‌صورت، درخواست را به سرور ارسال می‌کند.

self.addEventListener(‘fetch’, function(event) {
event.respondWith(caches.match(event.request)
.then(function(response) {
if (response) {
return response;
}
return fetch(event.request);
})
);
});

قدم چهارم: به‌روزرسانی Service Worker

وقتی تغییری در فایل serviceWorker.js ایجاد می‌کنید، یک Service Worker جدید نصب می‌شود. به خاطر داشته باشید که فقط یک Service Worker می‌تواند در یک زمان فعال باشد. حتی بعد از نصب Service Worker جدید، تا زمانی که Service Worker قبلی در حال استفاده است، نسخه جدید فعال نخواهد شد. برای بررسی این موضوع می‌توانید تغییراتی در فایل serviceWorker.js ایجاد کنید و به تب Application در مرورگر خود مراجعه نمایید.

برای فعال کردن Service Worker جدید، به‌طور معمول باید تمام صفحاتی را که توسط Service Worker قدیمی کنترل می‌شوند، ببندید. اما راهی برای دور زدن این مرحله وجود دارد. با استفاده از دستور self.skipWaiting() در رویداد install می‌توانیم مرحله انتظار را رد کنیم. این دستور به Service Worker جدید اجازه می‌دهد تا به محض اتمام نصب، فعال شود. کد مربوط به این کار به صورت زیر است:

self.addEventListener(‘install’, function(event) {
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log(‘Opened cache’);
return cache.addAll(urlsToCache);
})
);
self.skipWaiting();
});

قدم پنجم: فایل manifest

یکی از عناصر حیاتی در PWAها، فایل manifest وب است. این فایل با فرمت JSON اطلاعاتی در مورد وب‌سایت شما، مانند عنوان برنامه، مسیر آیکن‌ها یا رنگ پس‌زمینه برای استفاده در هنگام بارگذاری یا صفحه‌نمایش splash، در خود جای می‌دهد. یک فایل با نام manifest.json در همان پوشه‌ای که فایل index.html شما قرار دارد، ایجاد کنید. کد نمونه‌ای که در ادامه می‌بینید، نحوه ساختار این فایل را نمایش می‌دهد:

{
 “name”: “PWA demo”,
 “short_name”: “Demo”,
 “start_url”: “index.html”,
 “icons”: [
 {
 “src”: “https://www.scoms.com/media/12178/jobs.png",
 “sizes”: “192x192”,
 “type”: “image/png”
 ],
 “background_color”: “#3E4EB8”,
 “display”: “standalone”,
 “theme_color”: “#2E3AA1”
}

حالا به بررسی کلیدهای موجود در این کد و معانی آن‌ها می‌پردازیم:

• name: نام کامل برنامه
• short_name: نام کوتاه‌تر که روی صفحه‌ اصلی نمایش داده می‌شود.
• start_url: آدرس صفحه‌ اصلی (index.html) که هنگام باز کردن برنامه اجرا می‌شود.
• icons: اطلاعات مربوط به آدرس، اندازه و نوع آیکن‌های برنامه
• background_color: رنگ پیش‌فرض پس‌زمینه برنامه که در زمان نصب و صفحه‌نمایش splash استفاده می‌شود.
• display: نحوه نمایش برنامه (در این مثال به صورت مستقل)
• theme_color: رنگ اصلی رابط کاربری که توسط سیستم‌عامل استفاده می‌شود.

پس از اینکه فایل manifest خود را تعریف کردید، کد زیر را به بخش <head> فایل index.html اضافه کنید:

<link rel=”manifest” href=”manifest.json”>

با اضافه کردن این کد، به مرورگر خود اعلام می‌کنید که یک فایل manifest برای این وب‌سایت وجود دارد و از آن برای پیکربندی برنامه تحت وب (PWA) استفاده کند.

قدم ششم: گزارش Lighthouse را جنریت کنید

در تب DevTools مرورگر Chrome، تب Lighthouse را انتخاب کرده و روی (Generate Report) کلیک کنید. 

در گزارش خواهید دید در نهایت، اپلیکیشن شما یک PWA است.

اپلیکیشنی که قابل نصب است؛ به‌همین سادگی.

پشتیبانی آفلاین در PWA های Blazor

برنامه‌های ساخته شده با قالب PWA به‌طور پیش‌فرض از قابلیت کارکرد آفلاین پشتیبانی می‌کنند. برای فعال شدن این قابلیت، کاربر باید ابتدا در حالت آنلاین به برنامه مراجعه کند. در این بازدید اولیه، مرورگر به‌طور خودکار تمامی منابع مورد نیاز برای اجرای آفلاین برنامه را دانلود و در حافظه پنهان (cache) ذخیره می‌کند. برای فعال‌سازی این قابلیت باید پس از انتشار برنامه، آن را روی یک سرور که از پروتکل امن HTTPS پشتیبانی می‌کند، مستقر کنید. سپس با استفاده از آدرس HTTPS امن به برنامه در مرورگر خود دسترسی پیدا کنید.

سپس صفحه‌ وب را مجدداً بارگیری و تب (Network) را بررسی کنید. در این تب، Service Worker یا حافظه‌ کش (Cache) به عنوان منابع تمامی دارایی‌های (Assets) صفحه ذکر شده باشند.

برای اطمینان از اینکه مرورگر برای بارگذاری برنامه به دسترسی اینترنت وابسته نیست، اتصال وب‌سرور را می‌توانید قطع کنید. خواهید دید برنامه همچنان به کارش ادامه می‌دهد.

جمع بندی: ظهور قدرتمند Blazor PWA

Blazor PWA به عنوان یک فناوری قدرتمند ظهور کرده است و به توسعه‌دهندگان، تجربه‌ای بهینه و کارآمد در فرآیند توسعه ارائه می‌دهد. برنامه‌های وب پیشرو (PWA) با امکاناتی هیجان‌انگیز همراه هستند و  ایجاد برنامه‌های وب با قابلیت‌های مشابه اپلیکیشن‌های  نصب‌شدنی را ممکن می‌کنند. با فریم‌ورک Blazor، توسعه‌دهندگان می‌توانند ضمن بهره‌مندی از آشنایی و انعطاف‌پذیری زبان برنامه‌نویسی C# و دات‌نت، از مزایای PWAها نیز استفاده کنند.