رسیدگی به درخواست های ناوبری

با استفاده از یک سرویس دهنده بدون انتظار در شبکه به درخواست های ناوبری پاسخ دهید.

جف پوسنیک

درخواست‌های ناوبری درخواست‌هایی برای اسناد HTML هستند که هر زمان که URL جدیدی را در نوار پیمایش وارد می‌کنید یا پیوندی را در صفحه‌ای دنبال می‌کنید که شما را به یک URL جدید می‌برد توسط مرورگر شما ایجاد می‌شود. اینجاست که کارکنان خدمات بیشترین تأثیر خود را بر عملکرد می‌گذارند: اگر از یک کارگر خدماتی برای پاسخگویی به درخواست‌های ناوبری بدون انتظار شبکه استفاده می‌کنید، می‌توانید اطمینان حاصل کنید که ناوبری به طور قابل اعتمادی سریع است، علاوه بر این که در صورت در دسترس نبودن شبکه انعطاف‌پذیر است. این بزرگ‌ترین برد عملکردی است که از یک سرویس‌گر به دست می‌آید، در مقایسه با آنچه که با ذخیره‌سازی HTTP امکان‌پذیر است.

همانطور که در شناسایی منابع بارگیری شده از راهنمای شبکه توضیح داده شده است، یک درخواست ناوبری اولین درخواست از بسیاری از درخواست‌های بالقوه در "آبشار" ترافیک شبکه است. HTML که از طریق یک درخواست ناوبری بارگیری می کنید، جریان تمام درخواست های دیگر برای منابع فرعی مانند تصاویر، اسکریپت ها و سبک ها را آغاز می کند.

در داخل کنترل‌کننده رویداد fetch یک سرویس‌کار، می‌توانید با بررسی ویژگی request.mode در FetchEvent تعیین کنید که آیا درخواست یک پیمایش است. اگر روی 'navigate' تنظیم شده باشد، یک درخواست ناوبری است.

به عنوان یک قاعده کلی، Cache-Control headers با عمر طولانی برای ذخیره پاسخ HTML برای درخواست ناوبری استفاده نکنید. آنها معمولاً باید از طریق شبکه، با Cache-Control: no-cache ارضا شوند تا اطمینان حاصل شود که HTML، همراه با زنجیره درخواست های شبکه بعدی، (به طور منطقی) تازه است. متأسفانه هر بار که کاربر به صفحه جدیدی هدایت می‌شود ، مخالف شبکه است. حداقل به این معنی است که به طور قابل اعتمادی سریع نخواهد بود.

رویکردهای مختلف برای معماری

فهمیدن اینکه چگونه به درخواست‌های ناوبری پاسخ دهید در حالی که از شبکه اجتناب می‌کنید می‌تواند مشکل باشد. رویکرد درست بستگی زیادی به معماری وب سایت شما و تعداد URL های منحصر به فردی دارد که کاربران ممکن است به آنها پیمایش کنند.

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

سایت های استاتیک کوچک

اگر برنامه وب شما از تعداد نسبتاً کمی (فکر کنید: چند ده) URL منحصر به فرد تشکیل شده است، و هر یک از این URL ها با یک فایل HTML ثابت متفاوت مطابقت دارد، یک روش قابل اجرا این است که فقط تمام آن فایل های HTML را در حافظه پنهان نگه دارید و پاسخ دهید. به درخواست های ناوبری با HTML ذخیره شده مناسب.

با استفاده از پیش کش ، می توانید HTML را از قبل، به محض نصب سرویس دهنده، کش کنید، و هر بار که سایت خود را بازسازی می کنید و سرویس کارگر خود را مجدداً مستقر می کنید، HTML ذخیره شده را به روز کنید.

از طرف دیگر، اگر ترجیح می دهید از پیش کش کردن تمام HTML خود اجتناب کنید - شاید به این دلیل که کاربران تمایل دارند فقط به زیر مجموعه ای از URL ها در سایت شما پیمایش کنند - می توانید از یک استراتژی ذخیره سازی زمان اجرا کهنه و اعتبار مجدد استفاده کنید. با این حال مراقب این رویکرد باشید، زیرا هر سند HTML جداگانه ذخیره و به روز می شود. استفاده از کش در زمان اجرا برای HTML در صورتی مناسب‌تر است که تعداد کمی URL داشته باشید که به طور مکرر توسط مجموعه‌ای از کاربران مورد بازدید قرار می‌گیرند، و اگر احساس راحتی می‌کنید که آن URL‌ها مستقل از یکدیگر تأیید مجدد می‌شوند.

