توانایی ها

برنامه‌های وب پیشرو می‌توانند بیشتر از نمایش محتوا روی صفحه یا اتصال به سرویس‌های وب انجام دهند. PWA ها می توانند با فایل های سیستم فایل سروکار داشته باشند، می توانند با کلیپ بورد سیستم تعامل داشته باشند، می توانند به سخت افزار متصل به دستگاه و موارد دیگر دسترسی داشته باشند. هر Web API برای PWA شما در دسترس است و برخی از API های اضافی در هنگام نصب برنامه شما در دسترس هستند.

می‌توانید از What Web Can Do Today استفاده کنید تا بدانید در هر پلتفرم چه چیزی ممکن است. برای APIها یا قابلیت‌های جداگانه، می‌توانید از Can I Use یا جداول سازگاری مرورگر در MDN استفاده کنید.

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

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

این بدان معنی است که شما باید برنامه خود را در لایه هایی توسعه دهید که ممکن است در هر دستگاهی در دسترس نباشد و قبل از استفاده، در دسترس بودن را بررسی کنید.

باید قبل از استفاده از جاوا اسکریپت بررسی کنید که آیا یک API وجود دارد یا نه از یک API بپرسید که آیا سرویسی در آن دستگاه خاص موجود است یا خیر.

وب قدرتمند

وب امروز فوق العاده قدرتمند است. مثلا:

  • می توانید یک برنامه چت تصویری هایپرمحلی با WebRTC، موقعیت جغرافیایی و پیام های فشاری بسازید.
  • می توانید یک برنامه را قابل نصب کنید.
  • با WebAssembly می توانید جلوه های ویدیویی اضافه کنید.
  • حتی می توانید با WebGL و WebXR آن را به واقعیت مجازی وارد کنید.

توانمندسازی PWA شما

بیایید APIهای قابلیت های PWA را به چهار گروه تقسیم کنیم:

  • سبز: APIهای موجود در هر مرورگر در هر پلتفرم، در صورت امکان فنی. اکثر آنها سال هاست که ارسال شده اند، بالغ به حساب می آیند و می توانید با خیال راحت از آنها استفاده کنید. یک نمونه API از این گروه، API مکان جغرافیایی است.
  • سبز روشن: APIها فقط در برخی از مرورگرها در دسترس هستند. با توجه به عدم پشتیبانی در برخی از پلتفرم ها، آنها در زیرگروه پشتیبانی شده مرورگرها به بلوغ رسیدند تا بتوانید با اطمینان از این قابلیت در آنها استفاده کنید. نمونه API از این گروه WebUSB است.
  • زرد: APIهای آزمایشی. این APIها هنوز بالغ نشده اند. آنها فقط در برخی از مرورگرها و در آزمایش یا آزمایش در دسترس هستند. ما در مورد این قابلیت ها در فصل تجربی صحبت کردیم.
  • قرمز: گروهی برای APIهایی که نمی‌توانید در PWA از آن‌ها استفاده کنید، و برنامه‌هایی که برای اضافه کردن آن‌ها هنوز بلندمدت است. یک نمونه API از این گروه geofencing است.

قابلیت های سبز

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

مبانی

  • ذخیره فایل‌ها به صورت محلی با استفاده از Cache API، همانطور که در فصل Caching مشاهده می‌شود.
  • همانطور که در فصل مدیریت پیچیدگی دیدیم، اجرای وظایف در رشته ها با استفاده از وب کارگرها.
  • مدیریت درخواست های شبکه با استراتژی های مختلف در یک سرویس دهنده، همانطور که در فصل Service Workers مشاهده می شود.
  • بوم 2 بعدی برای رندر کردن گرافیک های دو بعدی روی صفحه با استفاده از Canvas API .
  • بوم دوبعدی و سه بعدی با کارایی بالا یا WebGL برای ارائه گرافیک سه بعدی.
  • WebAssembly یا WASM برای اجرای کدهای کامپایل شده سطح پایین برای عملکرد.
  • ارتباط بلادرنگ با استفاده از WebRTC API .
  • APIهای عملکرد وب برای اندازه گیری و کمک به ارائه تجربه بهتر. برای اطلاعات بیشتر به راهنمای Performance API مراجعه کنید.
  • همانطور که در فصل داده های آفلاین دیده می شود ، داده ها را به صورت محلی با IndexedDB و مدیریت ذخیره سازی ذخیره کنید تا سهمیه را درخواست کنید و ذخیره سازی دائمی را درخواست کنید.
  • صدای سطح پایین به لطف Web Audio API .
  • تشخیص پیش زمینه با استفاده از API مشاهده صفحه .
  • ارتباط شبکه با استفاده از Fetch API و WebSocket API .

