1. Chào mừng bạn
Trong phòng thí nghiệm này, bạn sẽ lấy một ứng dụng web hiện có và làm cho ứng dụng đó hoạt động khi không có mạng. Đây là lớp học lập trình đầu tiên trong loạt lớp học lập trình đi kèm cho hội thảo về Ứng dụng web tiến bộ. Còn 7 lớp học lập trình nữa trong loạt lớp học lập trình này.
Kiến thức bạn sẽ học được
- Viết Service Worker theo cách thủ công
- Thêm Service Worker vào một ứng dụng web hiện có
- Sử dụng Service Worker và Cache Storage API để cung cấp tài nguyên khi không có mạng
Những điều bạn cần biết
- HTML và JavaScript cơ bản
Bạn cần có
- Một trình duyệt hỗ trợ Service Worker
2. Bắt đầu thiết lập
Bắt đầu bằng cách sao chép hoặc tải mã khởi đầu cần thiết để hoàn tất lớp học lập trình này:
Nếu bạn sao chép repo, hãy đảm bảo rằng bạn đang ở nhánh starter. Tệp zip cũng chứa mã cho nhánh đó.
Cơ sở mã này yêu cầu Node.js 14 trở lên. Sau khi có mã, hãy chạy npm ci từ dòng lệnh trong thư mục mã để cài đặt tất cả các phần phụ thuộc mà bạn sẽ cần. Sau đó, hãy chạy npm start để khởi động máy chủ phát triển cho lớp học lập trình.
Tệp README.md của mã nguồn cung cấp nội dung giải thích cho tất cả các tệp được phân phối. Ngoài ra, sau đây là các tệp hiện có chính mà bạn sẽ sử dụng trong suốt lớp học lập trình này:
Tệp khoá
js/main.js– Tệp JavaScript của ứng dụng chínhservice-worker.js– Tệp trình chạy dịch vụ của ứng dụng
3. Kiểm thử ngoại tuyến
Trước khi thực hiện bất kỳ thay đổi nào, hãy kiểm thử để cho thấy rằng ứng dụng web hiện không hoạt động khi không có mạng. Để làm như vậy, hãy chuyển máy tính sang chế độ ngoại tuyến rồi tải lại ứng dụng web hoặc nếu bạn đang dùng Chrome, hãy làm như sau:
- Mở Công cụ cho nhà phát triển Chrome
- Chuyển sang thẻ Ứng dụng
- Chuyển sang phần Service Worker
- Chọn hộp Ngoại tuyến
- Làm mới trang mà không đóng Công cụ cho nhà phát triển của Chrome
Sau khi kiểm thử trang web và không tải được trang khi không có mạng, giờ là lúc thêm một số chức năng trực tuyến! Bỏ đánh dấu hộp ngoại tuyến và tiếp tục chuyển sang bước tiếp theo.
4. Tương tác ở những nơi khác
Đã đến lúc thêm một service worker cơ bản! Quá trình này sẽ diễn ra theo hai bước: đăng ký trình chạy dịch vụ và lưu tài nguyên vào bộ nhớ đệm.
Đăng ký trình chạy dịch vụ
Đã có một tệp trình chạy dịch vụ trống, vì vậy, để đảm bảo các thay đổi xuất hiện, hãy đăng ký tệp đó trong ứng dụng của chúng ta. Để làm như vậy, hãy thêm mã sau vào đầu js/main.js:
// Register the service worker if ('serviceWorker' in navigator) { // Wait for the 'load' event to not block other work window.addEventListener('load', async () => { // Try to register the service worker. try { // Capture the registration for later use, if needed let reg; // Use ES Module version of our Service Worker in development if (import.meta.env?.DEV) { reg = await navigator.serviceWorker.register('/service-worker.js', { type: 'module', }); } else { // In production, use the normal service worker registration reg = await navigator.serviceWorker.register('/service-worker.js'); } console.log('Service worker registered! 😎', reg); } catch (err) { console.log('😥 Service worker registration failed: ', err); } }); } Giải thích
Đoạn mã này đăng ký tệp trình chạy dịch vụ service-worker.js trống sau khi trang đã tải và chỉ khi trang web hỗ trợ trình chạy dịch vụ.
Tài nguyên lưu vào bộ nhớ đệm trước
Để ứng dụng web hoạt động khi không có mạng, trình duyệt cần có khả năng phản hồi các yêu cầu mạng và chọn nơi định tuyến các yêu cầu đó. Để làm như vậy, hãy thêm nội dung sau vào service-worker.js
// Choose a cache name const cacheName = 'cache-v1'; // List the files to precache const precacheResources = ['/', '/index.html', '/css/style.css', '/js/main.js', '/js/app/editor.js', '/js/lib/actions.js']; // When the service worker is installing, open the cache and add the precache resources to it self.addEventListener('install', (event) => { console.log('Service worker install event!'); event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(precacheResources))); }); self.addEventListener('activate', (event) => { console.log('Service worker activate event!'); }); // When there's an incoming fetch request, try and respond with a precached resource, otherwise fall back to the network self.addEventListener('fetch', (event) => { console.log('Fetch intercepted for:', event.request.url); event.respondWith( caches.match(event.request).then((cachedResponse) => { if (cachedResponse) { return cachedResponse; } return fetch(event.request); }), ); }); Bây giờ, hãy quay lại trình duyệt, đóng thẻ xem trước rồi mở lại. Bạn sẽ thấy các console.log tương ứng với các sự kiện khác nhau trong worker dịch vụ!
Tiếp theo, hãy chuyển sang chế độ ngoại tuyến rồi làm mới trang web. Bạn sẽ thấy ứng dụng tải ngay cả khi bạn không kết nối mạng!
Giải thích
Trong sự kiện cài đặt của trình chạy dịch vụ, một bộ nhớ đệm có tên sẽ được mở bằng Cache Storage API. Sau đó, các tệp và tuyến đường được chỉ định trong precacheResources sẽ được tải vào bộ nhớ đệm bằng phương thức cache.addAll. Đây được gọi là lưu trước vào bộ nhớ đệm vì thao tác này chủ động lưu vào bộ nhớ đệm tập hợp tệp trong thời gian cài đặt thay vì lưu vào bộ nhớ đệm khi cần hoặc được yêu cầu.
Sau khi service worker kiểm soát trang web, các tài nguyên được yêu cầu sẽ đi qua service worker như một proxy. Mỗi yêu cầu sẽ kích hoạt một sự kiện tìm nạp. Trong trình chạy dịch vụ này, sự kiện tìm nạp sẽ tìm kiếm một kết quả trùng khớp trong bộ nhớ đệm. Nếu có kết quả trùng khớp, sự kiện này sẽ phản hồi bằng tài nguyên được lưu vào bộ nhớ đệm. Nếu không có kết quả khớp, tài nguyên sẽ được yêu cầu như bình thường.
Việc lưu tài nguyên vào bộ nhớ đệm cho phép ứng dụng hoạt động mà không cần kết nối mạng bằng cách tránh các yêu cầu mạng. Giờ đây, ứng dụng có thể trả về mã trạng thái 200 khi không có mạng!
5. Xin chúc mừng!
Bạn đã tìm hiểu cách chuyển ứng dụng web sang chế độ ngoại tuyến bằng cách sử dụng các worker dịch vụ và API bộ nhớ đệm.
Lớp học lập trình tiếp theo trong chuỗi này là Làm việc với Workbox