PWA یا Progressive web app چیست ؟
اپلیکیشنهای پیشرو تحت وب (PWA) از سال ۲۰۱۵ و با هدف پر کردن فاصله بین وبسایتهای سنتی و اپلیکیشنهای Native توسط گوگل معرفی شدند. هستهی اصلی این فناوری بر پایهی «سرویس ورکرها» (Service Workers) برای مدیریت هوشمند درخواستهای شبکه و کش کردن دادهها، و همچنین فایل Manifest برای قابلیت نصب روی دستگاه پایهریزی شده است. این معماری به طور خاص در موبایل مزیت بزرگی ایجاد میکند. کاربران بدون نیاز به مراجعه به فروشگاههای اپلیکیشن و اشغال فضای ذخیرهسازی، میتوانند وبسایت را مانند یک نرمافزار مستقل روی صفحهی اصلی گوشی خود نصب کرده و حتی در شرایط عدم اتصال به اینترنت، از بخشهای آفلاین آن استفاده کنند.
برای کاربر، این فناوری به معنای دسترسی در لحظه، تجربهای یکپارچه و عدم نیاز به بهروزرسانیهای پیدرپی است. و برای ارائهدهندگان سرویس، به معنای حذف موانع نصب، افزایش تعامل کاربر و جذب سریعتر مخاطب است.
از دید فنی و برای برنامهنویسانی که قصد پیادهسازی این قابلیت را دارند، خوشبختانه نیاز نیست پیچیدگیهای پیکربندی سرویس ورکرها و مدیریت کش از صفر نوشته شود. فریمورکهای مدرن فرانتاند مانند React (بهویژه با ابزارهایی نظیر Next-PWA)، Vue و Angular، لایهی پیچیدهی این فرآیند را از دید شما مخفی میکنند.
مزایای PWAها چیست ؟
- استفاده از آنها آسان است و به سادگی از طریق موتورهای جستجو قابل دسترسی هستند.
- امنیت بیشتری برای کاربران فراهم میکنند زیرا دسترسیهای محدودی به گوشیهای موبایل دارند.
- سرعت بارگزاری و عملکرد آنها زیاد است.
- قابلیت لینکشدن و نصب شدن روی گوشی را دارا هستند.
- مرورگرها تلاش میکنند که تجربهای شبیه به اپلیکیشنهای واقعی برای استفادهکنندگان فراهم کنند.
- قسمتهایی از عملکرد یک PWA ممکن است در دسترس باشد.
- با ذخیرهسازی اطلاعات در سمت مشتری، سرعت دسترسی به بخشهای زیادی از یک PWA میتواند به صورت لحظهای باشد.
تفاوت PWA با In-App Browser
یک روش دیگر که کاربرد گستردهای دارد، نمایش محتوای یک سایت در مرورگر درونبرنامهای یا In-App Browser است. بسیاری از نرمافزارهای موبایل در حقیقت فقط یک Web View هستند که سایتی اینترنتی را نمایش میدهند.
استفاده از PWA در مقایسه با مرورگر درونبرنامهای از نظر عملکرد تفاوت چشمگیری با هم ندارند ولی استفاده از مرورگر علاوه بر اینکه میتواند کارایی بهتری داشته باشد، امنیت بیشتری را برای کاربران فراهم میکند. یک Web View هرچند سایتی اینترنتی را باز میکند ولی همچنان از طریق اپلیکیشن میزبان قابل تغییر و شنود است. این مشکلی به ویژه هنگامی که اپلیکیشن مشتری را به سایتهای دیگر مثل سایتهای بانکی هدایت کند، میتواند خطرناک باشد.
چند نمونه از PWAهای مشهور
- ChatGPT
- X
- BMW
- Spotify
فایل Manifest چیست ؟
تبدیل یک سایت معمولی به یک PWA در بسیاری از موارد به آسانی قابل انجام است. مهمترین بخش یک PWA فایل Manifest آن است که تعیین میکند کدام فایلهای سایت میبایست به صورت آفلاین ذخیره شوند و نیازی به درخواست مجدد آنها وجود ندارد. همچنین رنگ و آیکون و مشخصات دیگر اپلیکیشن را مشخص میکند.
در زیر یک نمونه فایل نمونه را مشاهده میکنید که برای یک PWA به نام یادداشتهای من است.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
{ "name": "یادداشتهای من", "short_name": "یادداشتها", "description": "یک برنامه ساده برای نوشتن و ذخیره یادداشتهای روزانه", "start_url": "/", "display": "standalone", "theme_color": "#4CAF50", "background_color": "#ffffff", "icons": [ { "src": "icons/icon-72.png", "sizes": "72x72", "type": "image/png" }, { "src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "icons/icon-512.png", "sizes": "512x512", "type": "image/png" } ] } |
برای تبدیل یک سایت به PWA کافیست فایل بالا را در یک فایل به نام manifest.json درج کنید و سپس کد زیر را در بخش head سایت درج کنید:
|
1 |
<link rel="manifest" href="manifest.json"> |
توسعهی PWA به چه صورت قابل انجام است ؟
- نیازی به گفتن نیست که یک PWA باید ریسپانسیو باشد تا در مرورگرهای مختلف و اندازههای گوناگون صفحهی نمایش به خوبی قابل استفاده باشد.
- یک PWA پیش از هدایت کاربران به لینک صفحات دیگر، باید بررسی کند که آیا دسترسی به اینترنت وجود دارد یا خیر و سپس در صورت نیاز پیامهای لازم را به کاربر نمایش بدهد.
- تغییر محتوای PWAها معمولا با استفاده از جاوااسکریپت اتفاق میافتد و تغییر URL میتواند تجربهای دورتر از یک اپلیکیشن واقعی را ایجاد کند.
- یک PWA به خوبی باید بتواند در مرورگرهای متداول موبایل به شکلی یکسان قابل استفاده باشد و تفاوتهای احتمالی در امکانات آنها را به خوبی پوشش بدهد.
- فریمورکهای متعددی برای توسعهی آسانتر PWAها وجود دارند که میتوانند کار برنامهنویسی اینگونه اپلیکیشنها را سریعتر و آسانتر کنند.