بهبودها

پیشرفت های زیادی وجود دارد که می تواند تبدیل و استفاده از PWA شما را بهبود بخشد.

میانبرهای برنامه

میانبرهای برنامه یک لیست ثابت از پیوندهای عمیق به PWA شما هستند که در مانیفست شما نوشته شده اند. مشخصات مانیفست برنامه وب این به شما امکان می دهد لیستی از میانبرها را برای بخش ها یا ویژگی های مختلف در PWA خود تعریف کنید، آنها ناوبری را به بخش هایی که اغلب به آنها دسترسی دارید سرعت می بخشد.

میانبرهای برنامه در اکثر سیستم عامل های دسکتاپ و اندروید با WebAPK در دسترس هستند و مانند تصویر زیر در منوی متنی روی نماد برنامه در صفحه اصلی، داک یا نوار وظیفه ظاهر می شوند:

میانبرهای برنامه در اندروید و macOS.

برای دسترسی به این منو، کاربران باید روی نماد PWA کلیک راست کرده یا طولانی فشار دهند.

میانبرها در عضو shortcuts مانیفست تعریف می شوند. آرایه ای از اعضا با ویژگی های زیر را می گیرد:

name
متنی که معمولاً در یک منوی زمینه به کاربر نشان داده می شود.
url
URL که PWA باید زمانی که کاربر آن را از این میانبر شروع می کند بارگیری کند. این باید یک URL در محدوده PWA شما باشد و باید به ویژگی که name یا short_name توصیف می‌کند پیوند عمیق داشته باشد.
short_name
(اختیاری) نام کوتاه تری که در مواقعی که فضای کافی برای نمایش مقدار کامل فیلد name وجود ندارد استفاده می شود.
description
(اختیاری) شرح کاری که این میانبر انجام خواهد داد
icons
(اختیاری) آرایه ای از اشیاء نماد با src ، type ، sizes ، و فیلدهای purpose اختیاری، که توصیف می کند چه تصاویری باید نشان دهنده میانبر باشند.

شما باید میانبرهای برنامه را به عنوان بهترین توانایی در نظر بگیرید. این بدان معناست که نمی‌توانید برای نمایش مداوم به این میان‌برها اعتماد کنید، و حتی اگر ظاهر شوند، نمی‌دانید چند میانبر ظاهر می‌شوند یا اینکه آیا پلتفرم به صلاحدید مرورگرها، نمادها را نادیده می‌گیرد. بحث کامل در هر پلتفرم خارج از محدوده است، اما در زیر شما ایده ای از نحوه عملکرد آن در اندروید و دسکتاپ دارید. بهترین راه برای مقابله با این عدم قطعیت، سفارش دادن اقلام بر اساس اولویت است.

نمونه کد زیر میانبرهای مختلف برنامه را تعریف می کند که اگر برنامه را در Android با Chrome یا روی دسکتاپ با Edge یا Chrome نصب کنید، می توانید آنها را امتحان کنید.

iOS و iPadOS

هنگام انتشار PWA ها، برخی پیشرفت ها وجود دارد که می تواند تجربه را برای کاربران در Safari در iOS/iPadOS بهبود بخشد.

نمایشگرهای آب پاش

همانطور که در فصل مانیفست برنامه وب مشاهده می‌شود، Android به‌طور خودکار بر اساس مقادیر مانیفست، صفحه‌های اسپلش ایجاد می‌کند. این مورد برای iOS و iPadOS نیست. در این دستگاه‌ها، شما باید صفحات splash را در HTML به عنوان تصاویر ثابت با استفاده از عناصر <link> تعریف کنید.

این تصاویر به عنوان تصاویر راه اندازی در دستگاه های اپل شناخته می شوند و از ویژگی rel با مقدار apple-touch-startup-image استفاده می کنند، مانند:

<link rel="apple-touch-startup-image" href="ios-startup.png">

چالش این است که تصویر راه‌اندازی باید دقیقاً اندازه پنجره‌ای داشته باشد که PWA شما هنگام باز شدن خواهد داشت. بنابراین، دستگاه‌های iOS و iPadOS مختلف به تصاویر متفاوتی نیاز دارند. موقعیت‌های بیشتری باید در iPad پوشش داده شوند، مانند دهانه‌های افقی/عمودی و رندر کردن PWA در حالت چند وظیفه‌ای (مانند ۱/۳، ۱/۲، یا ۲/۳ صفحه).

می‌توانید فهرست به‌روزرسانی‌شده‌ای از اندازه‌های صفحه iOS و iPadOS را در دستورالعمل‌های رابط انسانی اپل بررسی کنید

نسخه‌های مختلف تصویر راه‌اندازی را می‌توان با یک درخواست رسانه در داخل ویژگی media تنظیم کرد:

<link rel="apple-touch-startup-image" href="ios-startup.png"
      media="orientation: portrait">
<link rel="apple-touch-startup-image" href="ios-startup-landscape.png"
      media="orientation: landscape">

الگوهای طراحی برای تصاویر راه اندازی iOS

