شما یک برنامه وب طراحی کرده‌اید، کد و سرویس‌کار آن را نوشته‌اید، و در نهایت Web App Manifest را اضافه کرده‌اید تا نحوه عملکرد آن را هنگام «نصب» روی دستگاه کاربر توضیح دهید. این شامل مواردی مانند نمادهای با وضوح بالا برای استفاده برای مثال راه‌انداز یا تعویض‌کننده برنامه تلفن همراه، یا نحوه شروع برنامه وب شما هنگام باز شدن از صفحه اصلی کاربر است.
و در حالی که بسیاری از مرورگرها به مانیفست برنامه وب احترام می گذارند، هر مرورگر به هر مقداری که شما مشخص می کنید بارگذاری یا احترام نمی گذارد. PWACompat را وارد کنید، کتابخانه‌ای که مانیفست برنامه وب شما را می‌گیرد و به‌طور خودکار تگ‌های meta یا link مربوطه را برای نمادهای با اندازه‌های مختلف، فاویکون، حالت راه‌اندازی، رنگ‌ها و غیره درج می‌کند.
این بدان معناست که دیگر نیازی به اضافه کردن تگ های بی شمار، استاندارد و غیر استاندارد (مانند <link rel="icon" ... /> یا <meta name="orientation" ... /> ) به صفحات خود ندارید. و برای برنامه‌های صفحه اصلی iOS، PWACompat حتی به صورت پویا صفحه‌های اسپلش ایجاد می‌کند، بنابراین شما مجبور نیستید برای هر اندازه صفحه‌نمایش متفاوت، یکی بسازید.
با استفاده از PWACompat
برای استفاده از PWACompat ، حتماً در تمام صفحات خود به مانیفست برنامه وب خود پیوند دهید:
<link rel="manifest" href="manifest.webmanifest" />
و سپس یا این اسکریپت را اضافه کنید، یا آن را به یک بسته بارگیری ناهمگام اضافه کنید :
<link rel="manifest" href="manifest.webmanifest" />
<!-- include PWACompat _after_ your manifest -->
<script async src="https://unpkg.com/pwacompat" crossorigin="anonymous"></script>
PWACompat فایل مانیفست شما را واکشی می کند و کار مورد نیاز برای مرورگر کاربر شما را انجام می دهد، صرف نظر از اینکه آنها روی دستگاه تلفن همراه یا دسکتاپ هستند.
ما همچنان توصیه می کنیم حداقل یک نماد میانبر با کیفیت بالا برای فهرست بندی جستجو اضافه کنید:
<link rel="icon" type="image/png" href="icon-128.png" sizes="128x128" />
برای اطلاعات بیشتر، بهترین شیوه ها را ببینید.
<script type="module">
// detect iOS Safari
if (('standalone' in navigator) && (!navigator.standalone)) {
import('https://unpkg.com/pwacompat');
}
</script>
در عمق
برای مرورگرهای پشتیبانی شده، PWACompat واقعاً چه کاری انجام می دهد؟ PWACompat مانیفست برنامه وب شما را بارگیری می کند و:
- تگ‌های متا آیکون را برای همه نمادها در مانیفست ایجاد کنید (مثلاً برای فاویکون، مرورگرهای قدیمی‌تر)
- متا تگ های بازگشتی برای مرورگرهای مختلف (به عنوان مثال iOS، WebKit/Chromium forks، و غیره) ایجاد کنید و توضیح دهد که چگونه یک برنامه وب باید باز شود.
- رنگ طرح زمینه را بر اساس مانیفست تنظیم می کند
برای سافاری، PWACompat نیز:
-
apple-mobile-web-app-capable(باز کردن بدون مرورگر کروم) را برای حالت های نمایشstandalone،fullscreenیاminimal-uiتنظیم می کند. - تصاویر
apple-touch-iconرا ایجاد می کند، پس زمینه مانیفست را به نمادهای شفاف اضافه می کند: در غیر این صورت، iOS شفافیت را سیاه نشان می دهد. - تصاویر اسپلش پویا ایجاد می کند، که دقیقاً با تصاویر اسپلش تولید شده برای مرورگرهای مبتنی بر Chromium مطابقت دارد.
اگر می‌خواهید مشارکت بیشتری داشته باشید یا با پشتیبانی بیشتر مرورگر کمک کنید، PWACompat در GitHub است .
آن را امتحان کنید
PWACompat به صورت زنده در Airhorner ، v8.dev و Emojityper است. HTML سرصفحه سایت شما می تواند ساده باشد: فقط مانیفست را مشخص کنید و اجازه دهید PWACompat بقیه موارد را مدیریت کند.
📢🤣🎉