این روزها، تقریباً همه چیز با کمک تلفنهای همراه و اپلیکیشنها امکانپذیر شده است.مثلاً فرض کنید که بخواهید غذایی سفارش دهید – به راحتی میتوانید از طریق اپلیکیشن (app) شرکت این کار را انجام دهید.برای هر چیزی اپلیکیشن وجود دارد – از بانکداری و تحصیلگرفته تا خرید و تجارت. هر کسبوکاری اپلیکیشن خودش را دارد، و حتی دولتها هم خدماتشان را به صورت اپلیکیشن ارائه کردهاند. اما ساخت و نگهداری یک اپلیکیشن کار راحتی نیست و برای کسبوکارهای کوچک هزینهبر است، پس آنها چطور این کار را انجام میدهند؟ پاسخ ساده است: با کمک پیشرفتهای فناوری، حالا گزینهای وجود دارد که به کسبوکارهای کوچک کمک میکند. این گزینه ترکیبی از ویژگیهای اپلیکیشن و فناوریهای توسعه وب (web development) است که به کسبوکارها این امکان را میدهد که خدماتی مقرون به صرفه و کاربردی ارائه دهند – این همان Progressive Web Apps (PWA) است. در ادامه به اپلیکیشن PWA چیست می پردازیم.
اپلیکیشن PWA چیست ؟
اپلیکیشن های وب پیشرفته (Progressive Web Apps) یا PWA ها اپلیکیشن هایی هستند که با فناوریهای وب مثل HTML، CSS و JavaScript ساخته میشوند. اما برخلاف وبسایتهای معمولی، آنها همان حس و عملکرد اپلیکیشنهای بومی (native app) را دارند. حالا بپرسید، اپلیکیشن بومی چیست؟
یک اپلیکیشن بومی (native app)، نرمافزاری است که برای یک پلتفرم خاص، مثل iOS یا Android، با زبان برنامهنویسی مخصوص آن ساخته میشود.
PWA ها قابلیتهایی مثل push notifications و کارکرد آفلاین دارند. همچنین به کمک modern APIها ساخته شدهاند که این ویژگیها را به راحتی فراهم میکنند و به شما این امکان را میدهند که این اپلیکیشنها را روی هر دستگاهی نصب کنید و از قابلیتهای پیشرفته آن بهرهمند شوید.
PWA ها از اکوسیستم وسیع وب بهره میبرند که شامل پلاگینها (plugins)، جامعه توسعهدهندگان (developer community) و سهولت استقرار و نگهداری سایتها میشود. در حالی که اپلیکیشنهای بومی توسعه پیچیدهتری دارند. بنابراین شما میتوانید یک PWA را خیلی سریع و راحت بسازید.
با توجه به محبوبیت روزافزون PWAها، بسیاری از شرکتها به این مدل روی آوردهاند. شاید دلیل آن این باشد که PWAها میتوانند به راحتی روی هر دو پلتفرم Android و iOS اجرا شوند. برخی از برندهای معروف که از PWA استفاده میکنند شامل: Twitter، Pinterest، Uber، TikTok، Spotify و غیره.
این اپلیکیشنها ویژگی مشترکی دارند: همه آنها قابل نصب روی صفحه اصلی تلفن همراه هستند، به صورت آفلاین از جایی که کاربر آخرین بار متوقف شده ادامه میدهند و تجربهای مشابه اپلیکیشنهای بومی را فراهم میکنند.
ویژگیهای یک اپلیکیشن PWA چیست ؟
وقتی اپلیکیشن بومی میسازید، باید انتظاراتی را برآورده کنید تا تجربه کاربری خوبی ارائه دهید. این موضوع برای PWAها هم صدق میکند. بیایید بررسی کنیم که یک PWA خوب باید چه ویژگیهایی داشته باشد.
1. پاسخگویی (Responsiveness)
دستگاهها و نمایشگرها اندازههای مختلفی دارند، و به عنوان یک توسعهدهنده شما باید مطمئن شوید که اپلیکیشن شما در هر دستگاهی به خوبی کار میکند. بنابراین، بهتر است اپلیکیشن خود را طوری طراحی کنید که در هر اندازه صفحهای قابل استفاده باشد.
2. قابلیت نصب (Installable)
تحقیقات نشان دادهاند که کاربران بیشتر با اپلیکیشنهای نصبشده تعامل دارند تا با مراجعه به سایتها. بنابراین، داشتن یک PWA به شما این امکان را میدهد که کاربران تجربه یک اپلیکیشن واقعی را داشته باشند.
3. اتصال مستقل (Independent Connectivity)
حفظ ارتباط کاربران با اپلیکیشن حتی زمانی که آفلاین هستند، تجربهای روانتر از انتقال آنها به یک صفحه پیشفرض آفلاین ایجاد میکند.
مثلاً در یک اپلیکیشن موسیقی، کاربران باید بتوانند موسیقیهایی که دانلود کردهاند را حتی بدون اتصال به اینترنت گوش دهند.
4. کشفپذیری (Discoverability)
چون بیشتر PWAها از وبسایتها ساخته میشوند، باید طوری طراحی شوند که توسط موتورهای جستجو قابل شناسایی باشند، این کمک میکند ترافیک بیشتری به اپلیکیشن شما هدایت شود. این مزیت بزرگی است نسبت به اپلیکیشنهای بومی که نمیتوانند از طریق جستجوهای اینترنتی پیدا شوند.
5. ظاهر (Appearance)
ظاهر اپلیکیشن باید شبیه به یک اپلیکیشن واقعی باشد. بنابراین مطمئن شوید که عناصری مثل آیکون اپلیکیشن (app icon)و صفحه شروع (splash screen)را اضافه کردهاید که به شناسایی بهتر و ایجاد حس یک اپلیکیشن واقعی کمک کند.
6. چندپلتفرمی بودن (Cross-platform)
PWAها به عنوان یک اپلیکیشن وب طراحی میشوند، بنابراین باید در همه مرورگرها (browsers) و سیستمها کار کنند. این به این معنی است که کاربران باید بتوانند از PWA شما در هر مرورگری استفاده کنند، بدون اینکه نیازی به نصب آن داشته باشند.
تفاوتهای بین PWAها و اپلیکیشنهای بومی
1. هزینه توسعه (Development Cost)
PWAها نسبت به اپلیکیشنهای بومی ارزانتر توسعه داده میشوند. برای توسعه یک اپلیکیشن بومی باید زبانهای برنامهنویسی خاصی یاد بگیرید و نسخههای مختلف اپلیکیشن را برای Android و iOS بسازید. از سوی دیگر، برای توسعه یک PWA میتوانید کد واحدی برای تمام پلتفرمها داشته باشید که هم زمانبر و هم هزینه کمتری دارد.
2. کشفپذیری (Discoverability)
اپلیکیشنهای بومی فقط از طریق App Storeیا Play Storeپیدا میشوند و نمیتوانند توسط موتورهای جستجو ایندکس شوند. اما از آنجا که PWAها مشابه سایتهای اینترنتی عمل میکنند، میتوانند در نتایج جستجو ظاهر شوند، که این یک مزیت بزرگ است.
3. امنیت (Safety)
برای راهاندازی یک وبسایت باید آن را با گواهی SSL (Secure Sockets Layer) رمزگذاری کنید تا امنیت اطلاعات کاربران تأمین شود. این کار باعث میشود ارتباطات بین سرور و مرورگر به صورت امن و رمزنگاری شده انجام شود. چون PWAها از وبسایتها ساخته میشوند، به طور خودکار از پروتکل HTTPSاستفاده میکنند که امنیت بالاتری به آنها میدهد. اما برای تأمین امنیت اپلیکیشنهای بومی، باید اقدامات اضافی مثل احراز هویت دو مرحلهای و رمزنگاری دادهها را انجام دهید. اپلیکیشنهای بومی معمولاً روی دستگاه کاربر نصب میشوند، بنابراین اطلاعات حساس ممکن است مستقیماً روی دستگاه ذخیره شود و به همین دلیل نیاز به تدابیر امنیتی بیشتری دارند.
4. نصب و دانلود (Installation & Download)
اپلیکیشنهای بومی باید از App Storeیا Play Storeدانلود شوند و این فرایند نیاز به اقداماتی مثل پذیرش مجوزها دارد. اما PWAها به راحتی از مرورگر قابل نصب هستند و بدون نیاز به دانلود یا مراحل پیچیده میتوانند به صفحه اصلی دستگاه اضافه شوند.
مزایای اپلیکیشن PWA چیست ؟
بسیاری از سازمانها، چه خصوصی و چه دولتی، به سمت استفاده از PWAها میروند نه تنها به این دلیل که هزینه توسعه آنها کم است، بلکه به این خاطر که تعامل بیشتری (engagement) با کاربران فراهم میکنند. حالا بیایید یک خلاصه سریع از مزایای PWAها داشته باشیم:
- پاسخگو (Responsive) هستند و با اندازههای مختلف صفحه نمایش به خوبی کار میکنند.
- میتوانند روی چندین پلتفرم و هر دستگاهی با مرورگر وب مدرن اجرا شوند.
- عملکرد آنها مشابه اپلیکیشنهای بومی است.
- بروزرسانیها به طور مستقل انجام میشوند و نیازی به مراجعه به Play Store برای بروزرسانی نیست.
- با استفاده از فناوریهای رایج وب ساخته میشوند.
- سریع و سبک هستند.
- برخلاف دیگر وبسایتها، به صورت آفلاین (Offline) هم کار میکنند.
- از طریق موتورهای جستجو قابل کشف هستند.
- نصب آنها بسیار ساده است.
- هزینه نگهداری آنها پایین است.
پیشنیازهای شروع توسعه PWA
برای شروع ساخت یک PWA نیازی به چیزهای پیچیده ندارید. فقط کافیست چند مورد زیر را داشته باشید و کارتان را شروع کنید.
ابزارها (Tools) در اپلیکیشن PWA چیست ؟
برای توسعه PWAها از مجموعه فناوریهای مختلفی میتوان استفاده کرد. یکی از شناختهشدهترین فریمورکها برای این کار AngularJS است. این فریمورک امکانات مناسبی برای تبدیل اپلیکیشنهای وب به PWA فراهم میآورد. علاوه بر آن، فریمورکهایی مثل ReactJS و Polymer نیز گزینههای خوبی برای ساخت PWA هستند. این فریمورکها به توسعهدهندگان کمک میکنند تا اپلیکیشنهای وب خود را به راحتی به یک اپلیکیشن پیشرفته و قابل استفاده در تمام دستگاهها و پلتفرمها تبدیل کنند.
HTTPS
شما نیاز به یک سرور با اتصال HTTPS دارید. این ارتباط اطمینان میدهد که دادههای کاربران شما ایمن است و یک لایه امنیتی اضافه برای سایت شما فراهم میآورد.
Application Shell
Application Shell به معنای ساختار اصلی اپلیکیشن است که به طور مداوم بارگذاری میشود و اغلب شامل بخشهایی از رابط کاربری مثل ناوبری، منوها، نوار جستجو و دیگر اجزای ثابت اپلیکیشن است.
هدف اصلی آن این است که کاربر بلافاصله بعد از بارگذاری اولیه، تجربهای روان و سریع از اپلیکیشن داشته باشد، حتی در شرایطی که اتصال به اینترنت ضعیف یا قطع باشد.
در واقع، Application Shell تنها بار اول که کاربر وارد اپلیکیشن میشود، بارگذاری میشود و پس از آن، اطلاعات پویا و محتوای اپلیکیشن به صورت بهینه و سریعتر بارگذاری میشود. این تکنیک باعث میشود تا سرعت بارگذاری اپلیکیشن بیشتر شود و کاربر تجربهای بدون تأخیر و با تعامل روان داشته باشد.
در حقیقت، Application Shell مشابه همان چیزی است که در یک وبسایت مشاهده میکنید: ساختار ثابت، مثل فوتر، هدر یا ناوبری، که همیشه در دسترس است. اما نکته مهم این است که در PWAها، این بخشها به گونهای طراحی شدهاند که نه تنها ظاهر جذاب و منظم داشته باشند، بلکه عملکرد بالایی نیز از خود نشان دهند و کاربر حتی در شرایط آفلاین هم بتواند از اپلیکیشن استفاده کند.
Service Workers
این یکی از فناوریهای کلیدی پشت PWAها است. آنها به اپلیکیشن شما کمک میکنند تا به صورت آفلاین کار کند، کش (caching) انجام دهد و وظایف پسزمینه را اجرا کند. حتی زمانی که اپلیکیشن شما در حال اجرا نیست، Service Workers میتوانند وظایفی را انجام دهند.
سایر عملکردهایی که به Service Workers مربوط میشوند شامل:
- ارسال Push Notification
- نشان دادن آیکنهای Badging
- انجام وظایف پسزمینه مانند Background Fetching و غیره.
چگونه یک PWA بسازیم؟
با دنبال کردن مراحل زیر، میتوانید یک PWA کاملاً کاربردی ایجاد کنید که تجربه کاربری بینظیری در تمام دستگاهها ارائه دهد.
مرحله 1 - برنامهریزی اپلیکیشن خود
قبل از شروع به توسعه، باید اهداف PWA خود را در نظر بگیرید، ویژگیهایی که میخواهید اضافه کنید، اولویتها و تجربه کاربری را مشخص کنید. میتوانید ابتدا طراحیهای مفهومی و wireframe اپلیکیشن را ایجاد کنید تا ساختار و چیدمان اپلیکیشن را تجسم کنید. در بیشتر مواقع، به این مرحله فاز کشف (discovery phase) گفته میشود که در آن فرصتی برای ایدهپردازی، جمعآوری بازخورد از کاربران و ذینفعان و بررسی عملکردهای اپلیکیشن به دست میآورید.
مرحله 2 - طراحی رابط کاربری (UI)
پس از این که همه چیز را در مرحله برنامهریزی مرتب کردید، حالا میتوانید به طراحی رابط کاربری (UI) اپلیکیشن بپردازید. در این مرحله، باید مسائلی مانند پاسخگویی، سازگاری با پلتفرمهای مختلف و غیره را در نظر بگیرید. مطمئن شوید که تمام جزئیات مهم که مربوط به تعامل و درگیر شدن (engagement) کاربران در طول استفاده است را در طراحی خود لحاظ کنید.
مرحله 3 - توسعه فرانتاند
با استفاده از فناوریهای وب مانند HTML، CSS، JavaScript و فریمورکهایی مثل Angular، React یا Vue.js یک رابط کاربری جذاب برای کاربران طراحی کنید. همیشه این نکته را به یاد داشته باشید که هنگام توسعه با این مجموعه، باید از رویکرد mobile-first استفاده کنید و در عین حال برای صفحه نمایشهای بزرگتر نیز پاسخگو باشد.
مرحله 4 - پیادهسازی Service Workers
همانطور که قبلاً اشاره شد، Service Workers یکی از اجزای کلیدی PWAها هستند. اینها فایلهای JavaScript هستند که در پسزمینه اجرا میشوند و امکان کارکرد آفلاین، ارسال push notifications و انجام کشینگ را فراهم میکنند. برای اینکه PWA شما به بهترین شکل کار کند، باید یک Service Worker را ثبت و پیادهسازی کنید. نحوه انجام این کار به فریمورکی که استفاده میکنید بستگی دارد.
مرحله 5 - افزودن Push Notifications
از Push API و Service Workers برای پیادهسازی Push Notifications استفاده کنید. ابتدا باید رضایت کاربران را برای دریافت این اعلانها بگیرید و سپس از یک سرویس ارسال اعلان برای ارسال پیامها به کاربران استفاده کنید.
مرحله 6 - بهینهسازی عملکرد
بهینهسازی یک گام بسیار مهم در هر فرآیند توسعه است. این کار به شما کمک میکند که تجربهای روان برای کاربران فراهم کنید و زمان بارگذاری (loading time) را کاهش دهید. با استفاده از تکنیکهایی مثل code splitting و caching میتوانیم یک عملکرد سریع و کارآمد برای PWA خود به دست آوریم.
مرحله 7 - تست و رفع اشکال
PWA خود را در دستگاهها، مرورگرها و شرایط مختلف شبکه تست کنید تا اطمینان حاصل کنید که با اهداف شما همخوانی دارد. همچنین باید بازخورد کاربران را جمعآوری کرده و در صورت لزوم به بهبودهای لازم بپردازید.
حال که دریافتید اپلیکیشن PWA چیست ، می توانید از دیگر مقالات سایت ایوولرن دیدن کنید.