اخیراً بحث‌های بسیار خوبی درباره برنامه‌های وب پیشرو مطرح شده است. این مدل‌ها هنوز نسبتاً جدید هستند، اما اصول آن‌ها می‌تواند به‌طور یکسان برنامه‌های ساخته‌شده با JS خالص، React، Polymer، Angular، یا هر چارچوب دیگری را بهبود بخشد. در این پست، برخی‌از گزینه‌ها و برنامه‌های مرجع را برای شروع کار با برنامه وب پیش‌رونده خودتان در امروز خلاصه می‌کنم.
«برنامه وب پیشرو» چیست؟
باید به‌خاطر داشته باشید که «برنامه‌های وب پیشرو» در همه‌جا کار می‌کنند اما در مرورگرهای نو تقویت می‌شوند. ارتقای پیشرو ستون فقرات مدل است.
آرون گوستافسون ارتقای پیشرو را به بادام‌زمینی M&M تشبیه کرد. بادام‌زمینی محتوای شما است، روکش شکلاتی لایه نمایش شما است، و جاوا اسکریپت شما پوسته آب‌نباتی سخت است. این لایه می‌تواند رنگ‌های مختلفی داشته باشد و تجربه آن بسته به قابلیت‌های مرورگری که از آن استفاده می‌کند می‌تواند متفاوت باشد.
پوسته آب‌نباتی را جایی درنظر بگیرید که بسیاری از ویژگی‌های «برنامه وب پیشرو» می‌توانند در آن قرار بگیرند. این برنامه‌ها تجربه‌هایی هستند که بهترین‌های وب و بهترین‌های برنامه‌ها را ترکیب می‌کنند. این برنامه‌ها از همان اولین بازدید در برگه مرورگر برای کاربران مفید هستند و نیازی به نصب ندارند.
وقتی کاربر ازطریق استفاده مکرر با این برنامه‌ها ارتباط برقرار می‌کند، آن‌ها پوسته آب‌نباتی را حتی شیرین‌تر می‌کنند - بارگیری بسیار سریع در اتصالات شبکه کند (به‌لطف سرویس‌کار)، ارسال اعلان‌های لحظه‌ای مرتبط، و داشتن نماد درجه یک در صفحه اصلی کاربر که می‌تواند آن‌ها را به‌عنوان تجربه‌های برنامه تمام‌صفحه بارگیری کند. همچنین می‌توانند از برنماهای نصب برنامه وب هوشمند بهره ببرند.
برنامه‌های وب پیشرو
- پیشرو - برای هر کاربر، صرف‌نظر از انتخاب مرورگر، کار می‌کند زیرا با ارتقای پیشرو به‌عنوان مستأجر اصلی ساخته شده است.
- واکنش‌گرا - با هر ابعاد، رایانه، تلفن همراه، رایانه لوحی، یا هر چیز دیگری که در آینده بیاید سازگار است.
- مستقل از اتصال - بااستفاده از کارگران خدماتی بهبود یافته است تا در شبکه‌های آفلاین یا با کیفیت پایین کار کند.
- شبیه برنامه - از مدل پوسته برنامه برای ارائه پیمایش‌ها و تعامل‌های سبک برنامه استفاده کنید.
- تازه - به‌لطف فرایند به‌روزرسانی کارگر سرویس، همیشه به‌روز است.
- ایمن - ازطریق TLS ارائه می‌شود تا از جاسوسی جلوگیری شود و اطمینان حاصل شود که محتوا دستکاری نشده است.
- قابل‌کشف - به‌لطف مانیفست‌های W3C و محدوده ثبت کارگر سرویس که به موتورهای جستجو اجازه می‌دهد آن‌ها را پیدا کنند، به‌عنوان «برنامه» قابل‌شناسایی هستند.
- تعامل‌پذیر - با ویژگی‌هایی مثل اعلان لحظه‌ای، تعامل مجدد را آسان کنید.
- نصب‌شدنی - به کاربران اجازه دهید برنامه‌هایی را که برایشان مفیدتر است بدون دردسر فروشگاه برنامه‌ها در صفحه اصلی‌شان «نگه دارند».
- قابل پیوند - به‌راحتی ازطریق نشانی وب هم‌رسانی می‌شود و به نصب پیچیده نیاز ندارد.
«برنامه‌های وب پیشرو» مختص Chrome for Android نیستند. در زیر می‌توانیم ببینیم که برنامه وب پیشرو Pokedex در Firefox برای Android (نسخه بتا) با ویژگی‌های اولیه «افزودن به صفحه اصلی» و ذخیره موقت کارگر سرویس به‌خوبی کار می‌کند.
یکی از جنبه‌های خوب ماهیت «پیش‌رونده» این مدل این است که با ارائه پشتیبانی بهتر ازسوی فروشندگان مرورگر، ویژگی‌ها می‌توانند به‌تدریج باز شوند. برنامه‌های وب پیشرو مانند Pokedex نیز البته در Opera در Android با چند تفاوت قابل توجه در پیاده‌سازی عالی کار می‌کنند:
برای آشنایی بیشتر با «برنامه‌های وب پیشرو»، پست وبلاگ اصلی الکس راسل را که آن‌ها را معرفی می‌کند بخوانید. Paul Kinlan همچنین برچسب Stack Overflow بسیار مفیدی را برای «برنامه‌های وب پیشرو» شروع کرد که ارزش بررسی دارد.
اصول اساسی
مانیفست برنامه وب
مانیفست به برنامه وب شما امکان می‌دهد تا حضور بومی‌تری در صفحه اصلی کاربر داشته باشد. این فایل به برنامه اجازه می‌دهد در حالت تمام‌صفحه (بدون وجود نوار نشانی وب) راه‌اندازی شود، امکان کنترل جهت صفحه را فراهم می‌کند، و در نسخه‌های اخیر Chrome در Android از تعریف کردن صفحه Splash و رنگ زمینه برای نوار نشانی پشتیبانی می‌کند. همچنین برای تعریف مجموعه‌ای از نمادها براساس اندازه و تراکم استفاده می‌شود که برای صفحه اسپلش و نماد صفحه اصلی مذکور استفاده می‌شود.
یک نمونه فایل مانیفست را می‌توانید در کیت شروع وب و در نمونه‌های Google Chrome پیدا کنید. بروس لاوسون یک تولیدکننده مانیفست نوشته است و مونیر لاموری نیز یک اعتبارسنج مانیفست وب کاربردی نوشته است که ارزش بررسی دارد.
در پروژه‌های شخصی‌ام، برای تولید نمادهایی با اندازه درست برای مانیفست برنامه وب و برای استفاده در iOS، رایانه، و غیره، به realfavicongenerator تکیه می‌کنم. ماژول Node نمادهای وب‌سایت نیز می‌تواند به‌عنوان بخشی از فرایند ساخت شما، خروجی مشابهی را به‌دست آورد.
مرورگرهای مبتنی بر Chromium (Chrome، Opera، و غیره) درحال‌حاضر از مانیفست‌های برنامه وب پشتیبانی می‌کنند، Firefox به‌طور فعال درحال توسعه پشتیبانی است، و Edge آن‌ها را به‌عنوان درحال بررسی فهرست می‌کند. WebKit/Safari هنوز سیگنال‌های عمومی درباره قصدشان برای پیاده‌سازی این ویژگی ارسال نکرده‌اند.
برای جزئیات بیشتر، برنامه‌های وب نصب‌شدنی با مانیفست برنامه وب در Chrome برای Android را در «مبانی وب» بخوانید.
برنما «افزودن به صفحه اصلی»
Chrome در Android مدتی است که از افزودن سایت شما به صفحه اصلی پشتیبانی می‌کند، اما نسخه‌های اخیر از پیشنهاد پیش‌گیرانه افزودن سایت‌ها بااستفاده از برنمای نصب برنامه وب بومی نیز پشتیبانی می‌کنند.
برای اینکه پیام‌واره‌های نصب برنامه نمایش داده شود، برنامه شما باید:
- مانیفست برنامه وب معتبر داشته باشد
- ازطریق HTTPS ارائه شود (برای دریافت گواهی رایگان، به letsencrypt مراجعه کنید)
- کارگر خدماتی معتبری ثبت شده باشد
- دو بار بازدید شود و بین بازدیدها حداقل ۵ دقیقه فاصله باشد
تعدادی نمونه برنمای نصب برنامه دردسترس است که از برنماهای پایه تا موارد استفاده پیچیده‌تر مانند نمایش برنامه‌های مرتبط را پوشش می‌دهد.
عامل خدماتی برای ذخیره کردن در حافظه نهان آفلاین
عامل خدماتی اسکریپتی است که در پس‌زمینه و جدا از صفحه وب شما اجرا می‌شود. این اسکریپت به رویدادها، ازجمله درخواست‌های شبکه که از صفحه‌هایی که ارائه می‌دهد، پاسخ می‌دهد. یک کارمند خدمات عمداً طول عمر کوتاهی دارد.
وقتی رویدادی دریافت می‌کند بیدار می‌شود و فقط تا زمانی که برای پردازش آن لازم است اجرا می‌شود. Service worker به شما امکان می‌دهد از Cache API برای ذخیره منابع در حافظه پنهان استفاده کنید و می‌تواند برای ارائه تجربه آفلاین به کاربران استفاده شود.
کارگران خدمات برای ذخیره کردن در حافظه پنهان آفلاین قدرتمند هستند، اما همچنین با بارگیری فوری برای بازدیدهای تکراری از سایت یا برنامه وب شما، عملکرد قابل‌توجهی را ارائه می‌دهند. می‌توانید پوسته برنامه‌تان را در حافظه پنهان ذخیره کنید تا به‌صورت آفلاین کار کند و محتوای آن را بااستفاده از جاوا اسکریپت پر کنید.
مجموعه جامعی از نمونه‌های کارگر سرویس در نمونه‌های Google Chrome دردسترس است. کتاب آشپزی آفلاین جیک آرچیبالد خواندنی است و من به‌شدت توصیه می‌کنم که اگر با Service Worker آشنا نیستید، راهنمای گام‌به‌گام اولین برنامه وب آفلاین شما از پل کینلان را امتحان کنید.
تیم ما همچنین تعدادی از ابزارهای کمکی و ابزارهای ساخت را نگهداری می‌کند که برای کاهش سربار در راه‌اندازی کارگر سرویس مفید هستند. این کتابخانه‌ها در کتابخانه‌های Service Worker فهرست شده‌اند. دو مورد اصلی عبارت‌اند از:
- sw-precache: ابزار زمان ساخت که اسکریپت کارمند سرویس تولید می‌کند که برای پیش‌ذخیره‌سازی پوسته برنامه وب شما مفید است
- sw-toolbox: کتابخانه‌ای که ذخیره در حافظه نهان زمان اجرا را برای منابعی که به‌ندرت استفاده می‌شوند ارائه می‌دهد
جف پوزنیک یک کتاب مقدماتی سریع درباره sw-precache به نام Offline-first, fast, with the sw-precache module و یک codelab درباره همان ابزار نوشته است که ممکن است برای شما مفید باشد.
Chrome، Opera، و Firefox همگی پشتیبانی از کارگر سرویس را پیاده‌سازی کرده‌اند و Edge نیز نشانه‌های عمومی مثبتی درباره علاقه به این ویژگی نشان داده است. Safari به‌طور خلاصه ازطریق طرح پنج ساله پیشنهادی یکی از مهندسان به آن اشاره کرد.
اعلان‌های لحظه‌ای برای تعامل مجدد
درواقع، می‌توانید برنامه‌های وبی بسازید که کاربران بتوانند خارج از برگه با آن‌ها تعامل داشته باشند. مرورگر را می‌توان بست و حتی لازم نیست که کاربران برای تعامل با تجربه شما، به‌طور فعال از برنامه وب شما استفاده کنند. این ویژگی به کارگر سرویس و مانیفست برنامه وب نیاز دارد و براساس برخی‌از ویژگی‌هایی که قبلاً خلاصه شده‌اند ساخته شده است.
Push API در Chrome پیاده‌سازی شده است، در Firefox درحال توسعه است، و در Edge درحال بررسی است. هنوز هیچ سیگنال عمومی‌ای از Safari درباره قصد آن‌ها برای پیاده‌سازی این ویژگی وجود ندارد.
اعلان‌های لحظه‌ای در وب باز مقدمه‌ای جامع برای راه‌اندازی Push توسط Matt Gaunt است و کد آزمایش اعلان‌های لحظه‌ای نیز در «مبانی وب» دردسترس است.
اگر بیشتر به ویدیو علاقه دارید، Michael van Ouwerkerk از تیم Chrome نیز مقدمه‌ای ۶ دقیقه‌ای برای Push دارد.
لایه‌بندی در ویژگی‌های پیشرفته
به‌یاد داشته باشید که تجربه کاربری شما بسته به مرورگری که برای مشاهده برنامه وب شما استفاده می‌شود، می‌تواند سطوح مختلفی از شیرینی داشته باشد. شما کنترل پوسته آب‌نبات سخت را در دست دارید.
ویژگی‌های دیگری که به پلاتفرم وب اضافه می‌شوند، مانند همگام‌سازی پس‌زمینه (برای همگام‌سازی داده‌ها با سرور حتی زمانی که برنامه وب شما بسته است) و بلوتوث وب (برای صحبت با دستگاه‌های بلوتوث از برنامه وب شما) نیز می‌توانند به این روش در برنامه وب پیشرو شما لایه‌بندی شوند.
«همگام‌سازی پس‌زمینه» یک‌باره در Chrome فعال شده است و جیک آرچیبالد ویدیویی از برنامه آفلاین ویکی‌پدیا و مقاله خود دارد که آن را در عمل نشان می‌دهد. اگر به امتحان کردن این میانای برنامه‌سازی کاربردی علاقه دارید، François Beaufort نیز تعدادی نمونه بلوتوث وب دردسترس دارد.
سازگار با چارچوب
واقعاً هیچ مانعی برای اعمال هریک از اصول بالا در برنامه یا چارچوب موجودی که با آن می‌سازید وجود ندارد. چند اصل دیگر که هنگام ساختن «برنامه وب پیش‌رونده» باید به‌خاطر داشته باشید مدل عملکرد کاربرمحور RAIL و پویانمایی‌های مبتنی بر FLIP است.
امیدوارم که در سال ۲۰۱۶، شاهد افزایش تعداد پروژه‌های آماده و پروژه‌های اولیه باشیم که به‌طور طبیعی از «برنامه‌های وب پیشرفته» به‌عنوان یک ویژگی اصلی پشتیبانی می‌کنند. تا آن زمان، مانع افزودن این ویژگی‌ها به برنامه‌های خودتان خیلی زیاد نیست و به نظر من، کاملاً ارزش تلاش را دارد.
معماری
سطوح مختلفی برای میزان «همه‌جانبه» بودن یک مدل «برنامه وب پیشرو» وجود دارد، اما یکی از رویکردهای رایج، معماری آن‌ها حول یک «پوسته برنامه» است. این یک الزام سخت‌گیرانه نیست، اما مزایای متعددی دارد.
معماری پوسته برنامه ذخیره کردن پوسته برنامه (میانای کاربر) در حافظه نهان را تشویق می‌کند تا به‌صورت آفلاین کار کند و محتوای آن را بااستفاده از جاوا اسکریپت پر کند. در بازدیدهای تکراری، این کار به شما امکان می‌دهد پیکسل‌های معنی‌دار را خیلی سریع و بدون شبکه روی صفحه دریافت کنید، حتی اگر محتوایتان درنهایت از آنجا بیاید. این کار با بهبود قابل‌توجه عملکرد همراه است.
جرمی کیت اخیراً اظهار داشت که در این نوع مدل شاید پرداز طرف سرور نباید به‌عنوان یک جایگزین درنظر گرفته شود، بلکه پرداز طرف مشتری باید به‌عنوان یک بهبود درنظر گرفته شود. این بازخورد منصفانه است.
در مدل Application Shell، باید تا حد امکان از پردازش سمت سرور استفاده شود و پردازش پیش‌رونده سمت کارخواه باید به‌عنوان بهبوددهنده استفاده شود، همان‌طور که وقتی کارگر سرویس پشتیبانی می‌شود، تجربه را «بهبود» می‌دهیم. روش‌های زیادی وجود دارد که درنهایت می‌توان به این موضوع پرداخت.
توصیه من این است که گزارش ما را درباره معماری بخوانید و ارزیابی کنید که چگونه اصول مشابه را می‌توان به بهترین شکل در برنامه و پشته خودتان اعمال کرد.
متن‌های استاندارد شروع به کار
پوسته برنامه
مخزن app-shell حاوی پیاده‌سازی تقریباً کاملی از معماری پوسته برنامه است. این برنامه دارای یک پسین نوشته‌شده در Express.js و یک پیشین نوشته‌شده در ES2015 است.
با توجه به اینکه این مدل هم بخش‌های سمت کارخواه و هم بخش‌های سمت سرور را پوشش می‌دهد و اتفاقات زیادی در آنجا رخ می‌دهد، مدتی طول می‌کشد تا با پایگاه کد آشنا شوید. درغیراین‌صورت، این جامع‌ترین نقطه شروع «برنامه وب پیشرو» ما درحال‌حاضر است. تمرکز بعدی ما در این پروژه روی «سندنگار» خواهد بود.
کیت آغازگر Polymer
نقطه شروع رسمی برای برنامه‌های وب Polymer از ویژگی‌های «برنامه وب پیشرو» زیر پشتیبانی می‌کند:
- مانیفست برنامه وب
- صفحه شروع Chrome برای Android
- ذخیره موقت آفلاین عامل خدماتی با عناصر Platinum SW
- اعلان‌های لحظه‌ای (راه‌اندازی دستی لازم است) با عناصر Platinum Push
نسخه فعلی PSK از برخی الگوهای عملکرد پیشرفته‌تر (مانند مدل Application Shell، بارگیری ناهمگام) که در برخی برنامه‌های وب Progressive Polymer می‌بینید پشتیبانی نمی‌کند.
هدف ما این است که این الگوها را در سال ۲۰۱۶ در PSK بگنجانیم، اما آزمایش‌های اولیه در این زمینه را می‌توان در برنامه Polymer Zuperkulblog توسط راب دادسون و سخنرانی عالی Polymer Perf Patterns توسط اریک بیدلمن یافت.
کیت شروع به کار وب
نقطه شروع ما برای پروژه‌های جدید وانیلی شامل ویژگی‌های «برنامه وب پیشرو» زیر است:
- مانیفست برنامه وب
- صفحه شروع Chrome برای Android
- پیش‌ذخیره‌سازی کارگر سرویس به‌لطف sw-precache
اگر ترجیح می‌دهید با JS/ES2015 استاندارد کار کنید و نمی‌توانید از Polymer استفاده کنید، Web Starter Kit می‌تواند به‌عنوان مرجعی مفید باشد که می‌توانید از آن استفاده مجدد کنید یا تکه‌کدهای آن را کپی کنید.
برنامه‌های وب پیشرو با و بدون چارچوب
تعدادی «برنامه وب پیش‌رونده» متن‌باز قبلاً توسط اعضای انجمن با و بدون چارچوب‌ها و کتابخانه‌های JS ساخته شده است. اگر به‌دنبال الهام گرفتن هستید، مخازن زیر ممکن است به‌عنوان مرجع مفید باشند. همچنین برنامه‌های بسیار خوبی هستند.
جاوا اسکریپت وانیلی
- یادداشت‌های صوتی توسط پل لوئیس بااستفاده از معماری مشابهی با
app-shell(گزارش) ساخته شده است - ویکی‌پدیای آفلاین اثر جیک آرچیبالد (ویدیو)
- Air Horner از Paul Kinlan
- Guitar Tuner اثر Paul Lewis (گزارش)
Polymer
- Zuperkulblog از راب دادسون (اسلایدها)
React
Virtual-DOM
- Pokedex اثر نولان لاوسون - برنامه وب پیش‌رونده عالی که رویکرد «انجام همه کارها در وب‌ورکر» را برای کمک به رندر پیش‌رونده اعمال می‌کند. (گزارش)
Angular.js
- Timey.in از Kenneth Auchenberg - همچنین از
sw-precacheبرای پیش‌ذخیره‌سازی منابع استفاده می‌کند
یادداشت‌های پایانی
همان‌طور که گفته شد، «برنامه‌های وب پیشرو» هنوز در مراحل اولیه هستند اما زمان هیجان‌انگیزی برای بازی با روش‌های پشت آن‌ها و دیدن اینکه چقدر خوب می‌توانند در برنامه‌های وب خودتان اعمال شوند است.
پاول کینلان درحال‌حاضر درحال برنامه‌ریزی برای راهنمای «مبانی وب» درباره «برنامه‌های وب پیش‌رونده» است و اگر نظری درباره بخش‌هایی دارید که مایلید پوشش داده شوند، لطفاً در رشته نظر دهید.
مطالعه بیشتر
- برنامه‌های وب پیشرو: فرار از برگه‌ها بدون ازدست دادن روحمان
- چرا برنامه‌های وب پیشرو آینده توسعه وب هستند
- برنامه‌های وب پیشرو: آماده برای Primetime
- ساختن برنامه پیشرو با ServiceWorker
- برنامه‌های وب پیشرو آینده هستند
- برنامه وب پیشرو: روشی جدید برای تجربه تلفن همراه
- معرفی Pokedex.org: برنامه وب پیشرو برای طرفداران پوکمون
- خلاصه اجلاس توسعه‌دهندگان Chrome: برنامه‌های وب پیشرو