pwa

یک وب اپلیکیشن(PWA) به این معنی است که میتوانید وب سایت را در صفحه اصلی خود "نصب" کنید، یک آیکون داشته باشید و آن را دقیقاً شبیه به یک برنامه بومی نشان دهید. با این حال، این موارد با چیزهایی همراه است که شما باید اطلاع داشته باشید.

الزامات

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

• حداقل Android 7 (ترجیحاً 8) و iOS 12 به بالا
• سایت شما باید دارای گواهی SSL باشد
• فایل manifest.json و service-work.js را در همان پوشه فایل های HTML قرار دهید.

وب اپلیکیشن برای اندروید و iOS

دستگاه‌های اندرویدی سازگاری بسیار بهتری برای وب اپلیکیشن دارند تا استفاده از آنها آسانتر شود. در اندروید، هر زمان که وب اپلیکیشن را باز میکنید، محتوا به طور خودکار بروز میشود و همیشه محتوای تازه را در اختیار شما قرار میدهد.
در مورد iOS، اپل تلاش میکند با هر نسخه سازگار با وب اپلیکیشن ها را بهتر کند. اپل تنها در iOS 12 شروع به خواندن فایل‌های manifest و پذیرش سرویس‌ دهندگان کرد.

قالب به عنوان وب اپلیکیشن نصب نمیشود؟

در صورتی که نمیتوانید جعبه نصب وب اپلیکیشن را مشاهده کنید، با اینکه همه موارد انجام داده اید، 2 ویرایش وجود دارد که باید انجام شود. این ممکن است برای برخی از هاست ها بدون دلیل اتفاق بیفتد، یا ممکن است برای هاست های دیگر اصلا مورد نیاز نباشد.
در فایل manifest.json محدوده(scope) خود را تنظیم کنید و لینک را به مقصد فایل های خود ست کنید: آدرس های پیشفرض را با همان ساختاری که در زیر ارائه میشود جایگزین آدرس های خود کنید.

json

"scope" : "https://www.your-domain.com/yourfolder/",
"display" : "fullscreen",
"start_url" : "https://www.your-domain.com/yourfolder/index.html",

در فایل custom.js، در بالای صفحه، کد زیر را خواهید دید. مقادیر با آدرس کامل صفحه و service worker خود جایگزین کنید

js

var pwaScope = "/";
var pwaLocation = "/_service-worker.js";

پشتیبانی از وب اپلیکیشن آفلاین

توجه داشته باشید که پشتیبانی از اجرای آفلاین بر روی جدیدترین سیستم عامل ها بهترین عملکرد را دارد. برخی از سیستم‌عامل‌ های قدیمی‌ تر اندروید و iOS میتوانند مشکلاتی در این مورد ایجاد کنند. برای اینکه وب اپلیکیشن خود را به صورت آفلاین اجرا کنید، باید تمام فایل های خود را کش کنید.
برای کش کردن تمام فایل ها، service-worker.js را باز کنید و در جایی که آرایه REQUIRED_FILES را میبینید، تمام تصاویر، اسکریپت‌ها، استایل و فایل‌ های HTML که اپلیکیشن شما باید در حالت آفلاین استفاده کند را اضافه کنید.

نکته

نحوه وارد کردن فایل ها را بررسی کنید و نمونه ها را دنبال کنید. اگر هر گونه خطای متنی (اشتباهات تایپی) دارید یا مورد را به درستی لینک دهی نکنید، قالب برای استفاده آفلاین فایل ها را کش نمیکند. همچنین مطمئن شوید که مراحل بالا را انجام داده اید و pwaScope و pwaLocation شما در custom.js تنظیم شده اند و همچنین scope و start_url در manifest.json شما نیز ست شده است. بدون تنظیم صحیح این موارد، وب اپلیکیشن شما فایل‌ها را به صورت آفلاین ذخیره نمیکند.

چگونه میتوانم کش وب اپلیکیشن خود را پاک کنم؟

برای پاک کردن کش هنگام ایجاد تغییرات، کافی است service-worker.js را باز کنید و شماره APP_VER را تغییر دهید. با هر تغییر آن را افزایش دهید. پس از انجام این کار و بسته شدن و باز کردن مجدد اپلیکیشن، محتوای جدید را نشان میدهد. گاهی اوقات، 2 یا 3 رفرش نیاز است.

برای اینکه کش خود را همیشه پاک نگه دارید، داخل فایل custom.js مقدار pwaNoCache = true را تنظیم کنید. پیشفرض روی false تنظیم شده است. توصیه میشود هنگام توسعه اپلیکیشن، این مقدار را true نگه دارید و سپس آن را به false برگردانید. بهتر است فقط APP_VER را بروزرسانی کنید تا در مواقع ضروری، دستگاه‌ها را مجبور نکنید داده‌ها را بدون دلیل دانلود کنند.