برنامه وب پیشرو یک وب سایت است. همه دارایی‌های آن مانند وب هستند، اما با ابزارهای جدید به منظور بارگیری سریع آن دارایی‌ها در زمان آنلاین و در دسترس بودن در حالت آفلاین.
اجزای برنامه
توسعه یک برنامه معمولاً شامل چندین دارایی و منابع است، از منطق و کد (کامپایل شده یا نه) گرفته تا عناصر رابط کاربری مانند طرح‌های صفحه، تصاویر، لوگوها و فونت‌ها.
یک برنامه وب پیشرفته یک وب سایت است، بنابراین تمام دارایی های آن مانند وب است:
- HTML برای محتوا و رندر صفحه اولیه.
- جاوا اسکریپت برای منطق، از جمله توانایی اجرای ماژول های WebAssembly (کد کامپایل شده) و ارائه گرافیک های دوبعدی و سه بعدی بهینه سخت افزار.
- CSS برای چیدمان، استایل و انیمیشن ها.
- تصاویر در قالب های وب مانند PNG، JPEG، WebP و SVG.
- ویدئوها در قالب های وب، مانند MPEG-4 و WebM.
- فونت های وب
- داده ها در JSON یا فرمت های دیگر.
به‌طور پیش‌فرض، وب‌سایت‌ها دارایی‌ها را از طریق شبکه دانلود می‌کنند، که با HTML شروع می‌شود و تا بقیه منابع ادامه می‌یابد.
مدیریت این منابع برای بارگیری سریع و در دسترس بودن آفلاین یک چالش برای وب بوده است. امروزه، PWAها از قابلیت‌هایی استفاده می‌کنند که قبلاً فقط با برنامه‌های مخصوص پلتفرم مرتبط بود.
برنامه‌های پلتفرم خاص در مقابل PWA
هنگامی که یک برنامه مخصوص پلتفرم را نصب می کنید، معمولاً بسته ای را دانلود می کنید که شامل تمام دارایی های برنامه است: کد، تصاویر، فونت ها، فیلم ها و غیره. بنابراین، همه این منابع، از حافظه دستگاه شما، حتی زمانی که برنامه آفلاین است، در دسترس هستند.
از سوی دیگر، یک وب سایت کلاسیک برای دانلود دارایی ها در صورت لزوم نیاز به اتصال شبکه دارد. اگر آفلاین هستید، یک خطا از مرورگر خواهید دید زیرا هیچ دارایی سمت مشتری وجود ندارد.
رویکرد PWA با در دسترس قرار دادن برخی یا همه دارایی‌ها در سمت مشتری مانند برنامه‌های پلتفرم خاص، تجربه وب سنتی را افزایش می‌دهد. بنابراین، وقتی یک PWA را باز می‌کنید، رندر اولیه می‌تواند به اندازه یک برنامه پلتفرم فوری باشد زیرا دارایی‌ها بدون رفتن به شبکه در دسترس هستند.
کش و ذخیره سازی
از زمان شروع وب، توسعه دهندگان کنترل کاملی بر نحوه ذخیره یک منبع در حافظه پنهان نداشته اند. مرورگر مسئول حافظه نهان HTTP است و ممکن است منابع را بر اساس خط مشی‌های مختلف ذخیره و ارائه دهد. سایر گزینه های ذخیره سازی مانند Web Storage و IndexedDB برای ذخیره داده ها و اشیاء ساده طراحی شده اند.
PWA ها نیازی به تکیه بر این سیاست ها برای محتوای خود ندارند. در عوض، ما امروز راه‌حل‌هایی برای به دست آوردن کنترل بهتر بر زمان و نحوه ذخیره‌سازی منابع و زمان و نحوه ارائه آنها به صورت محلی داریم: API حافظه کش. وب دارای چند راه حل ذخیره سازی سمت مشتری است:
- فضای ذخیره سازی وب : شامل
localStorageوsessionStorageمی باشد. این APIها جفت رشته های کلید/مقدار ساده را ذخیره می کنند. فضای ذخیره سازی وب محدود است و دارای یک API همزمان است، بنابراین تا حد امکان باید از آن اجتناب کرد. - IndexedDB : یک پایگاه داده مبتنی بر شی (No-SQL) با یک API ناهمزمان که برای عملکرد وب خوب است. IndexedDB می تواند داده های ساختار یافته و باینری را در سمت مشتری ذخیره کند. این معمولاً همان چیزی است که برای ذخیره داده ها استفاده می کنید، مانند آنچه که از آن دریافت می کنید یا به عنوان یک درخواست API ارسال می کنید. همچنین مفید است که داده ها را بلافاصله به صورت محلی ذخیره کنید و بعداً آنها را با سرور همگام کنید. IndexedDB API برای تعامل با پایگاه داده استفاده می شود.
- حافظه پنهان : مجموعه‌ای از جفت‌های درخواست و پاسخ HTTP که می‌توانید از آنها برای ذخیره و بازیابی منابع - با هدرهای HTTP آنها - دقیقاً همانطور که از سرور تحویل می‌شوند استفاده کنید. Cache Storage API به شما امکان می دهد درخواست های شبکه را ذخیره، بازیابی، به روز رسانی و حذف کنید، به عنوان مثال برای دارایی های خود، حتی در صورت آفلاین.
نیاز به نیروی خدماتی
یک PWA می‌تواند دارایی‌های خود را در حافظه پنهان و IndexedDB ذخیره کند، اما چگونه می‌توانیم از این دارایی‌ها برای ارائه یک تجربه سریع و آفلاین به کاربران شما استفاده کنیم. جواب؟ کارگران خدماتی
با یک سرویس‌کار، می‌توانید دارایی‌ها را بدون رفتن به شبکه ارائه دهید، اعلان‌ها را برای کاربر ارسال کنید، یک نشان به نماد PWA خود اضافه کنید، محتوا را در پس‌زمینه به‌روزرسانی کنید، و حتی کل PWA خود را آفلاین کنید. در فصل بعدی درباره کارگران خدماتی بیشتر بیاموزید.
آماده آفلاین
کاربران انتظار دارند اپلیکیشن شما تجربه ای سریع و همیشه آماده ارائه دهد. یعنی برنامه شما باید آفلاین کار کند.
آفلاین بودن به این معنی نیست که همه محتوا یا خدمات شما باید بدون اتصال به شبکه در دسترس باشد. با این حال، داشتن حداقل یک تجربه اولیه زمانی که کاربر آفلاین است، مانند صفحه ای که از شما می خواهد برای ادامه به اینترنت متصل شوید، تجربه کاربری بهتری را برای کاربر فراهم می کند و کاربر را به جای خطای عمومی مرورگر، در تجربه برنامه خود نگه می دارد. . در برخی از مرورگرها این یک ویژگی ضروری برای گذراندن معیارهای نصب PWA است. نمایش رابط کاربری PWA، همراه با محتوای کش، بهتر است. اجازه دادن به کاربران برای ادامه استفاده از کل PWA شما و همگام سازی تغییرات سرور زمانی که دوباره آنلاین شدند، استاندارد طلایی برای کار آفلاین است.
برای اینکه برنامه خود را به صورت آفلاین در دسترس قرار دهید، باید دارایی های لازم برای تجربه آفلاین خود را در حافظه پنهان ذخیره کنید و کارمند خدمات خود را مجبور کنید بعداً به آنها خدمت کند. مطمئن شوید که دارایی های آفلاین را قبل از اینکه به آنها نیاز داشته باشید به حافظه پنهان خود اضافه کنید. این یک مورد خاص است که در آن شما نمی توانید آنها را در صورت درخواست ذخیره کنید.
رویکردهای کش پر استفاده
در PWA شما مسئول تمام تصمیمات هستید. شما می توانید بر اساس نیاز خود بهترین رویکرد را برای ذخیره سازی یا نصب دارایی ها انتخاب کنید. برخی از تصمیماتی که باید اتخاذ شود عبارتند از:
- Precaching: دارایی‌هایی را که می‌خواهید در اولین بار نصب کنید، انتخاب کنید. آنها باید شامل HTML و حداقل دارایی ها برای ارائه برنامه باشند. هنگام استفاده از پیش کش به خاطر داشته باشید که از فضای و شبکه دستگاه استفاده می کنید. هنگام دانلود دارایی ها و ذخیره آن ها هوشیار و مسئولیت پذیر باشید.
- حافظه پنهان در صورت نیاز: برای افزودن دارایی ها به حافظه پنهان در صورت درخواست استفاده می شود. معمولاً اینها دارایی هایی هستند که می توانند مستقل از نسخه برنامه شما تغییر کنند، مانند تصاویر یا محتوا. برای استراتژی‌های مختلف در مورد نحوه کش کردن در صورت لزوم، بخش ذخیره را ببینید.
- API ها و خدمات وب: تماس های API را می توان در حافظه پنهان کرد. یا به جای کش کردن پاسخ های API، می توانید داده های آنها را در IndexedDB ذخیره کنید.
به روز رسانی دارایی ها
در مدل استاندارد برنامه برای برنامه های نصب شده کاتالوگ برنامه، زمانی که توسعه دهندگان نیاز به به روز رسانی برنامه خود دارند، بسته جدیدی را منتشر می کنند. کاربران باید دوباره کل بسته را دانلود کنند، حتی اگر اکثر دارایی ها تغییر نکرده باشند. با PWA ها، با استفاده از رویکردهای بخش بالا، تصمیم می گیرید که چگونه و چه زمانی دارایی ها را به روز کنید. در اینجا گزینه های مختلفی برای نحوه به روز رسانی دارایی ها وجود دارد:
- به روز رسانی کامل: در این حالت، هر بار که تغییری در برنامه ایجاد می کنید، حتی یک تغییر جزئی، کد شما دوباره تمام دارایی ها را در حافظه پنهان دانلود می کند.
- به روز رسانی جزئی: در این روش، شما روشی را ایجاد می کنید تا مشخص کنید کدام دارایی ها به روز شده اند و فقط آن ها را با یا بدون دخالت کاربر به روز می کنید.
- به روز رسانی مداوم: با استفاده از این تکنیک، دارایی های شما به صورت جداگانه در هر استفاده از PWA بررسی و به روز می شود.
اندازه و طول عمر
معمولاً برنامه‌های پلتفرم خاص با محدودیت‌های اندازه سروکار ندارند. در هنگام نصب، برنامه ها می توانند گیگابایت یا بیشتر باشند. تا زمانی که دستگاه ظرفیت داشته باشد، نصب مجاز خواهد بود. همچنین، در حالی که برنامه نصب شده است، از کل فضای ذخیره سازی استفاده می کند، مهم نیست که از برنامه استفاده می کنید یا نه. ذخیره سازی برای PWA ها متفاوت است. مرورگر دارایی های شما را بر اساس سیاست هایی که در منطق PWA خود تعریف کرده اید ذخیره می کند.
محدودیت اندازه به مرورگر بستگی دارد. به اندازه برنامه‌های پلتفرم خاص انعطاف‌پذیر نیست، اما معمولاً برای اکثر برنامه‌های وب به اندازه کافی خوب است. شما می توانید محدودیت های خاص بر اساس مرورگر را در این مقاله بیابید.
اگر کاربر از PWA شما در مرورگر استفاده می‌کند، مرورگرها می‌توانند دارایی‌ها را بر اساس فشار ذخیره‌سازی یا پس از چند هفته عدم فعالیت خارج کنند. در برخی از پلتفرم ها، اگر کاربر PWA شما را نصب کند، اخراج اتفاق نمی افتد. در صورت وجود، کد می‌تواند از طریق یک API ذخیره‌سازی دائمی را درخواست کند تا از آن اخراج جلوگیری شود.