PWA چیست ؟

PWA چیست؟ برنامه های کاربردی وب برای مبتدیان

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

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

اپلیکیشنهای  کاربردی وب پیش رونده یا PWA ، برنامه هایی هستند که با فناوری های وب ساخته شده اند و همه ما آنها را می شناسیم ، مانند HTML ، CSS و JavaScript. اما آنها احساس و عملکرد یک برنامه واقعی بومی (native) را دارند.

یک دقیقه صبر کن! برنامه های بومی  (native)، این به چه معناست؟

Native App یک نرم افزار کاربردی است که با یک زبان برنامه نویسی خاص برای یک پلت فرم یا دستگاه خاص ، IOS یا Android ساخته شده است.

PWA ها همچنین بر اساس API های مدرن ساخته شده و تقویت شده اند تا قابلیت های بهبود یافته را همراه با قابلیت اطمینان و قابلیت نصب بر روی هر دستگاه ارائه دهند.

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

PWA ها اخیراً محبوبیت زیادی پیدا کرده اند. بسیاری از سایت های شرکت های بزرگ PWA هستند – به عنوان مثال ، به twitter.com نگاه کنید ، یکی از پلتفرم های رسانه های اجتماعی که بسیار مورد استفاده قرار می گیرد.

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

اجرای آن با تلفن IOS یا Android هیچ تفاوتی ندارد – تنها کاری که باید انجام دهید ورود به سیستم است و آماده استفاده از آن .

نمونه های دیگری از شرکت هایی که از PWA استفاده می کنند عبارتند از:

• Starbucks
• Pinterest
• Uber
• Jumia (Africa’s leading e-commerce website)
• Flipboard
• Spotify

و خیلی بیشتر.

این اپلیکیشن ها در واقع روی صفحه اصلی شما قابل نصب هستند و تجربه و ویژگی های قابل مقایسه ای را با اپلیکیشن های بومی خود ارائه می دهند.

چه چیزهایی باعث محبوبیت pwa شده است

آنها به اندازه هر صفحه نمایشی ریسپانسیو هستند

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

آنها به راحتی قابل نصب هستند

کاربرانی که برنامه ها را نصب می کنند تمایل بیشتری برای تعامل با آنها دارند. با نصب PWA ها به آنها ظاهر ، احساس و رفتار یک برنامه وب معمولی را می دهد.

آنها یک تجربه آفلاین سفارشی را ارائه می دهند

وقتی یک کاربر آفلاین است ، نگه داشتن او در برنامه شما یک تجربه سازگارتر از بازگشت به صفحه پیش فرض آفلاین را ارائه می دهد.

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

آنها از طریق جستجو قابل کشف هستند

وب به ما کمک می کند تا سایت ها و برنامه ها را از طریق موتورهای جستجو مانند Google پیدا کنیم. اگر PWA دارید ، به ایجاد ترافیک در برنامه شما کمک می کند. فقط باید مطمئن شوید که URL ها وجود دارند و موتورهای جستجو می توانند سایت های شما را فهرست بندی کنند.

آنها آیکون برنامه دارند

از آنجا که PWA یک برنامه قابل نصب است ، باید دارای یک نماد باشد. این باعث می شود برنامه شما به راحتی قابل تشخیص باشد.

آنها با هر مرورگری کار می کنند

PWA ها ابتدا برنامه های وب هستند ، به این معنی که آنها باید روی همه مرورگرها کار کنند و نه فقط چند مورد مد نظر. کاربران باید بتوانند از آنها در هر مرورگری قبل از تصمیم به نصب آنها استفاده کنند.

آنها با هر دستگاه ورودی کار می کنند

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

ما دیدیم که PWA چیست و چه چیزی باعث ایجاد یک برنامه وب پیشرفته خوب می شود. اما قبلاً به اپلیکیشن هایnative  اشاره کردیم. تفاوت این دو در چیست؟

تفاوت بین PWA ها و اپلیکیشن های native

توسعه  PWAها در مقایسه با برنامه های native ارزان تر است.

هنگام ایجاد یک برنامه native ، باید یک زبان برنامه نویسی خاص را بیاموزید و سپس نسخه ای از برنامه را برای هر نوع دستگاه ، Android و iOS بسازید. در این پروسه ، شما همچنین برای نگهداری و به روز رسانی برنامه به منابع نیاز خواهید داشت ، این بدان معناست که پول و زمان زیادی مورد نیاز است.

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

PWA ها میتوانند به وسیله موتور های جستجوگر ایندکس شوند