سخت افزار و سنسور

  • موقعیت جغرافیایی مکان کاربر را از طریق ارائه دهندگان مختلف، مانند ماهواره یا Wi-Fi از طریق API جغرافیایی به دست می آورد.
  • دوربین و میکروفون با استفاده از رابط دستگاه های رسانه ، جریان های رسانه ای را از دوربین ها و میکروفون ها دریافت می کنند.
  • حسگرها با استفاده از Sensors API یا رابط‌های قدیمی‌تر، مانند DeviceMotionEvent و DeviceOrientationEvent ، اطلاعات بلادرنگ را از شتاب‌سنج، ژیروسکوپ، مغناطیس‌سنج و سایر موارد جمع‌آوری می‌کنند. در سافاری، برای استفاده از آنها باید از یک درخواست گفتگوی مجوز غیر استاندارد استفاده کنید.
  • به لطف رویدادهای اشاره گر و رویدادهای لمسی ، اطلاعات مربوط به تمام لمس‌ها و کلیک‌های مبتنی بر اشاره‌گر را که با انگشت، ماوس، صفحه لمسی یا قلم انجام می‌دهید، لمس کنید و نشانگر را مشاهده کنید .
  • دسته‌های بازی برای خواندن اطلاعات دریافتی از گیم‌پدهای استاندارد و جوی استیک‌های متصل به دستگاه با استفاده از Gamepad API .
  • احراز هویت بیومتریک (مانند تشخیص چهره یا اثر انگشت) با استفاده از Web Authentication یا WebAuthn .

یکپارچه سازی سیستم عامل

  • به لطف Web Speech API ، ترکیب گفتار و تشخیص صدا از صداهای نصب شده پلت فرم برای صحبت با کاربر و تشخیص آنچه کاربر می گوید استفاده می کند.
  • به لطف Web Share API ، همانطور که در فصل ادغام سیستم عامل خواهیم دید، محتوای PWA خود را با سایر برنامه ها و مکان های دستگاه به اشتراک بگذارید .
  • همانطور که در فصل یکپارچه سازی سیستم عامل نشان دادم، به لطف API کلیپ بورد، برای ذخیره و بازیابی محتوا از کلیپ بورد در قالب های مختلف، به کلیپ بورد دسترسی داشته باشید .
  • اطلاعات کاربری و گذرواژه‌های کاربر را با استفاده از Credential Management API مدیریت کنید.
  • پخش ویدیوی تصویر در تصویر را در سیستم عامل با استفاده از API تصویر در تصویر فعال کنید.
  • همانطور که در فصل ویندوز نشان دادم، به لطف API تمام صفحه ، محتوا را به صورت تمام صفحه نمایش دهید .

قابلیت های سبز روشن

در اینجا لیستی از مهم ترین قابلیت هایی که می توانید در PWA خود استفاده کنید آورده شده است، با این احتیاط که ممکن است در هر مرورگری در دسترس نباشد.

اصول اولیه

  • WebGL 2.0 ، نسخه جدید مشخصات WebGL برای مطابقت با OpenGL 3.0.
  • کدک‌ها ، دسترسی سطح پایین به فریم‌های مجزای یک جریان ویدیویی و تکه‌های صوتی؛ مفید برای برنامه های کاربردی وب که نیاز به کنترل کامل بر نحوه پردازش رسانه از طریق Web Codecs API دارند.

