یک خبر بهتر! در شرایطی که استخراج و عمل آنلاینی دارید و مایلید که قابلیت و امکان های وب سایت خویش را در پوسته یک PWA ارائه دهید، ما یحتاج وجود ندارد که یک سیستم نو پیاده سازی فرمایید؛ بلکه میتوانید بخش اعظمی از خصوصیت های PWA را روی همین تارنما فعلی خویش فعال فرمایید!
در شرایطی که وب سایت وردپرسی دارید، دوره آموزش سئو به راحتی با پلاگین نرم افزار پیشرو میتوانید PWA را روی سایتتان فعال نمائید. شما میتوانید این پلاگین را از ژاکت تهیه و تنظیم نمائید.
ضمن این، برای فعالسازی PWA روی تارنما میتوانید از 3 مرحله که پیرو معرفی میشود، مبادرت فرمایید.
مرحله نخستین: اعتقاد و باور از وجود پروتکل HTTPS
همان گونه که فراتر نیز اشاره کردیم، مجموع Progressive Web Apps، تنها یاروهمدم با پروتکل HTTPS ارائه می گردند. به این ترتیب در شرایطی که سایتی که می‌خواهید PWA را برای آن فعال نمائید، این پروتکل را ندارد و HTTP میباشد، می بایست مدرک SSL را برای آن فعال نمایید. بعداز این که نشانی تارنما متبوع پروتکل HTTPS را اخذ کرد، به مرحله آنگاه بروید. با روش اخذ مدرک SSL مجانی برای تارنما وردپرسی آشنا گردید.
مرحله دوم: ساخت‌و‌ساز فولدر اول
اولی فایلی که می بایست برای فعال کردن PWA روی وب سایت خویش بسازید، یک فولدر در فرمت JSON میباشد. قابل ذکر میباشد که به‌این فولدر، پوشه Manifest نیز میگویند. در‌این پوشه قرار میباشد داده ها مبنا ای را درباره وب سایت و درباره این PWA در اختیار بگذاریم. اطلاعاتی مثل اسم اپ، توضیحات، آیکون، رنگ تم و … . در واقع مرورگر بدین داده ها نیاز داراست تا بتواند این اپ را به صدق نصب کرده و به یوزرها تلفن همراه اکران دهد.
برای تشکیل داد این فولدر آغاز کدهایی را در یک فولدر مستقل با فرمت JSON می نویسیم. آنگاه با تکه کد، این فولدر را در نصیب پوشه index.html اضافه میکنیم.
کدهای ذیل مثال کدهایی میباشند که میتوانند در پوشه JSON قرار بگیرند. قابل ذکر میباشد که‌این پوشه را به عنوان ” .webmanifest” نامگذاری نمایید.
{
"name": "Alloy Application Demo",
"short_name": "Alloy",
"description": "An Episerver site with PWA added",
"start_url": "/",
"display": "standalone",
"orientation": "any",
"background_color": "#fff",
"theme_color": "#fff",
"icons": [
{
"src": "/static/img/icons8-ios-app-icon-shape-72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "/static/img/icons8-ios-app-icon-shape-152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "/static/img/icons8-ios-app-icon-shape-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/static/img/icons8-ios-app-icon-shape-256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/static/img/icons8-ios-app-icon-shape-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
اکنون همان گونه که گفتیم، برای افزودن این کدها به وبسایت، کدهای ذیل را تحت عنوان متا تگ درون تگ به فولدر index.html اضافه میکنیم:
lt;link rel="manifest" href="@Url.Content("~/manifest.json")" />
