UTILS.
۱۰۰٪ در مرورگر
📱

سازنده Web App Manifest (PWA)

یک web app manifest معتبر PWA (manifest.json) با آیکون، رنگ تم و حالت نمایش بسازید، به‌علاوه تگ آماده link rel=manifest.

— خروجی اینجا نمایش داده می‌شود —
— خروجی اینجا نمایش داده می‌شود —

درباره این ابزار

سازنده Web App Manifest یک manifest.json معتبر برای یک اپ وب پیش‌رونده (PWA) از یک فرم ساده می‌سازد، سپس تگ‌های HTML همراه را برای گذاشتن در <head> صفحه شما تحویل می‌دهد. همه چیز در مرورگر شما مونتاژ می‌شود و چیزی آپلود نمی‌شود — می‌توانید JSON را کپی کنید، آن را به‌صورت manifest.json دانلود کنید، یا تگ‌های link و meta را کپی کنید.

یک web app manifest همان فایل JSON است که به یک سایت اجازه می‌دهد روی صفحه اصلی نصب و مانند یک اپ بومی راه‌اندازی شود. این ابزار کلیدهای استاندارد را مونتاژ می‌کند — name، short_name، description، start_url، scope، display (standalone، fullscreen، minimal-ui یا browser)، orientation، theme_color، background_color و یک آرایه icons — و هر فیلدی که خالی بگذارید را حذف می‌کند تا خروجی تمیز بماند. هر اندازه آیکونی که تیک بزنید به یک ورودی با src، sizes و type (مشتق‌شده از پسوند فایل) تبدیل می‌شود، و purpose اختیاری به شما اجازه می‌دهد آیکون‌ها را maskable علامت بزنید. نتیجه با JSON.stringify با تورفتگی دو-فاصله سریال‌سازی می‌شود، پس خوانا برای انسان و مطابق استاندارد است.

از جانگهدار {size} در مسیر آیکون استفاده کنید (برای مثال /icons/icon-{size}.png) تا با هر بُعد مانند 192x192 و 512x512 جایگزین شود. یک manifest باید حداقل شامل یک name، یک start_url، یک حالت display و دست‌کم یک آیکون 192px و یک 512px باشد، که پیش‌فرض‌های اینجا هستند. با تگ تولیدشده <link rel="manifest"> به آن از صفحه خود ارجاع دهید و meta رنگ تم را برای رابط کاربری مرورگر اضافه کنید.

پرسش‌های پرتکرار

web app manifest چیست؟
این یک فایل JSON است که اپ وب پیش‌رونده شما را توصیف می‌کند — نام، آیکون‌ها، رنگ‌ها و نحوه راه‌اندازی آن — تا مرورگرها بتوانند نصب آن روی صفحه اصلی و باز کردن آن در پنجره‌ای اپ‌مانند را پیشنهاد دهند.
کدام فیلدها الزامی‌اند؟
یک manifest مفید دست‌کم به name (یا short_name)، یک start_url، یک حالت display و آیکون‌های 192x192 و 512x512 نیاز دارد. این سازنده آن‌ها را به‌طور پیش‌فرض پر می‌کند؛ سایر فیلدها اختیاری‌اند و وقتی خالی گذاشته شوند حذف می‌شوند.
«maskable» برای آیکون‌ها چه معنایی دارد؟
آیکون‌های maskable حاشیه امن دارند تا پلتفرم‌ها بتوانند آن‌ها را بدون بریدن لوگو به دایره، مربع‌گرد یا مربع گردشده برش دهند. purpose را برای آیکون‌هایی که با آن ناحیه امن طراحی شده‌اند روی 'maskable' یا 'any maskable' بگذارید.
چطور manifest را روی سایت خود نصب کنم؟
JSON را به‌صورت manifest.json ذخیره کنید، آن را روی سایت خود آپلود کنید، سپس تگ‌های تولیدشده <link rel="manifest" href="/manifest.json"> و meta رنگ تم را به <head> هر صفحه اضافه کنید.

ابزارهای بیشتر