چگونه یک برنامه Blazor WebAssembly را به یک برنامه PWA تبدیل کنیم؟

همونطور که می‌دانید برنامه‌های بلیزر وب اسمبلی در سمت مرورگر کاربر اجرا می‌شوند. (برای مشاهده تاریخچه بلیزر می‌توانید به این مقاله مراجعه کنید) این دسته برنامه‌ها مانند یک Appدر سمت کاربر اجرا شده سپس به نقل و انتقال داده‌ها بین برنامه و سرور می‌پردازند. بنابراین می‌توان قابلیت PWA را برای برنامه‌های بلیزر وب اسمبلی فراهم نمود.

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

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

• استفاده offline و بارگذاری سریع، فارغ از سرعت اینترنت
• اجرا در پنجره خود برنامه و غیر از محیط مرورگر
• امکان اجرای برنامه از طریق آیکن آن در محیط سیستم‌عامل (منوی استارت، داک، هوم اسکرین و ...)
• دریافت push notification از سرور، حتی زمانی که کاربر از برنامه استفاده نمی‌کند
• بروزرسانی برنامه در زمینه

برنامه‌های وب با قابلیت PWAدر نوار مرورگر دارای یک دکمه ویژه هستند که عملیات نصب برنامه روی سیستم کاربر را انجام می‌دهد. به طور مثال در سامانه مرکز صدای مشتری که تصویر آن در زیر آمده است، آیکن نصب برنامه در نوار مرورگر مشاهده می‌شود:

عملیات نصب برنامه

پس از انتخاب دکمه نصب در نوار مرورگر، یک صفحه به عنوان نصب برنامه باز می‌شود که عملیات نصب برنامه در سیستم‌عامل کاربر را انجام می‌دهد. دقت نمایید که عملیات نصب در سیستم عامل‌های مختلف دارای گزینه‌های مختلفی است که در تصویر زیر، نمونه عملیات نصب توسط مرورگر Edge از ویندوز 11 نمایش داده شده است.

تبدیل برنامه

فرض بر این است که شما یک برنامه بلیزر دارید که بر اساس الگوی استاندارد تهیه شده است. بنابراین سمت سرور یا بکند این برنامه اصلا مهم نیست و آنچه که در سمت فرانت برنامه دیده می‌شود باید بلیزر باشد.

شروع فراهم‌سازی قابلیت PWAبه برنامه بلیزر

قدم اول، در اولین قدم از ایجاد قابلیت PWA باید یک فایل manifest.json به عنوان اطلاعات مورد نیاز برنامه‌هایی با قابلیت PWAبه پروژه خود اضافه کنید. این فایل معمولا حاوی اطلاعاتی مانند نام برنامه، آیکن برنامه، نویسنده یا تولید کننده و ... است. این فایل را در مسیر زیر ایجاد کنید:

[BlazorClientAPP]\wwwroot\manifest.json

لازم به توضیح است که فایل manifest.json در استانداردهای جدید وب به نام manifest.webmanifest تغییر نام یافته است. بنابراین بهتر است فایل مانیفست را به شکل زیر ایجاد نمایید:

[BlazorClientAPP]\wwwroot\manifest.webmanifest

سپس لازم است service-worker.js را برای امکان اجرای برنامه به صورت offline، به پروژه خود اضافه کنید.

برای این منظور می‌توانید از فایل‌های استاندارد (مانند فایل موزیلا) یا از خود بلیزر استفاده کنید. (پیشنهاد ما این است که از فایل‌های اختصاصی بلیزر استفاده نمایید).

برای این منظور کد زیر را به PropertyGroup فایل پروژه بلیزر استفاده کنید:

<ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>

سپس یک ItemGroupنیز پس از PropertyGroup به فایل پروژه بلیزر اضافه نمایید:

<ItemGroup>
    <ServiceWorker Include=&quotwwwroot\service-worker.js&quot PublishedContent=&quotwwwroot\service-worker.published.js&quot />
</ItemGroup>

حال لازم است فایل‌های مورد نیاز مانند manifest و service-worker را از مخزن گیت هاب مربوط به بلیزر دانلود و به پروژه خود اضافه نمایید.

ابتدا به آدرس زیر رفته و فایل‌های موجود در این مخزن را دانلود نمایید:

https://github.com/dotnet/aspnetcore/tree/main/src/ProjectTemplates/Web.ProjectTemplates/content/ComponentsWebAssembly-CSharp/Client/wwwroot

سپس فقط فایل‌های زیر را به مسیر wwwroot پروژه بلیزر کپی کنید:

manifest.json
service-worker.js
service-worker.published.js

