PWA چیست؟ ۲۰ مانیفست ایرانی را باز کردیم و ۶ تا رد شد

کروم دقیقا چه چیزی می خواهد

صفحه معیارهای نصب در web.dev، با آخرین بروزرسانی ۱۹ سپتامبر ۲۰۲۴، فهرست کوتاهی دارد: مانیفست باید name یا short_name داشته باشد، آیکنی در اندازه ۱۹۲ و آیکنی در اندازه ۵۱۲ پیکسل، مقدار start_url، و display برابر یکی از fullscreen، standalone، minimal-ui یا window-controls-overlay. کلید prefer_related_applications نباید true باشد. صفحه باید روی HTTPS سرو شود و کاربر باید حداقل یک بار روی صفحه تعامل کرده و حدود سی ثانیه آنجا مانده باشد.

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

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

نتیجه بررسی ۲۰ مانیفست

روش کار ساده بود. ۱۱۱ صفحه ایرانی را که در نتایج گوگل برای هفت پرسش مختلف بالا آمده بودند خواندیم، هر جا تگ <link rel="manifest"> بود آدرسش را برداشتیم، فایل را گرفتیم و مقادیرش را با فهرست بالا سنجیدیم.

از ۲۰ مانیفست یکتا، ۱۴ تا هر پنج شرط مانیفستی را داشتند. شش تای دیگر این وضع را داشتند: سه فایل اصلا name و start_url نداشتند، دو فایل فقط start_url نداشتند، و یکی با کد ۴۰۴ برگشت. نکته ای که از خود اعداد مهم تر است: هیچ کدام از این شش خطا در ظاهر سایت دیده نمی شود. سایت کاملا سالم بالا می آید و فقط دکمه نصب هرگز ظاهر نمی شود.

در زیرمجموعه ای که مستقیم درباره PWA می نویسند وضع جالب تر است. از ۱۸ صفحه ای که برای «PWA چیست» رتبه دارند، ۵ تا مانیفست دارند و ۶ تا سرویس ورکر ثبت می کنند. یعنی دو سوم صفحه هایی که به شما یاد می دهند PWA بسازید، خودشان یکی نساخته اند.

سه خطایی که واقعا اتفاق می افتد

• مسیر مانیفست اشتباه است. فایل جابه جا شده یا زیر مسیر دیگری نشسته و لینک هدر بروز نشده. مرورگر خطا نشان نمی دهد، فقط نصب را پیشنهاد نمی کند.
• start_url نوشته نشده. پلاگین های آماده معمولا یک site.webmanifest می سازند که برای favicon کافی است و برای نصب کافی نیست.
• آیکن ۵۱۲ پیکسل وجود ندارد. آیکن ۱۹۲ هست چون همان اندازه برای اندروید لازم بوده، ولی صفحه اسپلش به ۵۱۲ نیاز دارد.

هر سه را در دو دقیقه می شود دید: در کروم، DevTools را باز کنید، به تب Application بروید و روی Manifest کلیک کنید. اگر فایل پیدا نشود یا فیلدی کم باشد، همان جا نوشته می شود. این ساده ترین تست فنی است که یک مدیر سایت غیربرنامه نویس هم می تواند خودش انجام دهد.

اما آیا اصلا به PWA نیاز دارید

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

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

و یک محدودیت که باید بدانید: روی iOS، نصب از سافاری و از مسیر «Add to Home Screen» انجام می شود و بعضی قابلیت ها مثل نوتیفیکیشن رفتار متفاوتی دارند. اگر کل استدلال شما برای PWA این است که «نوتیفیکیشن بفرستیم»، قبل از تصمیم گیری دقیقا روی همان دستگاه هایی که مشتریانتان دارند تستش کنید.

قبل از اپ، سایت را درست کنید

یک PWA روی سایت کند، همان سایت کند است با آیکن. هیچ کدام از شرط های بالا به سرعت مربوط نیست، پس مرورگر بدون اعتراض نصبش می کند و کاربر همان انتظار قبلی را می کشد. اگر LCP صفحه شما بالای دو ثانیه و نیم است، ترتیب درست کار این است: اول آستانه های Core Web Vitals، بعد مانیفست.

در پروژه هایی که دیده ایم، هزینه ای که برای «اپ کردن» سایت پرداخت می شود معمولا چند برابر هزینه ای است که همان مبلغ در کار روی سرعت صفحه جواب می داد. تصمیم درست معمولا این نیست که کدام یک بهتر است، این است که کدام یک اول.

پرسش های رایج

تفاوت PWA با اپلیکیشن اندروید چیست؟

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

PWA روی سئو اثر دارد؟

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

وردپرس PWA می شود؟

بله، با افزونه یا با چند خط در قالب. نکته اینجاست که خروجی افزونه ها را باید همان طور که بالا گفتیم چک کرد؛ در نمونه های ما یکی از مانیفست های ساخته شده با افزونه، start_url نداشت.

چطور مطمئن شوم PWA سایتم درست کار می کند؟

تب Application در DevTools کروم برای بررسی مانیفست، و Lighthouse برای گزارش کلی. بعد از هر دو، روی یک گوشی واقعی تست کنید؛ شبیه ساز دسکتاپ رفتار نصب را کامل نشان نمی دهد.

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

روش: ۱۱۱ صفحه ایرانی که در نتایج ارگانیک گوگل برای هفت پرسش مرتبط بالا آمده بودند، در ۲۵ مرداد ۱۴۰۵ از یک سرور در هلسینکی خوانده شد. آدرس هر <link rel="manifest"> استخراج و فایلش جداگانه گرفته شد؛ ۲۰ مانیفست یکتا به دست آمد. صفحه هایی که مانیفست را با جاوااسکریپت اضافه می کنند در این شمارش نمی آیند، پس عدد ۲۰ کف است نه سقف.

معیارها از صفحه Installability criteria در web.dev و تعریف فیلدها از مستندات مانیفست در MDN گرفته شده است.