Tại sao việc sử dụng Client-side Routing trong PWA có thể gây ra lỗi 404 khi người dùng truy cập trực tiếp vào một đường dẫn con ở chế độ offline?

Question

Accepted Answer

Đây là vấn đề phổ biến khi PWA sử dụng Single Page Application (SPA) architecture. Khi người dùng truy cập một URL cụ thể (ví dụ: /dashboard/profile), trình duyệt sẽ gửi request đến server. Nếu offline và không có file tương ứng, request sẽ thất bại.
Giải pháp xử lý

Cấu hình Navigation Preload: Đảm bảo Service Worker luôn phục vụ file index.html cho mọi request điều hướng (navigation request).
Cấu hình Service Worker:self.addEventListener('fetch', (event) => {
if (event.request.mode === 'navigate') {
 event.respondWith(caches.match('/index.html'));
}
});

Server-side fallback: Cấu hình server (Nginx/Apache) để redirect mọi request về index.html để SPA router có thể xử lý tiếp.

Lưu ý thực chiến

Luôn đảm bảo index.html được cache ngay từ bước install của Service Worker để đảm bảo trải nghiệm offline hoàn hảo.

Tại sao việc sử dụng Client-side Routing trong PWA có thể gây ra lỗi 404 khi người dùng truy cập trực tiếp vào một đường dẫn con ở chế độ offline?

Làm Chủ Phỏng Vấn & Nâng Cao Trình Độ Chuyên Nghiệp

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi pwa liên quan cùng chủ đề