Santa Tracker به عنوان PWA

سایت را مشاهده کنید

خلاصه

سانتا ردیاب به سرعت به یک برنامه وب آفلاین پیشرو برای فصل تعطیلات 2016 ارتقا یافت، تا حدی به لطف طراحی صحنه موجود ما.

نتایج

• سانتا یک برنامه وب پیشرفته (PWA) است که از افزودن به صفحه اصلی (ATHS) و آفلاین پشتیبانی می کند
• 10٪ از جلسات واجد شرایط از طریق نماد ATHS شروع شد
• 75 درصد از کاربران به صورت بومی از عناصر سفارشی و سایه DOM، دو بخش اصلی اجزای وب پشتیبانی می‌کنند
• امتیاز فانوس دریایی 81
• آفلاین، از طریق Service Worker API، با بارگیری تنبل فقط صحنه‌های بازدید شده را در حافظه پنهان نگه می‌دارد و در نسخه‌های جدید بی‌صدا آنها را ارتقا می‌دهد.

پس زمینه

Santa Tracker یک سنت تعطیلات در اینجا در Google است. هر سال، می توانید فصل را با بازی ها و تجربیات آموزشی در ماه دسامبر جشن بگیرید. و در حالی که بابانوئل استراحت شایسته‌ای دارد، الف‌ها تلاش می‌کنند تا سانتا ردیاب را به‌عنوان منبع باز، هم در وب و هم برای اندروید منتشر کنند.

در وب، Santa Tracker یک سایت بزرگ و تعاملی با بسیاری از «صحنه‌های» منحصربه‌فرد – نوشته شده با استفاده از پلیمر – است که از اکثر مرورگرهای مدرن پشتیبانی می‌کند. ارزیابی «مدرن» بودن مرورگر کاربر از طریق تشخیص ویژگی تعیین می‌شود: بابانوئل به Set و Web Performance API و سایر موارد نیاز دارد.

در سال 2016، موتور پشت سانتا ردیاب را ارتقا دادیم تا از تجربه آفلاین برای اکثر صحنه ها پشتیبانی کند. این صحنه‌هایی را که توسط ویدیوهای یوتیوب پشتیبانی می‌شوند یا صحنه‌هایی که به مکان زنده بابانوئل می‌پردازند، که البته فقط با اتصال مستقیم به قطب شمال در دسترس است، را شامل نمی‌شود! 📶☃️

چالش ها

بابا نوئل طراحی واکنشگرا را در خود جای داده است که به خوبی در تلفن ها، تبلت ها و دسکتاپ کار می کند. این سایت با چند رسانه ای عالی، از جمله تصاویری سبک و صوتی با مضمون تعطیلات، لذت می برد. با این حال، ساخت معمولی Santa Tracker چند صد مگابایت است! این به چند دلیل است:

• بابا نوئل به بیش از 35 زبان پشتیبانی می شود، بنابراین بسیاری از دارایی ها باید کپی شوند.
• پلتفرم های مختلف از رسانه های مختلف پشتیبانی می کنند (مثلاً mp3 در مقابل ogg).
• فایل های چند رسانه ای گاهی اوقات در اندازه ها و وضوح های مختلف ارائه می شوند.

الف‌های بابانوئل در ماه دسامبر نیز سخت مشغول کار هستند و اغلب در طول ماه به‌روزرسانی‌های جدید و حیاتی را منتشر می‌کنند. این بدان معناست که دارایی‌هایی که قبلاً توسط مرورگر کاربر ذخیره شده‌اند ممکن است در بازدیدهای مکرر نیاز به به‌روزرسانی داشته باشند.

این چالش ها:

• منابع چند رسانه ای بزرگ برای "صحنه های" مختلف
• تغییرات در طول ماه منتشر شد

... منجر به نامناسب بودن یک استراتژی آفلاین ساده لوحانه می شود.

بابانوئل، ساخته شده با پلیمر

ارزش آن را دارد که به عقب برگردیم و در مورد طراحی کلی بابانوئل صحبت کنیم قبل از اینکه به نحوه ارتقا آن به PWA آفلاین بپردازیم.

