آموزش React PWA: چگونه بسازیم و چرا؟

یک برنامه وب پیش رونده (PWA) توسعه یافته با ری اکت هم افزایی دو فناوری برجسته است که مزایای هر دو را به حداکثر می‌رساند.

ری اکت با عملکرد ساده و کاربردی که ارائه می‌دهد، دنیای فرانت-اند را متزلزل کرده است. با چند سال تأخیر، فناوری PWA بار دیگر جهان را دگرگون کرد. اکنون برنامه‌های کاربردی وب و تلفن همراه در حال از دست دادن محبوبیت و کیفیت تجربه کاربری خود در برنامه‌های وب پیشرفته می‌باشند.

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

برای یادگیری این فریمورک، به این دوره مراجعه کنید.

معرفی مختصر React

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

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

1. این فریمورک سریع تنظیم می‌شود، بنابراین کار بر روی پروژه می‌تواند در کوتاه‌ترین زمان ممکن آغاز شود.
2. رابط‌های کاربری ساخته شده با ری اکت واکنش‌گرا و تعاملی هستند، زیرا ری اکت فرصتی مناسب برای واکشی و ثبت داده‌هایی است که به صورت پویا تغییر می‌کنند.
3. با توجه به ساختار مبتنی بر کامپوننت و قابلیت استفاده مجدد این مولفه‌ها، ری اکت توسعه برنامه‌ها را بسیار تسهیل و تسریع می‌کند.
4. ری اکت می‌تواند تقریبا برای هر پروژه‌ای کار کند، از یک SPA (برنامه وب تک صفحه‌ای) ساده گرفته تا یک وب سایت پیچیده یا سیستم عامل تلفن همراه.
5. این فناوری از پشتیبانی قوی جامعه پیشرفته‌ای برخوردار است که اسناد به روز را نگهداری می کنند و آماده ارائه به توسعه دهندگان مشتاق هستند.
6. ری اکت می‌تواند به راحتی با سایر فریمورک‌ها یا کتابخانه‌ها یکپارچه شود، که کار توسعه را راحت‌تر می‌کند و آن را به گزینه‌ای مناسب برای پروژه‌های جدید و در دست اجرا تبدیل می‌کند.

برنامه‌هایی مانندAirbnb ،Dropbox ، Facebook و Netflix با ری اکت ساخته شده‌اند.

نگاه سریع به PWA

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

فناوری PWA شش مزیت اساسی دارد:

1. یک برنامه وب پیش رونده سریع‌تر از یک وبسایت معمولی بارگیری می‌شود و نصب و شروع به استفاده از آن سریع‌تر از یک برنامه تلفن همراه است. تمام بخش‌های مختلف وبسایت ثابت در حافظه پنهان هستند، بنابراین صفحه با هر بار بازدید سریع‌تر بارگیری می‌شود.
2. توسعه و استفاده از برنامه‌های وب پیش رونده بسیار ساده‌تر از سایر راه‌حل‌های موجود در وب است. به عنوان مثال، از آنجا که می‌توان آن‌ها را از طریق مرورگر نصب کرد، نیازی به ارسال آن‌ها به App Store یا Google Play نیست.
3. PWA ها جهانی هستند و اگر از طریق مرورگر سازگار با استانداردها به آن‌ها دسترسی پیدا کنید، با همه دستگاه‌ها در همه سیستم‌عامل‌ها سازگاراند.
4. اگر اتصال شبکه ناپایدار باشد یا حتی وجود نداشته باشد، PWA ها از داده‌های ذخیره شده session های قبلی برای اطمینان از عملکرد کامل و بدون وقفه استفاده می‌کنند. همچنین کاربران می‌توانند اساسا از هرجایی به برنامه شما دسترسی داشته باشند.
5. برنامه‌های وب پیش رونده به دلیل سادگی و سرعت همراه با تمام ویژگی‌های لازم راه‌حل‌های بومی، یک تجربه کاربری عالی را ارائه می‌دهند. به طور مشابه با برنامه تلفن همراه بومی، کاربر می‌تواند PWA را با کلیک روی آیکون روی صفحه اصلی باز کند. علاوه بر این، برخلاف برنامه‌های بومی، به روزرسانی‌ها در پس زمینه بارگیری می‌شوند.
6. در حالی که PWA ها تأثیر مستقیمی بر روی نتایج جستجوگرها ندارند، PWA به درستی توسعه یافته امکان کاهش rate bounce و بهبود نرخ نگهداری و عملکرد کلی سئوی وبسایت شما را دارد.

نمونه برنامه‌های PWA عبارت اند از Twitter، Pinterest، The Weather Channel و Alibaba.

راهنمای توسعه PWA

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

مرحله 1: یک manifest برنامه وب پیش رونده اضافه کنید

و اما manifest چیست؟ این یک فایل JSON است که به مرورگر در مورد PWA و رفتار مورد انتظار آن هنگام نصب روی دسکتاپ یا دستگاه تلفن همراه کاربر اطلاعات می‌دهد. یک فایل مانیفست برنامه وب باید حاوی نام برنامه و آیکونی باشد که در صفحه اصلی نشان داده می‌شود و لینکی که باید با راه‌اندازی برنامه باز شود. مرورگرهایی مانند گوگل کروم، مایکروسافت اج، فایرفاکس، اپرا و مرورگر سامسونگ به طور واضح پشتیبانی می‌کنند، در حالی که سافاری فقط پشتیبانی جزئی را ارائه می‌دهد.

{
  "short_name": "KeenEthics",
  "name": "KeenEthics",
  "description": "Be Keen. Follow Ethics",
  "icons": [
    {
      "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": "#12233d",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#12233d",
}

بعد از ایجاد مانیفست، آن را به برنامه خود اضافه کنید. برای انجام این کار، به هر صفحه PWA خود یک تگ <link> اضافه کنید. برای مثال:

<linkrel=”manifest” href=”/manifest.webmanifest” >

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

مرحله 2: سرویس دهنده را اضافه کنید

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

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

چند نکته فنی دیگر مربوط به سرویس دهنده‌ها:

• برای جلوگیری از حملات "مرد میانی"، سرویس دهنده‌ها فقط از طریق HTTPS اجرا می‌شوند.
• یک سرویس دهنده نمی‌تواند مستقیما به DOM دسترسی پیدا کند، بنابراین از ()postMessage برای برقراری ارتباط با صفحه استفاده می‌کند.
• سرویس دهنده‌ها نمی‌توانند از XHR همزمان و ذخیره سازی محلی استفاده کنند.

اطلاعات بیشتر در مورد نحوه ثبت نام، نصب و فعال کردن سرویس دهنده‌ها را می‌توانید در Google Developers بخوانید.

مرحله 3: PWA خود را تست کنید

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

سخن پایانی

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

روند توسعه تدریجی برنامه وب، شامل مراحل زیر است:

1. افزودن مانیفست PWA
2. افزودن سرویس دهنده‌ها و تصمیم‌گیری در مورد اینکه در چه مرحله‌ای باید کش شود
3. تست PWA خود با Lighthouse

این 3 مرحله شما را به موفقیت تجاری نزدیک می‌کند.

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

منبع