تعریف تصاویر راه اندازی کار سختی است، بنابراین ما چند ابزار برای تولید و پیکربندی خودکار داریم:

  • تولید استاتیک با سیستم ساخت شما یکپارچه می شود، تمام تصاویر ثابت PNG را ایجاد می کند و کد HTML را با عناصر <link> به شما می دهد تا به سند شما تزریق شود. PWA Asset Generator نمونه ای از چنین ابزاری است.
  • مولد سمت کلاینت، یک ابزار جاوا اسکریپت که می تواند یک یا چند نسخه پایه 64 از تصویر راه اندازی را در عناصر تزریق شده <link> بر اساس نوع و اندازه صفحه نمایش دستگاه فعلی جاسازی کند. می توانید از یک بوم درون حافظه استفاده کنید، تصویر را رندر کنید و آن را به یک data: URI با یک فایل PNG. کتابخانه PWA Compat یک کتابخانه آسان برای استفاده در سمت سرویس گیرنده است که این کار را با شبیه سازی صفحه راه اندازی معمولی اندروید انجام می دهد.

تشخیص PWA در سیستم عامل های موبایل اپل

در حالی که شما باید از ارتقای پیشرفته و تشخیص ویژگی در PWA خود استفاده کنید، ممکن است برخی موارد لبه وجود داشته باشد که در آن باید بدانیم آیا کاربر در یک PWA در پلتفرم‌های موبایل اپل است، مانند زمانی که می‌خواهید دستورالعمل‌های نصب را ارائه دهید یا پیوندهایی به پلتفرم اضافه کنید. -برنامه های خاص که فقط برای iOS هستند.

برای جلوگیری از خواندن رشته عامل کاربر، ویژگی standalone شی navigator را بررسی کنید. این یک ویژگی غیر استاندارد است و فقط در موتور WebKit در iOS و iPadOS در دسترس است.

  • اگر navigator.standalone undefined باشد، به این معنی است که کاربر از دستگاه iPadOS یا iOS استفاده نمی کند.
  • اگر navigator.standalone false باشد به این معنی است که کاربر PWA را در مرورگر باز کرده و در آنجا از آن استفاده می کند.
  • اگر navigator.standalone true باشد به این معنی است که کاربر PWA را از صفحه اصلی باز کرده و تجربه PWA مستقل را دریافت می کند.

پشتیبانی تمام صفحه

در Safari در iOS و iPad، فقط display: standalone به عنوان یک حالت نمایش برای نماد PWA شما پشتیبانی می‌شود. در حالی که display: fullscreen مانند دستگاه های Android پشتیبانی نمی شود، می توان از یک متا تگ غیر استاندارد استفاده کرد تا PWA خود را وارد حالت تمام صفحه کنید.

در تصویر بعدی، می‌توانید در سمت چپ یک طرح مستقل پیش‌فرض با رنگ تم، و در سمت راست یک PWA با حالت تمام صفحه iOS را ببینید که به شما امکان می‌دهد محتوا را در پشت نوار وضعیت رندر کنید.

یک رفتار پیش فرض مستقل (چپ) و یک صفحه نمایش تمام صفحه iOS (راست).

اگر تگ زیر را در HTML خود اضافه کنید PWA شما در iOS و iPadOS وارد حالت تمام صفحه می شود، اما با اندروید متفاوت است.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

در این حالت، نوار وضعیت دستگاه (بالایی که نمادهای ساعت، سطح باتری و اعلان را می‌بینید) همچنان قابل مشاهده است اما در بالای محتوای شما با پس‌زمینه شفاف رندر می‌شود.

هنگام استفاده از این حالت، مراقب طراحی خود باشید زیرا سیستم عامل همیشه آیکون ها را به رنگ سفید نمایش می دهد، بنابراین همیشه باید پس زمینه های بالای صفحه را با محتوای سبک تضاد کنید. همچنین، مهم است که از متغیرهای محیطی CSS برای ارائه محتوا در منطقه امن استفاده کنید، همانطور که در فصل طراحی برنامه مشاهده می‌شود.

0px بالایی نمایپورت شما به طور پیش فرض زیر نوار وضعیت قرار دارد. اگر یک متا تگ مشکی شفاف اضافه کنید، 0 پیکسل بالای نمای شما با بالای فیزیکی صفحه مطابقت دارد.

قابلیت اطمینان نصب

Safari در iOS و iPadOS قبل از نسخه 15.4 تنها زمانی فایل مانیفست را از شبکه بارگیری می‌کند که کاربر برگه اشتراک‌گذاری را - با استفاده از نماد اشتراک‌گذاری در مرورگر- باز می‌کند و نه زمانی که صفحه بارگیری می‌شود. بنابراین، سافاری تا آن لحظه بررسی نمی‌کند که آیا وب‌سایت شما PWA است یا خیر، که می‌تواند منجر به موقعیت‌هایی شود که مانیفست بارگیری نمی‌شود یا زمان زیادی می‌برد و سافاری آن را نادیده می‌گیرد.

هنگامی که Safari نمی تواند مانیفست را به موقع بارگیری کند، با فشار دادن "افزودن به صفحه اصلی" یک نماد در صفحه اصلی قرار می گیرد، اما تجربه برنامه را ارائه نمی دهد. این فقط یک میانبر برای یک برگه سافاری خواهد بود.

منابع