سانتا یک برنامه تک صفحه ای است که در ابتدا با Polymer 0.5 نوشته شده بود و اکنون به Polymer 1.7 ارتقا یافته است. بابانوئل از یک مجموعه کد مشترک تشکیل شده است - روتر، دارایی های ناوبری مشترک و غیره. همچنین دارای "صحنه های" منحصر به فرد زیادی است.

هر صحنه از طریق یک URL متفاوت قابل دسترسی است - /village.html ، /codelab.html و /boatload.html - و جزء وب خودش است. وقتی کاربر صحنه‌ای را باز می‌کند، همه HTML و دارایی‌های مورد نیاز آن (تصاویر، صدا، css، js) را که در زیر /scenes/[[sceneName]] در مخزن Santa Tracker وجود دارد، از قبل بارگذاری می‌کنیم. در حالی که این اتفاق می افتد، کاربران یک پیش بارگیری دوستانه می بینند که پیشرفت را نشان می دهد.

این رویکرد به این معنی است که ما مجبور نیستیم دارایی های غیر ضروری را برای صحنه هایی که کاربر نمی بیند بارگذاری کنیم (که داده های زیادی است). همچنین به این معنی است که ما باید یک "مانیفست کش" داخلی از تمام دارایی های مورد نیاز برای هر صحنه نگه داریم. مانیفست کش یک فایل JSON است که نقشه ای از نام فایل به هش MD5 محتویات آن را ذخیره می کند.

آنچه را که استفاده می کنید بارگیری کنید

این مدل پهنای باند را صرفه جویی می کند و تنها منابع مورد نیاز برای صحنه هایی را که کاربر بازدید می کند ارائه می کند، نه اینکه کل سایت را به طور همزمان بارگذاری کند. Santa Tracker از توانایی پلیمر برای ارتقاء عناصر سفارشی در زمان اجرا و نه در زمان بارگذاری استفاده می کند. قطعه زیر را در نظر بگیرید:

<lazy-pages id="lazypages" selected-item="&#123;{selectedScene}}" ... >
    <dorf-scene id="village" route="village" icon="1f384" permanent
        mode$="[[mode]]"
        path$="scenes/dorf/dorf-scene_[[language]].html"
        class="santa-scene" allow-page-scrolling></dorf-scene>

    <boatload-scene route="boatload" icon="26f5"
        path$="scenes/boatload/boatload-scene_[[language]].html"
        loading-bg-color="#8fd7f7"
        loading-src="scenes/boatload/img/loading.svg"
        logo="scenes/boatload/img/logo.svg"
        class="santa-scene"></boatload-scene>

Santa Tracker مراحل زیر را برای بارگذاری یک صحنه انجام می دهد، به عنوان مثال، boatload-scene :

1. همه عناصر صحنه (از جمله <boatload-scene> ) در ابتدا ناشناخته هستند و همه به عنوان HTMLUnknownElement با برخی ویژگی های اضافی در نظر گرفته می شوند.
2. هنگامی که صحنه انتخاب شده تغییر می کند، عنصر <lazy-pages> مطلع می شود.
3. عنصر <lazy-pages> ویژگی عنصر و path صحنه را حل می‌کند، و HTML واردات scenes/boatload/boatload-scene_en.html بارگیری می‌کند. این شامل عنصر پلیمر و عناصر وابسته به آن است.
4. پیش بارگذاری دوستانه نشان داده شده است.
5. هنگامی که واردات HTML بارگیری و اجرا شد، <boatload-scene> به طور شفاف به یک عنصر واقعی پلیمر، پر از شادی تعطیلات، ارتقا می یابد. 🎄🎉

این رویکرد چالش های خود را دارد. به عنوان مثال، ما نمی خواهیم اجزای وب تکراری را اضافه کنیم. اگر دو صحنه از یک عنصر مشترک استفاده می کنند، به عنوان مثال، paper-button ، آن را به عنوان بخشی از فرآیند ساخت خود حذف می کنیم و در عوض آن را در کد مشترک بابانوئل قرار می دهیم.

طراحی آفلاین

