Loading...
cnili_logo

طراحی PWA

وب اپلیکیشن پیش رونده (PWAs) یک برنامه وب است که از قابلیت نصب روی سیستم شما برخوردار بوده و حتی زمانی که به اینترنت متصل نیستید، نیز به صورت آفلاین قابل استفاده خواهد بود و از داده‌های ذخیره شده بهره می‌برد.

فناوری‌های مورد استفاده ما در طراحی و توسعه PWA

  • React
  • CSS 3
  • HTML5
  • Push Notifications
  • JavaScript
  • Firebase
طراحی وب اپلیکیشن PWA


طراحی وب اپلیکیشن پیشرونده PWA

PWA چیست؟

طراحی وب اپلیکیشن PWA که کوتاه شده عبارت Progressive Web Apps است، به اپلیکیشن‌هایی گفته می‌شود که بر خلاف طراحی اپلیکیشن و منحصر به کد نویسی و سیستم عامل‌های خاص مانند ios و android هستند. وب اپلیکیشن پیشرونده از نسخه وب سایت به صورت یک اپلیکیشن در صفحه گوشی همراه استفاده می‌کند و مخاطب را وادار به نصب اپلیکیشن نمی‌کند. این فناوری در ابتدا در سال 2015 توسط گوگل معرفی شد و با توجه به توسعه آسان مورد توجه کاربران بسیاری قرار گرفت.

مزیت‌های PWA چیست؟

  1. آپدیت خودکار PWA در وردپرس و نیاز نداشتن به آپدیت با کدنویسی
  2. واکنش‌گرا بودن PWA یعنی این فناوری روی تمام دستگاه‌ها مانند موبایل،‌ سایت، کامپیوتر و … به خوبی نمایش داده می‌شود.
  3. امکان سرویس دهی PWA با کمک Service Worker ها در صورت ضعیف بودن اینترنت
  4. خدمات PWA ها همواره با استفاده از HTTPS ارائه می‌شود تا با بکارگیری رمز گذاری، هیچ شخصی بدون مجوز مناسب قادر به ایجاد اختلال نباشد.
  5. وجود ویژگی Push Notifications در PWA
  6. امکان به اشتراک گذاری PWA از طریق URL و جستجوی آن در موتورهای جستجو
  7. سازگاری با دستگاه‌ها مختلف و برخورداری از ظاهری مانند اپلیکیشن‌های بومی
  8. قابلیت نصب PWA روی تلفن‌های همراه مانند سایر اپلیکیشن‌های Native

تفاوت اپلیکیشن‌های معمولی و وب اپلیکیشن‌های PWA

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

دلیل نیاز به وب اپلیکیشن پیش روند چیست؟

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

فناوری‌های استفاده شده در PWA

به منظور توسعه PWA از فناوری‌های مختلفی استفاده شده است که عبارتند از:

اعلان‌های سمت سرور (Push Notification)

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

سرویس ورکرها

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

معماری پوسته اپلیکیشن

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

سرویس‌های شناخته شده‌ای که PWA استفاده می‌کنند

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

 مرورگرهایی که از PWA پشتیبانی می‌کنند

به منظور اجرای PWA در گوشی‌های هوشمند دو پیش نیاز باید وجود داشته باشد. یکی مرورگر مناسب و دیگری فعال بود سرویس PWA است. به طور کلی مرورگرهایی که از PWA پشتیبانی می‌کنند، عبارتند از:

  1. مرورگرهای دسکتاپ با پشتیبانی کامل: کروم، اپرا، فایرفاکس، QQ Browser و 360 Browser
  2. مرورگرهای دسکتاپ با پشتیبانی کمتر: مایکروسافت اج و سفری
  3. مرورگرهای موبایل همراه با پشتیبانی کامل: شیائومی، بایدو، کروم، فایرفاکس، وی چت، UC Browser، Sogou، مرورگر 360 Browser و Quark
  4. مرورگرهای موبایل با پشتیبانی کم: سامسونگ و QQ Browser

آیا PWA جایگزین اپلیکیشن‌های بومی می‌شود؟

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



خدمات مرتبط