فایل آیکن برنامه را با سایز 512 در 512 ایجاد نموده و در کنارهای فایل‌های فوق قرار دهید.

مسیر دو فایل manifestو iconرا به فایل index.html و در بخش head اضافه نمایید:

<link href=&quotmanifest.json&quot rel=&quotmanifest&quot />
<link rel=&quotapple-touch-icon&quot sizes=&quot512x512&quot href=&quoticon-512.png&quot />

فایل جاوا اسکریپت مربوط به سرویس ورکر را در انتهای فایل و به عنوان آخرین فایل جاوا اسکریپت آدرس‌دهی کنید:

...
    navigator.serviceWorker.register('service-worker.js');
</body>

با اجرای قدم‌های فوق، برنامه شما به یک PWA تبدیل شده است و می‌توانید عملیات نصب در سمت کلاینت را انجام دهید.

محتوای فایل‌های لازم برای ایجاد قابلیت PWA

شاید برای شما این سوال پیش آمده که محتوای این دو فایل چیست و چگونه قرار است که قابلیت PWAایجاد شود؟

محتوای هر دو فایل دارای استانداردی است که ربطی به نوع تکنولوژی پروژه یا برنامه ندارد. یعنی هر برنامه با هر تکنولوژی که می‌تواند به PWA تبدیل شود، از همین فایل استفاده خواهد نمود.

مشخصات فایل manifest.json

هر فایل مانیفست که اطلاعات معرفی برنامه را در خود دارد، می‌تواند شامل موارد زیر باشد:

name: نام برنامه زمانی که کاربر در حال نصب برنامه است.

short_name: نام برنامه در محیط سیستم‌عامل کاربر وقتی که آیکن آن ساخته می‌شود (در دسکتاپ، اپ لانچر یا هوم اسکرین).

icons: لیست آیکن‌ها با سایزهای مختلف برای نمایش به عنوان آیکن برنامه در محیط سیستم کاربر.

start_url: این مسیر مشخص می‌کند وقتی که مرورگر برنامه را اجرا می‌کند، اولین صفحه‌ای که باید باز کند، کدام آدرس است.

background_color: رنگ زمینه برای زمانی که برنامه برای اولین بار در حال بارگذاری است.

display: مشخص کننده وضعیت نمایش برنامه پس از اجرا است که می‌تواند یکی از مقادیر زیر را داشته باشد:

• fullscreen: برنامه را به صورت تمام صفحه باز می‌کند، در نتیجه هیچ بخشی از مرورگر دیده نمی‌شود و تمام اندازه صفحه نمایش را پر می‌کند.
• standalone: برنامه مشابه یک برنامه Native در آن سیستم‌عامل باز می‌شود، بنابراین نشانه‌ای از مرورگر ندارد و اندازه صفحه برنامه نیز مشابه برنامه‌های محیط سیستم‌عامل است.
• minimal-ui: این حالت شبیه standalone است، با این تفاوت که دارای دکمه‌های پیمایش back، forwardو reloadاست.
• browser: برنامه را در محیط مرورگر مانند حالت عادی باز کردن یک وبسایت باز می‌کند.

مشخصات برنامه service-worker.js

برای این‌که وبسایت به صورت یک برنامه Native در محیط سیستم‌عامل اجرا شود، نیاز است که قابلیت offlineبا استفاده از service-worker به آن اضافه شود. وقتی برنامه اجرا می‌شود، ابتدا سرویس ورکر در کش به دنبال فایلهایی که برای اجرا برنامه لازم هستند (شامل صفحه و کامپوننت)، جستجو می‌کند، در صورتی که فایل‌های مورد نیاز را پیدا نکند، سعی می‌کند آن را از طریق اینترنت دانلود کند تا برنامه بتواند اجرا شود.

از آنجا که احتمالا برنامه‌های این چنینی لازم است داده‌هایی را از سمت سرور دریافت کنند، باید تمهیدات آن در برنامه توسط توسعه‌دهندگان اضافه شود. به طور مثال می‌توان با استفاده از local storage یا indexDb داده‌های برنامه طی استفاده را در سمت مرورگر کاربر کش نمایید تا در زمان عدم دسترسی به اینترنت، برنامه تواند برخی از خدمات خود را ارائه نماید.

تمامی مفاهیم پایه مرتبط با PWA مانند مانیفست، سرویس ورکرد، لوکال استوریج و ... کاملا مستقل بوده و ارتباطی با بلیزر ندارند. بلیزر تمامی این قابلیت‌ها را کنار هم گذاشته تا بتوان به قابلیت PWA دست یافت.

منابع