اضافه کردن Pwa به پروژه Asp.net core

سلام. من در اولین پستم میخوام درباره اضافه کردن Pwa (Progressive Web Application) به پروژه asp.net core برای شما دوستان توضیح بدم.

ابتدا باید پکیج زیر نصب کنید:

WebEssentials.AspNetCore.PWA

سپس سرویس مربوطه در کلاس startup اضافه کنید:

services.AddProgressiveWebApp();

در مرحله بعد فایل manifest.json را در داخل فولدر wwwroot ایجاد کنید و دیتای زیر را در فایل جی سون قرار دهید:

{
  &quotname&quot: &quotAwesome Application&quot,
  &quotshort_name&quot: &quotAwesome&quot,
  &quotdescription&quot: &quotThe most awesome application in the world&quot,
  &quoticons&quot: [
    {
      &quotsrc&quot: &quot/img/icon192x192.png&quot,
      &quotsizes&quot: &quot192x192&quot
    },
    {
      &quotsrc&quot: &quot/img/icon512x512.png&quot,
      &quotsizes&quot: &quot512x512&quot
    }
  ],
  &quotdisplay&quot: &quotstandalone&quot,
  &quotstart_url&quot: &quot/&quot
}

این فایل به صورت نمونه هست و باید مقادیر اصلی خودتون در اون ثبت کنید.

طبق گفته منبع اصلی پکیج اقدام دیگری لازم نیس و باید پروژه اجرا کرده و در مرورگر کروم قسمت application بررسی کنید تا دو فایل manifest.json و service worker را تشخیص داده باشه.

اگه این دو فایل به درستی تشخیص داده که به شما تبریک میگم و موفق شده اید که برای پروژه خودتون Pwa راه اندازی کنید، اگر هنوز موفق نشدید هیچ اشکالی نداره، من مشکلاتی که خودم داشتم رو در ادامه با شما به اشتراک میزارم تا راه حل مناسب پیدا کنید

1. اگه مرورگر فایل manifest.json پیدا نکرده اول سورس اجرایی پروژه را با کلیک بر روی صفحه و زدن view page source باز کنید و در سورس manifest را جستجو کنید. اگر تگ زیر را پیدا کردید پس در صفحه شما وجود داره:

<link rel=&quotmanifest&quot href=&quot/manifest.webmanifest&quot />

نکته: اگه این تگ بود و همچنان مرورگر تشخیص نمیداد، بهتره که در سورس خودتون این تگ اضافه کنین، حتی بهتره تگ زیر هم اضافه کنید:

<link rel=&quotmanifest&quot href=&quot/manifest.json&quot />

در نهایت توسط مرورگر در بخش application تشخیص داده میشه

2. اگه فایل service worker تشخیص نداد تگ script زیر هم قبل از تگ بسته شدن body قرار بدید (تگ Script در حالت نمایشی نشون نمیدن بخاطر مسایل امنیتی :) ):

'serviceWorker' in navigator && navigator.serviceWorker.register('/serviceworker')

خب بنظرم همه کارهای لازم انجام دادیم. بهتره تست کنید.

نکته اخر: در زمان دپلوی کردن روی سرور باید حتما Ssl بر روی دامنه مورد نظر تنظیم شده باشه وگرنه بازم هم ویژگی Pwa برای شما اجرا نخواهد شد.

امیدوارم این پست براتون مفید بوده باشه. هرجا که براتون مبهم بود حتما کامنت بزارید، من در اولین فرصت پاسخ میدم.

منبع:

https://github.com/madskristensen/WebEssentials.AspNetCore.ServiceWorker

موفق باشید.