ردیاب سانتا در حال حاضر به لطف پلیمر و lazy-pages به طور منظم به صحنه ها تقسیم شده است. به علاوه هر صحنه فهرست راهنمای خود را دارد. ما کارمند خدمات Santa Tracker را طراحی کردیم، قطعه اصلی که به آفلاین امکان می دهد که در مرورگر کاربر اجرا شود، از کد مشترک در مقابل تمایز "صحنه" آگاه باشد.

تئوری پشت سرویس Worker چیست؟ هنگامی که یک کاربر در یک مرورگر پشتیبانی شده سایت شما را بارگیری می کند، HTML frontend می تواند درخواست کند که سرویس کار نصب شود. برای Santa Tracker، سرویس‌کار در /sw.js زندگی می‌کند. این یک رویداد install راه اندازی می کند که همه کدهای مشترک بابانوئل را پیش کش می کند، بنابراین نیازی به واکشی چیزی در زمان اجرا نیست.

Service Worker، پس از نصب، می تواند تمام درخواست های HTTP را رهگیری کند. برای Santa Tracker، جریان تصمیم گیری ساده به نظر می رسد:

1. آیا درخواست قبلاً ذخیره شده است؟
   • عالیه پاسخ ذخیره شده را برگردانید.
2. آیا درخواست با دایرکتوری صحنه مطابقت دارد، مانند "scenes/boatload/boatload-scene_en.html"؟
   • درخواست شبکه را انجام دهید و نتیجه را قبل از بازگرداندن آن به کاربر در حافظه پنهان ذخیره کنید.
3. در غیر این صورت، یک درخواست شبکه معمولی را انجام دهید.

رویداد جریان و install ما به Santa Tracker اجازه بارگیری را می دهد، حتی زمانی که کاربر آفلاین است. با این حال، فقط صحنه‌هایی که کاربر قبلاً بارگذاری کرده است در دسترس خواهند بود. این برای پخش مجدد یک بازی و شکست دادن امتیاز بالای شما عالی است.

ناظران مشتاق ممکن است متوجه شوند که استراتژی ذخیره سازی ما اجازه تغییرات در محتوا را نمی دهد. هنگامی که یک فایل در مرورگر کاربر ذخیره می شود، هرگز تغییر نخواهد کرد. بیشتر در مورد آن بعدا.

ما آن را به صورت زنده انجام می دهیم

همانطور که اشاره کردیم، الف‌های بابانوئل در ماه دسامبر به سختی کار می‌کنند و اغلب مجبورند به‌روزرسانی‌های جدید را در طول ماه منتشر کنند. هنگامی که نسخه ای از Santa Tracker ساخته می شود، یک برچسب منحصر به فرد به آن داده می شود - به عنوان مثال، v20161204112055 ، مهر زمانی انتشار (11:20:55 در 4 دسامبر 2016).

برای این نسخه دارای برچسب، ما یک هش MD5 از هر فایل ایجاد می کنیم و آن را در "مانیفست کش" خود ذخیره می کنیم. در یک دیسک حالت جامد مدرن، این تنها چند ثانیه به فرآیند ساخت اضافه می کند.

هر نسخه در یک مسیر منحصر به فرد در سرور ذخیره سازی ثابت Google مستقر می شود. یعنی نسخه های قدیمی تر هرگز حذف نمی شوند. این بدان معناست که پس از انتشار جدید، همه دارایی‌ها URL متفاوتی خواهند داشت - حتی اگر تغییر نکرده باشند - و هر چیزی که توسط مرورگر یا سرویس‌کار ذخیره شود بی‌فایده خواهد بود، مگر اینکه ما کارهای اضافی انجام دهیم.

ما همچنین نسخه جدیدی از آنچه را که منابع "prod" می نامیم - HTML فهرست بابا نوئل و کارگر خدمات - که در https://santatracker.google.com/ زندگی می کنند، مستقر می کنیم. این نسخه قدیمی را بازنویسی می کند.

هر زمان که Santa Tracker بارگیری شود، مرورگر یک سرویس‌کار به‌روزرسانی شده را بررسی می‌کند و در صورت وجود، آن را واکشی می‌کند. در مورد ما، هر نسخه یک کد بایت متفاوت تولید می کند. مرورگر این را به عنوان یک ارتقا می بیند و یک رویداد install جدید را انجام می دهد.

