PWACompat - مانیفست برنامه وب برای همه مرورگرها

شما یک برنامه وب طراحی کرده‌اید، کد و سرویس‌کار آن را نوشته‌اید، و در نهایت Web App Manifest را اضافه کرده‌اید تا نحوه عملکرد آن را هنگام «نصب» روی دستگاه کاربر توضیح دهید. این شامل مواردی مانند نمادهای با وضوح بالا برای استفاده برای مثال راه‌انداز یا تعویض‌کننده برنامه تلفن همراه، یا نحوه شروع برنامه وب شما هنگام باز شدن از صفحه اصلی کاربر است.

و در حالی که بسیاری از مرورگرها به مانیفست برنامه وب احترام می گذارند، هر مرورگر به هر مقداری که شما مشخص می کنید بارگذاری یا احترام نمی گذارد. PWACompat را وارد کنید، کتابخانه‌ای که مانیفست برنامه وب شما را می‌گیرد و به‌طور خودکار تگ‌های meta یا link مربوطه را برای نمادهای با اندازه‌های مختلف، فاویکون، حالت راه‌اندازی، رنگ‌ها و غیره درج می‌کند.

PWACompat یک مانیفست برنامه وب را می گیرد و تگ های متا، پیوند و غیره استاندارد و غیر استاندارد را اضافه می کند.

این بدان معناست که دیگر نیازی به اضافه کردن تگ های بی شمار، استاندارد و غیر استاندارد (مانند <link rel="icon" ... /> یا <meta name="orientation" ... /> ) به صفحات خود ندارید. و برای برنامه‌های صفحه اصلی iOS، PWACompat حتی به صورت پویا صفحه‌های اسپلش ایجاد می‌کند، بنابراین شما مجبور نیستید برای هر اندازه صفحه‌نمایش متفاوت، یکی بسازید.

صفحه نمایش اسپلش iOS برای Emojityper، تولید شده توسط 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" />

برای اطلاعات بیشتر، بهترین شیوه ها را ببینید.

توجه: همچنین، بارگذاری کتابخانه را بعد از بسته اصلی خود با یک استمنت import() پویا در پلتفرم هایی که برای شما مهم هستند، در نظر بگیرید. در حالی که داشتن صفحه نمایش اسپلش عالی است، اما آنها به اندازه بقیه کدهای سایت شما مهم نیستند!

<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 بقیه موارد را مدیریت کند.

📢🤣🎉