برنامه های وب پیشرو دسکتاپ

برنامه‌های وب پیش‌رونده دسکتاپ (PWA) یک روش عالی چند پلتفرمی و چند مرورگری برای ساخت برنامه‌هایی با مدل امنیتی هستند که ایمنی و حریم خصوصی کاربر را در مرکز توجه قرار می‌دهند و با قابلیت اتصال ذاتی وب، اشتراک‌گذاری داخلی را فراهم می‌کنند. برنامه‌های وب جدید بسازید یا برنامه‌های وب موجود خود را با APIهای مدرن ارتقا دهید تا به آنها قابلیت‌هایی مانند برنامه‌های دسکتاپ، قابلیت اطمینان و قابلیت نصب بدهید. PWAها بهترین راه برای ارائه برنامه وب شما برای ChromeOS هستند.

در ChromeOS، قدرت پلتفرم وب در مرکز توجه قرار دارد؛ برنامه‌های وب یکی از ویژگی‌های اصلی پلتفرم هستند. PWA های نصب شده در لانچر ChromeOS نمایش داده می‌شوند، می‌توانند به قفسه پین ​​شوند و عمیقاً با بقیه سیستم عامل ادغام شوند.

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

قابل نصب کردنش

یکی از مزایای بزرگ PWAها نسبت به برنامه‌های وب معمولی، قابلیت نصب آنها، درست مانند برنامه‌های دسکتاپ سنتی است. مسیر برنامه وب پیش‌رونده در web.dev بخشی دارد که به قابل نصب کردن PWA شما اختصاص داده شده است؛ از آن برای شروع استفاده کنید. برای اینکه یک PWA به عنوان قابل نصب در ChromeOS شناسایی شود، باید معیارهای زیر رعایت شود که می‌توان با استفاده از حسابرسی قابل نصب Lighthouse آن را بررسی کرد:

• باید یک مانیفست برنامه وب معتبر داشته باشد
• باید معیارهای نصب کروم را داشته باشد
  • برای PWAها در ChromeOS، یک اعلان نصب در نوار ابزار نمایش داده می‌شود، بدون اینکه آستانه اکتشافی تعامل کاربر رعایت شده باشد.

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

با نصب PWA شما، اکنون در سراسر ChromeOS، از لانچر گرفته تا قفسه، نمایش داده می‌شود. نصب PWA شما همچنین قابلیت‌های اضافی را برای درخشش واقعی برنامه شما فراهم می‌کند.

نکته‌ای در مورد کار آفلاین

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

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

اگر می‌خواهید تجربه قوی‌تری ارائه دهید، علاوه بر API ذخیره‌سازی کش ، می‌توانید از ویژگی‌هایی مانند IndexedDB برای ذخیره‌سازی NoSQL درون مرورگر و همگام‌سازی پس‌زمینه استفاده کنید تا به کاربران اجازه دهید در حالت آفلاین اقداماتی انجام دهند و ارتباط با سرور را تا زمانی که کاربر دوباره اتصال پایدار برقرار کند، به تعویق بیندازید. همچنین می‌توانید الگوهایی مانند جلسات امن و طولانی‌مدت را پیاده‌سازی کنید تا کاربران احراز هویت شوند و صفحات اسکلت‌بندی شده را پیاده‌سازی کنید تا به سرعت به کاربران اطلاع دهید که در حال بارگذاری محتوایی هستید که در صورت نیاز می‌تواند به محتوای کش شده یا یک نشانگر آفلاین بازگردد.

آن را قابل لمس کنید