در این مرحله، مرورگرهای کاربر به "مانیفست کش" جدید نگاه می کنند. این با کش موجود کاربر مقایسه می‌شود و اگر دارایی‌ها دارای هش MD5 متفاوتی باشند، آن‌ها را از حافظه پنهان حذف می‌کنیم و از مرورگر می‌خواهیم آن را دوباره واکشی کند. با این حال، در بیشتر موارد، محتوای کش تا حد زیادی یکسان است یا فقط تفاوت های جزئی دارد.

در Santa Tracker، ارتقای سرویس‌کار باعث می‌شود که مرورگر کاربر بلافاصله بارگیری مجدد شود.

تجربه مرور آفلاین

البته، ما همچنین مجبور شدیم برای پشتیبانی از تجربه آفلاین تغییراتی در رابط کاربری ایجاد کنیم - و درک آن را برای کاربرانی که ممکن است انتظار نداشته باشند یک وب‌سایت آفلاین کار کند آسان‌تر کنیم.

یک بنر کوچک به شما می گوید که چه زمانی در حال مرور آفلاین هستید. همه صحنه‌هایی که در حافظه پنهان ذخیره نمی‌شوند، "یخ زده" و غیرقابل کلیک هستند. به این ترتیب، کاربران نمی توانند به محتوایی که در دسترس نیست دسترسی پیدا کنند.

Santa Tracker درخواست های منظمی را به API بابا نوئل می دهد. اگر این درخواست‌ها با شکست مواجه شوند یا به پایان برسد، فرض می‌کنیم که کاربر آفلاین است. ما از این API به جای ویژگی navigator.onLine داخلی مرورگر استفاده می کنیم: این فقط به ما اطلاع می دهد که آیا کاربر ممکن است آنلاین باشد یا خیر. (این همچنین به عنوان Lie-Fi شناخته می شود).

ارتباط بین المللی

در حالی که اکثر کاربران ما به زبان انگلیسی هستند (به دنبال آن ژاپنی، پرتغالی، اسپانیایی و فرانسوی)، بابانوئل به بیش از 35 زبان مختلف ساخته و منتشر شده است.

هنگامی که کاربر Santa Tracker را بارگذاری می کند، ما از زبان مرورگر و سایر نشانه ها برای انتخاب زبانی برای ارائه استفاده می کنیم. اکثر کاربران هرگز این زبان را بازنویسی نمی کنند. با این حال، اگر کاربر زبان جدیدی را از طریق انتخابگر ما انتخاب کند، ما با آن به‌گونه‌ای برخورد می‌کنیم که گویی یک ارتقا در دسترس است - درست مانند مورد بالا، زمانی که نسخه جدیدی از Santa Tracker در دسترس است.

به بیان دیگر، نسخه فعلی Santa Tracker برای اهداف سرویس‌کار در واقع چند تایی از (build, language) است.

به صفحه اصلی اضافه کنید

از آنجایی که بابا نوئل به صورت آفلاین کار می کند و یک سرویس دهنده ارائه می دهد، از کاربران واجد شرایط خواسته می شود آن را در صفحه اصلی خود نصب کنند. در سال 2016، حدود 10 درصد از بارهای واجد شرایط از نماد صفحه اصلی بود.

نتیجه گیری

ما به لطف طراحی صحنه موجود خود که از طریق استفاده موجود از پلیمر و اجزای وب آسان شده است، توانستیم به سرعت سانتا ردیاب را به یک PWA آفلاین تبدیل کنیم - تجربه ای قابل اعتماد و جذاب را ممکن می سازد. همچنین از سیستم ساخت ما برای انجام ارتقاءهای کارآمد استفاده می کند و فقط دارایی های تغییر یافته را باطل می کند.

در حالی که سانتا عمدتاً یک راه حل سفارشی است، بسیاری از اصول آن را می توان در جعبه ابزار برنامه Polymer Project یافت. پیشنهاد می‌کنیم اگر یک PWA جدید را از ابتدا می‌سازید آن را بررسی کنید—یا اگر به دنبال رویکردی برای چارچوب-آگنوستیک هستید، کتابخانه Workbox را امتحان کنید.