سخت افزار و سنسور

  • Ambient Light ، علاوه بر Sensors API ، سطح نور فعلی یا روشنایی نور محیط اطراف دستگاه را می خواند.
  • لرزش به کاربر بازخورد لمسی می دهد وقتی اتفاقی می افتد، اگر دستگاه از آن پشتیبانی کند، از طریق Vibration API .
  • رسانه ضبط، داده های تولید شده توسط یک شی MediaStream یا HTMLMediaElement (مانند تگ <video> ) را برای تجزیه و تحلیل، پردازش یا ذخیره در دیسک، به لطف MediaRecorder API می گیرد.
  • اعمال wake Lock روی صفحه نمایش از کم‌نور شدن دستگاه یا قفل شدن صفحه در زمانی که PWA شما نیاز به ادامه کار دارد، با استفاده از Screen Wake Lock API جلوگیری می‌کند.
  • واقعیت مجازی به لطف WebXR Device API شما را قادر می سازد از هدست و سایر دستگاه ها در PWA خود استفاده کنید.
  • واقعیت افزوده را می‌توان به روش‌های مختلفی در PWA به دست آورد، مانند استفاده از WebXR Device API یا برنامه Safari Quick Look برای محتوای AR .
  • کاربران غیرفعال را با Idle Detection API شناسایی کنید.
  • قفل جهت‌گیری جهت‌گیری را در حالت عمودی یا افقی قفل می‌کند، در حالی که PWA روی صفحه است، به لطف Screen Orientation API یا ویژگی orientation مانیفست Web App برای برنامه‌های نصب‌شده.
  • به لطف Presentation API ، محتوا را روی پروژکتورها و نمایشگرهای ثانویه ارائه دهید .
  • به لطف Pointer Lock API ، نشانگر را قفل کنید تا اطلاعات حرکت دلتا را از نشانگرها (موش‌ها، پدهای لمسی و اشاره‌گرها) به جای مقادیر موقعیت (که برای برخی بازی‌ها مفید است) دریافت کنید.

یکپارچه سازی سیستم عامل

  • همانطور که در فصل یکپارچه سازی سیستم عامل مشاهده کردید، به لطف File System Access API فایل ها را روی دستگاه بخوانید و بنویسید .
  • همانطور که در فصل یکپارچه سازی سیستم عامل نشان دادم، به لطف Web Share Target ، از برنامه های دیگر محتوا دریافت کنید .
  • همانطور که در فصل یکپارچه سازی سیستم عامل نشان داده شده است، داده های تماس را با استفاده از Contact Picker API دریافت کنید.
  • به لطف API همگام‌سازی پس‌زمینه ، در حالی که PWA استفاده نمی‌شود، در پس‌زمینه همگام‌سازی کنید .
  • به لطف Web Periodic Background Synchronization API ، زمان‌بندی کار در زمانی که PWA در حال استفاده نیست.
  • اعلان‌ها را با استفاده از Web Push و Web Notifications API ارسال کنید.
  • به لطف Background Fetch API در حالی که کاربر از PWA شما استفاده نمی کند، فایل ها را در پس زمینه انتقال دهید .
  • پخش رسانه خود را با سیستم عامل با استفاده از Media Session API ادغام کنید.
  • به لطف API درخواست پرداخت ، پرداخت ها را در PWA خود مدیریت کنید . اپل همچنین یک کتابخانه Apple Pay JS را در بالای API درخواست پرداخت ارائه می دهد.
  • وضعیت شبکه را پرس و جو کنید ، مانند نوع اتصال (4G، WiFi) و پرچم ذخیره داده با استفاده از API اطلاعات شبکه .
  • با استفاده از Screen Capture API، از صفحه کاربر برای ارسال صفحه یا اشتراک‌گذاری صفحه عکس بگیرید .
  • با استفاده از آشکارسازهای شتاب‌دهنده سخت‌افزاری روی دستگاه، از جمله بارکدها (چهره‌های انسانی و OCR نوشتاری هنوز در حال توسعه هستند) اشکال را با استفاده از Shape Detection API شناسایی کنید .
  • با استفاده از رابط حافظه دستگاه، حافظه دستگاه را جستجو کنید .
  • گذرواژه های یکبار مصرف از طریق پیامک به شما امکان می دهند به طور خودکار یک کد از طریق پیامک ارسال شده از سرور خود با استفاده از WebOTP API دریافت کنید. سافاری یک زیر مجموعه راه حل را بر اساس عنصر <input> پیاده سازی می کند. اطلاعات بیشتر در مورد آن را در وبلاگ WebKit بخوانید.
  • صفحه‌کلید مجازی را که در صفحه‌نمایش دستگاه‌های تلفن همراه ظاهر می‌شود با استفاده از Virtual Keyboard API مدیریت کنید.

منابع