تقریباً همه دستگاه‌های ChromeOS از لمس پشتیبانی می‌کنند و بسیاری از آنها از قلم‌های استایلوس نیز پشتیبانی می‌کنند، بنابراین باید مطمئن شوید که برنامه شما علاوه بر صفحه کلید و ماوس معمولی، با هر دو ورودی به طور یکپارچه کار می‌کند. API رویدادهای اشاره‌گر به طور خاص برای مدیریت این موضوع طراحی شده است! برخی از رویدادهای اساسی مرتبط با اشاره‌گر، مانند رویدادهای click ، احتمالاً نیازی به تغییر آنها نخواهید داشت. رویدادهای دیگر، مانند mouseup یا touchstart ، باید به همتایان رویدادهای اشاره‌گر خود منتقل شوند تا بتوانند به طور یکپارچه در هر نوع اشاره‌گری کار کنند. در صورت تمایل، حتی می‌توانید انواع ورودی‌های مختلف را به طور جداگانه مدیریت کنید. برای برنامه‌ها و بازی‌هایی که به شدت به ورودی لمسی کاربر متکی هستند، انتقال به API رویدادهای اشاره‌گر، دنیایی از تفاوت را در دستگاه‌های ChromeOS ایجاد خواهد کرد.

طراحی روان در وب

اگر در حال ساخت برنامه‌ای هستید که کاربران با انگشتان یا قلم‌های خود طراحی می‌کنند، حفظ تأخیر بین ورودی آنها و خروجی شما به اندازه کافی سریع که روان به نظر برسد، از گذشته دشوار بوده است. هنگام ساخت این نوع برنامه‌های مبتنی بر Canvas API برای ChromeOS، توصیه می‌کنیم از desynchronized hint برای canvas.getContext() استفاده کنید تا رندر با تأخیر کم ارائه شود. برای استفاده از desynchronized hint برای یک canvas، موارد زیر را انجام دهید:

const canvas = document.createElement('canvas'); // or select one from the DOM
const ctx = canvas.getContext('2d', {
  desynchronized: true,
  // Other options here…
});

if (ctx.getContextAttributes().desynchronized) {
  // Low-latency supported! Do something awesome with it.
} else {
  // Low-latency not supported! Fall back to less awesome stuff
}

ملاحظات طراحی برای لمس

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

• بر اساس اندازه صفحه نمایش، فرضیات ورودی را انجام ندهید. در عوض، از تشخیص ویژگی ، در حالت ایده‌آل در زمان ورودی، برای تعیین نحوه پاسخ استفاده کنید. به یاد داشته باشید، در ChromeOS، کاربران می‌توانند به طور یکپارچه بین ماوس، لمس و قلم، همه در یک جلسه، جابجا شوند و این کار را انجام می‌دهند.
• مطمئن شوید که عناصری که انتظار دارید کاربر لمس کند، حداقل اندازه هدف (target size) به اندازه کافی بزرگ دارند تا عناصر اطراف به طور تصادفی لمس نشوند.
• با شناور کردن ماوس به عنوان یک پیشرفت تدریجی رفتار کنید و مطمئن شوید که تعامل می‌تواند از طریق روش‌های دیگر برای لمس و قلم (مثلاً فشار طولانی یا ضربه) انجام شود.
• کاربران لمسی انتظار دارند که بتوانند مستقیماً با عناصر روی صفحه تعامل داشته باشند، برای مثال به جای استفاده از دکمه‌های بزرگنمایی/کوچکنمایی، با نیشگون گرفتن روی نقشه‌ها بزرگنمایی کنند. افزودن حرکات لمسی رایج ، در صورت لزوم، می‌تواند به طبیعی جلوه دادن برنامه شما کمک زیادی کند.

آن را توانمند کنید

در حالی که برخی از قابلیت‌های PWA مانند Notifications API که به یک برنامه وب اجازه می‌دهد اعلان‌های پلتفرم را دریافت و منتشر کند، معمولاً شناخته شده هستند، تعدادی ویژگی جدید و در شرف ظهور وجود دارد که برای قدرتمندتر کردن برنامه‌های شما به وب می‌آیند. پروژه Chromium Web Capabilities که با نام Project Fugu 🐡 نیز شناخته می‌شود، تلاشی برای فعال کردن استانداردهای جدید و قدرتمند وب است که ویژگی‌های منحصر به فرد وب را حفظ می‌کند: امنیت کاربر محور، اصطکاک کم و سازگاری بین پلتفرمی.

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