برنامه های تک صفحه ای

معماری تک صفحه ای اغلب توسط برنامه های کاربردی وب مدرن استفاده می شود. در آن جاوا اسکریپت سمت کلاینت HTML را در پاسخ به اقدامات کاربر تغییر می دهد. این مدل از History API استفاده می‌کند تا URL فعلی را هنگام تعامل کاربر با برنامه وب تغییر دهد، که به طور مؤثری به یک ناوبری «شبیه‌سازی‌شده» منجر می‌شود. در حالی که پیمایش‌های بعدی ممکن است "جعلی" باشند، پیمایش اولیه واقعی است و هنوز مهم است که مطمئن شوید که در شبکه مسدود نشده است.

خوشبختانه، اگر از معماری تک صفحه ای استفاده می کنید، یک الگوی ساده برای ارائه پیمایش اولیه از حافظه پنهان وجود دارد: پوسته برنامه . در این مدل، سرویس‌کار شما به درخواست‌های ناوبری با بازگرداندن همان فایل HTML تکی که قبلاً ذخیره شده‌اند پاسخ می‌دهد - صرف نظر از URL درخواستی. این HTML باید کاملاً خالی باشد و احتمالاً از یک نشانگر بارگذاری عمومی یا محتوای اسکلت تشکیل شده باشد. هنگامی که مرورگر این HTML را از حافظه پنهان بارگیری کرد، جاوا اسکریپت سمت کلاینت موجود شما کنترل می‌شود و محتوای HTML صحیح را برای URL از درخواست ناوبری اصلی ارائه می‌کند.

Workbox ابزارهایی را فراهم می کند که برای اجرای این رویکرد نیاز دارید. navigateFallback option به شما این امکان را می دهد که مشخص کنید از کدام سند HTML به عنوان پوسته برنامه خود استفاده کنید، همراه با یک لیست اختیاری مجاز و رد برای محدود کردن این رفتار به زیر مجموعه ای از URL های شما.

برنامه های چند صفحه ای

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

اما برای زیرمجموعه خاصی از برنامه های چند صفحه ای، ممکن است بتوانید یک سرویس دهنده را پیاده سازی کنید که به طور کامل منطق استفاده شده در وب سرور شما را برای تولید HTML تکرار کند. اگر بتوانید اطلاعات مسیریابی و الگوسازی را بین محیط سرور و سرویس‌کار به اشتراک بگذارید، و به‌ویژه اگر وب سرور شما از جاوا اسکریپت استفاده می‌کند (بدون تکیه بر ویژگی‌های خاص Node.js ، مانند دسترسی به سیستم فایل) بهترین کار را دارد.

اگر وب سرور شما در آن دسته قرار می گیرد و می خواهید یک رویکرد را برای انتقال تولید HTML به خارج از شبکه و به کارگر خدمات خود بررسی کنید، راهنمایی در Beyond SPAs: معماری های جایگزین برای PWA شما می تواند شما را شروع کند.

همه چیز دیگر

اگر نمی‌توانید به درخواست‌های ناوبری با HTML حافظه پنهان پاسخ دهید، باید اقداماتی را انجام دهید تا اطمینان حاصل کنید که افزودن یک سرویس‌دهنده به سایت شما (برای رسیدگی به سایر درخواست‌های غیر HTML) باعث کاهش سرعت ناوبری شما نمی‌شود. راه‌اندازی سرویس‌کار بدون استفاده از آن برای پاسخ به درخواست ناوبری، مقدار کمی تأخیر ایجاد می‌کند (همانطور که در «ساخت برنامه‌های سریع‌تر و انعطاف‌پذیرتر با Service Worker » توضیح داده شد. می‌توانید با فعال کردن قابلیتی به نام پیش‌بارگیری ناوبری ، و سپس استفاده از پاسخ شبکه‌ای که از قبل در کنترل‌کننده رویداد fetch بارگیری شده است، این سربار را کاهش دهید.

Workbox یک کتابخانه کمکی ارائه می‌کند که ویژگی‌هایی را تشخیص می‌دهد که آیا پیش‌بارگذاری ناوبری پشتیبانی می‌شود یا خیر، و اگر چنین است، فرآیند گفتن به کارمند خدمات شما برای استفاده از پاسخ شبکه را ساده‌تر می‌کند.

عکس از Aaron Burden on Unsplash