برنامه های بومی را نمی توان توسط موتورهای جستجو فهرست بندی کرد ، آنها فقط می توانند از طریق وب سایت فروشگاه App/Play پیدا شوند. با استفاده از App Store Optimization (ASO) می توانید برنامه خود را در App/Play store پیدا کنید، اما این یک داستان دیگر است.

برخلاف برنامه های بومی ، PWA ها مانند وب سایت ها عمل می کنند تا بتوانند توسط موتورهای جستجو ایندکس شوند. این به آنها کمک می کند رتبه بهتری در نتایج جستجو (SEO بهتر) داشته باشند.

PWA ها امنیت بیشتری دارند

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

اما برای ایمن سازی برنامه های native خود ، باید اقدامات امنیتی مختلفی را انجام دهید ، مانند احراز هویت چند عاملی و غیره.

نصب و دانلود

برنامه های native باید دانلود  و از فروشگاه اپ استور نصب شوند. این امر مستلزم تعهدی از طرف کاربر برای انجام این کار از ابتدا تا انتها است. کاربران قبل از نصب برنامه باید مجوزهای متعدد را اجازه داده و بررسی کنند.

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

مزایای PWA ها

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

اکنون بیایید خلاصه ای سریع از مزایای PWA را بررسی کنیم:

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

تا کنون ما توضیح داده ایم که چرا باید از PWA استفاده کنید و درباره مزایای PWA ها هم توضیح دادیم و در ادامه درباره اینکه چه چیزهایی برای ساخت PWA نیاز داریم صحبت خواهیم کرد. اما ما در مورد چگونگی شروع ساخت آنها صحبت نکرده ایم. بنابراین در اینجا چیزی است که شما نیاز دارید.

چه چیزهایی برای ساخت PWA نیاز داریم

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

HTTPS – ابتدا به سروری با اتصال HTTPS نیاز دارید. این امر از امنیت داده های کاربران شما اطمینان حاصل می کند.

service worker- این یکی از فناوری های کلیدی پشت PWA است. service worker به پشتیبانی از برنامه شما به صورت آفلاین کمک می کند و ذخیره پیشرفته را انجام می دهد و کارهای پس زمینه را اجرا می کند. service worker می تواند وظایف خود را حتی زمانی که PWA شما اجرا نمی شود انجام دهد.

service worker بسیاری از کارها را انجام می دهد ، مانند:

• ارسال push notification
• نمادهای نشان گذاری
• اجرای وظایف واکشی پس زمینه

و خیلی چیزهای بیشتر.

فایل Manifest – این یک JSON است که با ژنراتور ایجاد می شود. این فایل حاوی اطلاعاتی است که نحوه نمایش و عملکرد PWA شما را نشان می دهد. به شما امکان می دهد نام ، توضیحات ، نماد ، رنگها و سایر ویژگیهای PWA خود را تعیین کنید.

در اینجا نمونه ای از یک فایل manifest آمده است:

کد1

{
  "short_name": "Weather",
  "name": "Weather: Do I need an umbrella?",
  "icons": [
    {
      "src": "/images/icons-vector.svg",
      "type": "image/svg+xml",
      "sizes": "512x512"
    },
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6",
  "shortcuts": [
    {
      "name": "How's weather today?",
      "short_name": "Today",
      "description": "View weather information for today",
      "url": "/today?source=pwa",
      "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
    },
    {
      "name": "How's weather tomorrow?",
      "short_name": "Tomorrow",
      "description": "View weather information for tomorrow",
      "url": "/tomorrow?source=pwa",
      "icons": [{ "src": "/images/tomorrow.png", "sizes": "192x192" }]
    }
  ],
  "description": "Weather forecast information",
  "screenshots": [
    {
      "src": "/images/screenshot1.png",
      "type": "image/png",
      "sizes": "540x720"
    },
    {
      "src": "/images/screenshot2.jpg",
      "type": "image/jpg",
      "sizes": "540x720"
    }
  ]
}

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

نتیجه گیری

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

ما همچنین آموخته ایم که PWA ها و برنامه های تحت وب عملکرد یکسانی دارند و از جهات زیادی بسیار شبیه به هم هستند.

اکنون که ما PWA ها و مزایای آنها را بررسی کرده ایم ، باید بتوانید تعیین کنید که آیا PWA ایده خوبی برای تجارت شما است یا خیر.

از برنامه نویسی لذت ببرید.

برای مطالعه مقاله نحوه یادگیری سریعتر جاوا اسکریپت بر روی لینک کلیک کنید

کلمات کلیدی:PWA چیست؟،مزایای PWA،چه چیزهایی برای ساخت PWA نیاز داریم؟،