یکی از قدیمیترین آرزوهای توسعهدهندگان، نوشتن یک بار کد و اجرای آن روی همهٔ پلتفرمها بوده است. اما «همهٔ پلتفرمها» فقط موبایل و دسکتاپ نیست — وب هم بخش بزرگی از آن است. آیا واقعاً میشود با یک کدبیس، هم اپلیکیشن اندروید و iOS ساخت و هم یک وباپلیکیشن نصبپذیر و آفلاین؟ پاسخ فلاتر، بله است.
Flutter فریمورک متنباز گوگل برای ساخت رابط کاربری است که در سال ۲۰۱۷ معرفی شد. فلاتر در ابتدا برای موبایل طراحی شده بود، اما Flutter Web — که از نسخهٔ ۲ به صورت پایدار منتشر شد — به توسعهدهندگان اجازه میدهد همان اپلیکیشن را مستقیماً به وب کامپایل کنند و با قابلیتهای PWA آن را نصبپذیر، آفلاین و سریع کنند. در این مقاله به بررسی Flutter PWA میپردازیم.
PWA چیست؟
Progressive Web App (PWA) یک وبسایت است که مثل یک اپلیکیشن بومی رفتار میکند: روی صفحهٔ اصلی نصب میشود، به صورت آفلاین کار میکند، اعلان (Push Notification) میفرستد و به سختافزار دستگاه دسترسی دارد. PWA نیازی به فروشگاه اپ ندارد و لینک آن را میتوان با یک URL ساده به اشتراک گذاشت.
سه ستون اصلی هر PWA عبارتند از:
- Manifest — فایل
manifest.jsonکه نام، آیکون، رنگ و رفتار نصب اپ را تعریف میکند - Service Worker — اسکریپتی که در پسزمینه اجرا میشود، درخواستهای شبکه را مدیریت میکند و کش آفلاین را پیادهسازی میکند
- HTTPS — PWAها فقط روی اتصال امن کار میکنند (به جز localhost)
فلاتر چگونه به وب کامپایل میشود؟
برخلاف فریمورکهای مبتنی بر DOM مثل React یا Angular، فلاتر از موتور رندر خودش به نام Skia (و اخیراً Impeller) استفاده میکند. در وب، این موتور روی بستر Canvas یا WebAssembly رندر میکند:
- CanvasKit (WebAssembly) — همان موتور Skia کامپایلشده به WASM. خروجی باکیفیت و یکسان با موبایل، اما حجم دانلود اولیه بالاتر
- HTML renderer — رندر مبتنی بر HTML و CSS که سبکتر است و برای موتورهای جستجو و دستگاههای ضعیف مناسبتر است (در نسخههای جدید با Canvaskit ادغام شده)
کامپایل یک پروژهٔ فلاتر برای وب فقط با یک دستور انجام میشود:
flutter create my_app
flutter build web --web-renderer canvaskitخروجی در پوشهٔ build/web قرار میگیرد و شامل فایلهای manifest.json و flutter_service_worker.js است — یعنی قابلیتهای PWA از قبل داخل خروجی فلاتر هستند.
امکانات اصلی Flutter PWA
نصبپذیر بودن (Installable)
با استفاده از flutter_web_plugins و آیکونهای مناسب در manifest.json، کاربر میتواند اپ را روی صفحهٔ اصلی نصب کند. روی دسکتاپ هم در منوی برنامهها ظاهر میشود — بدون مراجعه به هیچ فروشگاه اپی.
کارکرد آفلاین (Offline)
Service Worker فلاتر یک کش پیشفرض از فایلهای اپ میسازد. پس از اولین بارگذاری، اپ بدون اینترنت اجرا میشود. نسخههای بعدی اپ هم به صورت خودکار شناسایی و بهروزرسانی میشوند.
یک کدبیس برای موبایل، وب و دسکتاپ
بزرگترین مزیت فلاتر همین است: همان main.dart برای اندروید، iOS، وب، ویندوز، مک و لینوکس کامپایل میشود. فقط برای رفتارهای خاص هر پلتفرم (مثل push notification) باید کد پلتفرممخصوص نوشت.
اجرای یکسان (Consistent Rendering)
چون فلاتر از موتور رندر خودش استفاده میکند، پیکسلها روی موبایل و وب یکسان رندر میشوند — چیزی که با CSS بین مرورگرها تضمینشده نیست.
عملکرد (Performance)
نقطهٔ ضعف سنتی Flutter Web، حجم دانلود اولیه است: موتور رندر CanvasKit چند مگابایت حجم دارد. برای بهبود آن:
- از lazy loading برای صفحات سنگین استفاده کنید
- فایلهای فونت و تصاویر را با ابزارهایی مثل
flutter_launcher_iconsو فشردهسازی بهینه کنید - با gzip/Brotli در سمت سرور، فایلهای JS و WASM را فشرده ارسال کنید
بعد از بارگذاری اولیه، ناوبری داخلی فلاتر بسیار روان است چون از DOM و ناوبری مرورگر استفاده نمیکند. برای اپهای تعاملی و پرانیمیشن، فلاتر به مراتب بهتر از React یا Angular عمل میکند.
مقایسهٔ Flutter Web با React و Angular
React و Angular روی بستر استاندارد وب (DOM/CSS) ساخته شدهاند؛ فلاتر مسیر کاملاً متفاوتی را طی میکند:
| ویژگی | Flutter Web | React | Angular |
|---|---|---|---|
| زبان | Dart | JavaScript / TypeScript | TypeScript |
| بستر رندر | Canvas / WebAssembly | DOM | DOM |
| توسعهدهنده | Meta | ||
| اندازهٔ خروجی | بزرگ (چند MB) | کوچک تا متوسط | متوسط تا بزرگ |
| اشتراک کد با موبایل | کامل (همان کدبیس) | با React Native تقریبی | با NativeScript/Ionic تقریبی |
| SEO | ضعیف (رندر Canvas) | خوب (با SSR/SSG) | خوب (با SSR) |
| انیمیشن و UI پیچیده | عالی | خوب | خوب |
| مناسب برای | اپهای موبایل محور | وبسایت و داشبورد | اپهای سازمانی |
نکتهٔ مهم در مورد SEO: چون محتوای فلاتر روی Canvas رندر میشود، موتورهای جستجو محتوای آن را سختتر میبینند. برای صفحات عمومی و مبتنی بر محتوا، React یا Angular انتخاب بهتری هستند؛ مگر اینکه با flutter_html یا نسخهٔ ویژهٔ SEO سروکار داشته باشید.
موارد استفادهٔ Flutter PWA
۱. اپهای موبایل محور که نسخهٔ وب هم میخواهند
وقتی اپ اصلی شما موبایل است و وب فقط یک نسخهٔ «همقدم» برای دسکتاپ است — مثلاً اپهای فروشگاهی، مدیریت مالی یا پیامرسان — فلاتر بهترین انتخاب است، چون ۱۰۰٪ کد مشترک است.
۲. دموها و MVPها
یک نمونهٔ اولیه را بسازید، با یک لینک به اشتراک بگذارید و روی گوشی و دسکتاپ همزمان تست کنید.
۳. اپهای آفلاینمحور
برای کاربردهایی مثل فرمهای میدانی، بلیط و بارکد که آفلاین بودن حیاتی است، PWA فلاتر با کش Service Worker آماده است.
۴. داشبوردهای داخلی سازمان
داشبوردهای مدیریتی و ابزارهای داخلی که به موبایل هم نیاز دارند و SEO برایشان بیمعناست — نصب سریع از مرورگر، بدون فروشگاه اپ.
چه زمانی Flutter PWA انتخاب مناسبی است؟
- اپلیکیشن موبایل اول (Mobile-first) دارید و نسخهٔ وب میخواهید
- به نصبپذیری و کارکرد آفلاین نیاز دارید
- رابط کاربری شما سنگین و پرانیمیشن است
- میخواهید با یک تیم کوچک چند پلتفرم را پوشش دهید
- برای اپهای داخلی و داشبوردها که SEO اولویت ندارد
برای چه چیزهایی مناسب نیست؟
- وبسایتهای محتوا-محور و سئو-حساس — رندر Canvas برای موتورهای جستجو مشکل است؛ برای وبلاگ و فروشگاه محتوا-محور React یا Next.js بهترند
- بارگذاری اولیهٔ فوقسریع — حجم اولیهٔ فلاتر چند مگابایت است؛ صفحات سادهٔ HTML یا فریمورکهای سبک چند برابر سریعترند
- یکپارچگی عمیق با DOM — اگر به کتابخانههای وب خاص (مثل نقشهٔ سفارشی یا ابزارهای WYSIWYG) وابسته هستید، کار با DOM مستقیم آسانتر است
- تیم متخصص وب موجود — اگر تیم شما React یا Angular بلد است و پروژهٔ موبایلی ندارد، یادگیری Dart و فلاتر هزینهٔ اضافی است
- اپهای سبک با ترافیک عمومی بالا — برای صفحهٔ فرود یا اپ ساده با میلیونها بازدید، PWA سبکتر از فلاتر سریعتر و ارزانتر است
لکسویا در سرویس پلتفرم ابری (PaaS) خود از این تکنولوژی پشتیبانی میکند — با چند کلیک دپلوی کنید.
نتیجهگیری
Flutter PWA راهی است برای اینکه یک کدبیس موبایل، به صورت بومی روی وب هم اجرا شود. اگر پروژهٔ شما موبایلمحور است و به نصبپذیری و آفلاینبودن نیاز دارد، فلاتر با خروجی PWA آمادهٔ خود، انتخابی کمریسک و بسیار پربازده است.
اما فلاتر جایگزین فریمورکهای وب نیست. برای سایتهای محتوا-محور، صفحات سئو-حساس و بارگذاری اولیهٔ سریع، React و Angular همچنان انتخاب اولاند. کلید تصمیمگیری، جایگاه وب در استراتژی شماست: «نسخهٔ وبِ یک اپ» یا «یک وبسایت واقعی».