این مقاله مقدمه‌ای بر برنامه‌های وب پیشرو(PWA) ارائه می‌کند، در مورد چیستی آنها و مزایایی که نسبت به برنامه‌های وب معمولی ارائه می‌کنند بحث می‌کند
برنامه وب پیشرو(PWA) چیست؟
PWAها برنامه های وب هستند که با استفاده از تعدادی فناوری خاص و الگوهای استاندارد توسعه یافته اند تا به آنها امکان استفاده از ویژگی های وب و برنامه های بومی را بدهد.
به عنوان مثال، برنامه های وب بیشتر از برنامه های بومی قابل شناسایی هستند.
بازدید از یک وب سایت بسیار ساده تر و سریعتر از نصب یک برنامه کاربردی است و همچنین می توانید با ارسال یک پیوند، برنامه های وب را به اشتراک بگذارید
از سوی دیگر، برنامه های بومی بهتر با سیستم عامل یکپارچه می شوند و بنابراین تجربه یکپارچه تری را برای کاربران ارائه می دهند.
شما می توانید یک برنامه بومی را نصب کنید تا به صورت آفلاین کار کند، و کاربران دوست دارند به جای اینکه با استفاده از مرورگر به سمت آن حرکت کنند، روی نمادهای آنها برای دسترسی آسان به برنامه های مورد علاقه خود ضربه بزنند
PWA ها به ما توانایی ایجاد برنامه های وب را می دهند که می توانند از همین مزایا بهره مند شوند
این یک مفهوم جدید نیست و چنین ایده هایی در گذشته بارها در بستر وب با رویکردهای مختلف مورد بازبینی قرار گرفته اند.
بهبود پیشرونده و طراحی واکنشگرا از قبل به ما اجازه می دهد تا وب سایت های سازگار با موبایل بسازیم
PWAها همه اینها و بیشتر را بدون از دست دادن هیچ یک از ویژگی های موجود که وب را عالی می کند، ارائه می دهند
چه چیزی یک برنامه را به وب برنامه پیشرو(PWA) تبدیل می کند؟
همانطور که در بالا اشاره کردیم،برنامه‌های وب پیشرو(PWA) با یک فناوری واحد ایجاد نمی شوند.
آنها نشان دهنده فلسفه جدیدی برای ساخت برنامه های وب هستند که شامل برخی الگوهای خاص و سایر ویژگی ها می شود.
در نگاه اول مشخص نیست که یک برنامه وب، پیشرو است یا نه.
یک برنامه زمانی که الزامات خاصی را برآورده می‌کند یا مجموعه‌ای از ویژگی‌های داده شده را پیاده‌سازی می‌کند، می‌تواند به عنوان برنامه وب پیشرو در نظر گرفته شود: آفلاین کار می‌کند، قابل نصب است، همگام‌سازی آسان است، می‌تواند اعلان‌های فشار ارسال کند و غیره
علاوه بر این، ابزارهایی برای اندازه گیری کامل بودن (به صورت درصدی) یک اپلیکیشن وب وجود دارد مانند Lighthouse
با اجرای مزایای تکنولوژیکی مختلف، می‌توانیم برنامه‌ای را پیشرفته‌تر کنیم، در نتیجه به امتیاز بالاتری می‌رسیم. اما این فقط یک شاخص تقریبی است
برخی از اصول کلیدی وجود دارد که یک برنامه وب باید سعی کند رعایت کند تا به عنوان وب برنامه پیشرو شناخته شود. باید باشد:
- قابل کشف است، بنابراین مطالب را می توان از طریق موتورهای جستجو پیدا کرد.
- قابل نصب است، بنابراین می‌تواند در صفحه اصلی دستگاه یا راه‌انداز برنامه در دسترس باشد.
- قابل پیوند است، بنابراین می توانید آن را به اشتراک بگذارید
- مستقل از شبکه، بنابراین به صورت آفلاین یا با اتصال شبکه ضعیف کار می کند.
- به تدریج بهبود یافته است، بنابراین هنوز در سطح اولیه در مرورگرهای قدیمی قابل استفاده است، اما در آخرین مرورگرها کاملاً کاربردی است.
- قابلیت تعامل مجدد، بنابراین می‌تواند هر زمان که محتوای جدیدی در دسترس است، اعلان ارسال کند.
- به صورت واکنشگرا طراحی شده است، بنابراین در هر دستگاهی با صفحه نمایش و مرورگر قابل استفاده است – تلفن همراه، تبلت، لپ تاپ، تلویزیون، یخچال و غیره.
- ایمن است، بنابراین ارتباطات بین کاربر، برنامه و سرور شما در برابر هر شخص ثالثی که سعی در دسترسی به داده‌های حساس دارند، ایمن می‌شود
ارائه این ویژگی ها و استفاده از تمام مزایای ارائه شده توسط برنامه های کاربردی وب می تواند یک پیشنهاد متقاعد کننده و بسیار انعطاف پذیر برای کاربران و مشتریان شما ایجاد کند
آیا ارزش انجام این همه کار را دارد؟
کاملا! با تلاش نسبتاً کمی که برای پیاده سازی ویژگی های اصلی لازم است، مزایای آن بسیار زیاد است.
مثلا:
کاهش زمان بارگذاری پس از نصب برنامه، به لطف حافظه پنهان با کارکنان خدمات، همراه با صرفه جویی در پهنای باند و زمان گرانبها
PWAها بارگذاری تقریباً آنی دارند
در مقابل، با یک برنامه بومی، حتی کوچکترین تغییر می تواند کاربر را مجبور به دانلود مجدد کل برنامه کند.
تعامل مجدد با کاربران از طریق استفاده از اعلان‌های سیستم و پیام‌های فشاری که منجر به جذب کاربران بیشتر و نرخ تبدیل بهتر می‌شود.
مزایای برنامه های کاربردی وب
یک برنامه وب پیشرفته با قابلیت کامل باید تمام مزایای زیر را برای کاربر فراهم کند.
قابلیت کشف
هدف نهایی این است که برنامه‌های وب باید نمایش بهتری در موتورهای جستجو داشته باشند، در معرض دید، فهرست‌نویسی و رتبه‌بندی آسان‌تر باشند و دارای ابرداده قابل استفاده توسط مرورگرها باشند تا قابلیت‌های ویژه‌ای به آنها بدهد.
برخی از قابلیت‌ها قبلاً بر روی پلتفرمهای خاص مبتنی بر وب توسط فناوری‌های اختصاصی مانند Open Graph فعال شده‌اند، که قالبی برای تعیین ابرداده مشابه در بلوک <head> HTML با استفاده از تگ‌های <meta> فراهم می‌کند.
استاندارد وب مربوطه در اینجا مانیفست برنامه وب است که ویژگی‌های یک برنامه مانند نام، نماد، صفحه نمایش و رنگ‌های تم را در یک فایل مانیفست با فرمت JSON تعریف می‌کند.
این برای استفاده در زمینه هایی مانند لیست برنامه ها و صفحه اصلی دستگاه است.
قابلیت نصب
بخش اصلی تجربه برنامه وب این است که کاربران نمادهای برنامه را در صفحه اصلی خود داشته باشند و بتوانند برای باز کردن برنامه ها در ظرف اصلی خود ضربه بزنند که به خوبی با پلت فرم زیرین یکپارچه شده است.
برنامه‌های وب مدرن می‌توانند از طریق ویژگی‌های تنظیم شده در مانیفست برنامه وب و از طریق ویژگی موجود در مرورگرهای تلفن هوشمند مدرن به نام نصب برنامه وب، این برنامه بومی را احساس کنند.
قابلیت پیوند
یکی از قدرتمندترین ویژگی های وب، امکان پیوند دادن به یک برنامه در یک URL خاص بدون نیاز به فروشگاه برنامه یا فرآیند نصب پیچیده است و همیشه همینطور بوده است.
استقلال شبکه
برنامه های وب مدرن زمانی می توانند کار کنند که شبکه غیرقابل اعتماد یا حتی وجود نداشته باشد. ایده های اساسی پشت استقلال شبکه عبارتند از:
یک سایت را دوباره بازدید کنید و محتوای آن را دریافت کنید حتی اگر شبکه ای در دسترس نباشد.
هر نوع محتوایی را که کاربر قبلاً حداقل یک بار بازدید کرده است، حتی در شرایط اتصال ضعیف مرور کنید.
در شرایطی که اتصال وجود ندارد، آنچه را که به کاربر نشان داده می شود، کنترل کنید.
این امر با استفاده از ترکیبی از فناوری‌ها به دست می‌آید:
Service Workers برای کنترل درخواست‌های صفحه (برای مثال ذخیره‌سازی آفلاین آنها)، Cache API برای ذخیره پاسخ‌ها به درخواست‌های شبکه به‌صورت آفلاین (بسیار مفید برای ذخیره دارایی‌های سایت)، و فناوری‌های ذخیره‌سازی داده در سمت مشتری مانند به عنوان Web Storage و IndexedDB برای ذخیره اطلاعات برنامه به صورت آفلاین.
پشتیبانی از ارتقای پیشرونده
برنامه‌های وب مدرن را می‌توان برای ارائه یک تجربه عالی برای مرورگرهای کاملاً توانا و یک تجربه قابل قبول (اگرچه نه چندان درخشان) برای مرورگرهای کم توان ایجاد کرد.
ما سال‌هاست که این کار را با بهترین روش‌ها مانند بهبود پیشرونده انجام می‌دهیم.
با استفاده از ارتقاء پیشرونده، PWA ها دارای مرورگر متقابل هستند.
این بدان معناست که توسعه‌دهندگان باید تفاوت‌های پیاده‌سازی برخی از ویژگی‌ها و فناوری‌های PWA را بین پیاده‌سازی‌های مختلف مرورگر در نظر بگیرند.
درگیر شدن مجدد
یکی از مزیت‌های اصلی پلتفرمهای بومی سهولت است که کاربران می‌توانند با به‌روزرسانی‌ها و محتوای جدید دوباره درگیر شوند، حتی زمانی که به برنامه نگاه نمی‌کنند یا از دستگاه‌های خود استفاده نمی‌کنند.
برنامه‌های وب مدرن اکنون می‌توانند این کار را نیز انجام دهند، با استفاده از فناوری‌های جدید مانند Service Workers برای کنترل صفحات، Web Push API برای ارسال به‌روزرسانی‌ها مستقیماً از سروری به برنامه دیگر از طریق یک سرویس‌کار، و Notifications API برای تولید اعلان‌های سیستم برای کمک به تعامل کاربران در هنگام ایجاد آنها به طور فعال از مرورگر وب خود استفاده نمی کنند.
پاسخگویی
برنامه‌های وب واکنشگرا از فناوری‌هایی مانند پرسش‌های رسانه‌ای و viewport استفاده می‌کنند تا مطمئن شوند که رابط‌های کاربری آنها با هر فاکتوری مطابقت دارد: دسکتاپ، موبایل، تبلت یا هر چیز دیگری.
امن است
پلتفرم وب مکانیزم تحویل امنی را ارائه می‌کند که از جاسوسی جلوگیری می‌کند و به طور همزمان تضمین می‌کند که محتوا دستکاری نشده است، تا زمانی که از HTTPS استفاده کنید و برنامه‌های خود را با در نظر گرفتن امنیت توسعه دهید.
همچنین اطمینان از نصب برنامه مناسب برای کاربران آسان است، زیرا URL آن با دامنه سایت شما مطابقت دارد. این بسیار متفاوت از برنامه های موجود در فروشگاه های برنامه است، که ممکن است تعدادی برنامه با نام مشابه داشته باشند، که برخی از آنها ممکن است حتی بر اساس سایت شما باشند، که فقط به سردرگمی می افزاید. برنامه های وب این سردرگمی را از بین می برند و تضمین می کنند که کاربران بهترین تجربه ممکن را دارند.
پشتیبانی از مرورگر
همانطور که قبلا ذکر شد، PWA ها به یک API وابسته نیستند، بلکه از فناوری های مختلف برای رسیدن به هدف ارائه بهترین تجربه وب ممکن استفاده می کنند.
عنصر کلیدی مورد نیاز برای PWA ها، پشتیبانی کارگر خدماتی است.
خوشبختانه کارگران خدمات اکنون در تمام مرورگرهای اصلی روی دسکتاپ و موبایل پشتیبانی می شوند.
سایر ویژگی‌ها مانند مانیفست برنامه وب، اعلان‌های فشاری، و قابلیت افزودن به صفحه اصلی نیز پشتیبانی گسترده‌ای دارند.
در حال حاضر، سافاری پشتیبانی محدودی از Web App Manifest و Add to Home Screen دارد و از اعلان‌های فشار وب پشتیبانی نمی‌کند. با این حال، سایر مرورگرهای اصلی از همه این ویژگی ها پشتیبانی می کنند.
مهم‌تر از همه، باید از قانون بهبود پیشرونده پیروی کنید: از فناوری‌هایی استفاده کنید که ظاهر و کاربرد برنامه شما را در صورت در دسترس بودن بهبود می‌بخشند، اما وقتی آن ویژگی‌ها در دسترس نیستند، همچنان عملکرد اصلی برنامه شما را ارائه می‌دهند.
ارائه یک وب سایت قابل اعتماد با عملکرد خوب نتیجه استفاده از این پیشرفت ها است.
این به نوبه خود به معنای ساخت برنامه های وب است که از شیوه های بهتری پیروی می کنند.
به این ترتیب همه می‌توانند از این برنامه استفاده کنند، اما کسانی که مرورگرهای مدرن دارند از ویژگی‌های PWA بهره بیشتری خواهند برد.
سایر مطالب سیمرغ:
یک دیدگاه بنویسید