Manifest.json چند زبانه برای انجمن PWA – DEV

Summarize this content to 400 words in Persian Lang
این دوازدهمین نوشتن من در سایت dev.to است. من یک راه حل برای manifest.json برای برنامه PWA چند زبانه بدون اقدامات سمت سرور دارم.

PWA، manifest.json

برنامه های کاربردی PWA صفحات وب هستند که می توانند بر روی دستگاه هایی مانند تلفن همراه یا تبلت نصب شوند. یک PWA شامل یک فایل manifest.json است که حاوی اطلاعات ضروری برای نصب موفقیت آمیز در یک سیستم عامل (مانند Android، iOS) است. برخی از موارد اجباری هستند، در حالی که برخی دیگر اختیاری هستند. یک منبع خوب اطلاعات https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json است.

در روزهای اخیر، من روی برنامه ای کار می کنم که به هفت زبان (انگلیسی، چک و غیره) بومی سازی شده است. این برنامه شامل تشخیص خودکار زبان دستگاه است و همچنین گزینه ای برای تغییر نسخه زبان به صورت دستی ارائه می دهد. با این حال، مشکل مربوط به فایل manifest.json است، زیرا از نسخه های زبان پشتیبانی نمی کند.

یکی از راه حل ها استفاده از تشخیص زبان گزارش شده توسط مرورگر در سمت سرور برای ایجاد یا تزریق پویا manifest.json به صفحه HTML مطابق با زبان است. راه حل من برای میزبانی استاتیک در نظر گرفته شده است و نیازی به عملکردهای سمت سرور ندارد.

من از ایده ها و روش های شرح داده شده در این مقاله استفاده کرده ام: https://blog.omaralshaker.com/2018/01/16/how-to-setup-your-web-app-manifest-dynamically-using-javascript/

برای هر یک از زبان های پشتیبانی شده در برنامه من، یک فایل manifest.json جداگانه ایجاد کرده ام. نسخه های زبان فردی فقط در زبان متفاوت است “name” و “short_name” برای مثال، کلیدها و پیشوند در نام فایل، en-manifest.json، cs-manifest.json، و غیره.

بخشی از کد HTML در هدر صفحه شامل بدون href صفت. پس از بارگذاری کد برنامه، کد JS اجرا می شود که شامل تشخیص زبان دستگاه می شود. کد زبان در متغیر ذخیره می شود languageو بر اساس مقدار آن، URL برای فایل manifest.json مورد نظر در href صفت.

در اینجا کد JS است که این کار را انجام می دهد.

var manifestUrl = “”;

if (language == “cs”){
manifestUrl = “/cs-manifest.json”
};

if (language == “sk”){
manifestUrl = “/sk-manifest.json”
};

if (language == “pl”){
manifestUrl = “/pl-manifest.json”
};

if (language == “de”)
manifestUrl = “/de-manifest.json”
};

if (language == “sr”){
manifestUrl = “/sr-manifest.json”
};

if (language == “uk”){
manifestUrl = “/uk-manifest.json”
};

if (!manifestUrl) manifestUrl = “/en-manifest.json”;

document.querySelector(‘#manifest-placeholder’).setAttribute(‘href’, manifestUrl);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

من از این راه حل در برنامه ای استفاده کردم که می توانید اندازه های بدن و اندازه لباس خود را ذخیره کنید. به این ترتیب، هنگام خرید، لازم نیست به یاد داشته باشید که آیا به شلوار W32 L30 نیاز دارید یا برعکس. برنامه در دسترس است: https://clothing-sizes.replit.app

کد نویسی مبارک! 🙂

var manifestUrl = "";

if (language == "cs"){
  manifestUrl = "/cs-manifest.json"
};

if (language == "sk"){
  manifestUrl = "/sk-manifest.json"
};

if (language == "pl"){
  manifestUrl = "/pl-manifest.json"
};

if (language == "de")
  manifestUrl = "/de-manifest.json"
};

if (language == "sr"){
  manifestUrl = "/sr-manifest.json"
};

if (language == "uk"){
 manifestUrl = "/uk-manifest.json"
};

if (!manifestUrl) manifestUrl = "/en-manifest.json";

document.querySelector('#manifest-placeholder').setAttribute('href', manifestUrl);