Sử dụng trình chạy dịch vụ Angular để làm cho ứng dụng của bạn nhanh hơn và đáng tin cậy hơn trên các mạng có kết nối kém.
Xử lý tình trạng hạn chế khả năng kết nối
Khi người dùng có quyền truy cập mạng hạn chế hoặc hoàn toàn không có quyền truy cập vào mạng, chức năng của ứng dụng web có thể suy giảm đáng kể và thường không hoạt động được. Việc sử dụng service worker để cung cấp tính năng lưu trước vào bộ nhớ đệm cho phép bạn chặn các yêu cầu mạng và phân phối phản hồi trực tiếp từ bộ nhớ đệm cục bộ thay vì truy xuất những yêu cầu đó từ mạng. Sau khi tài sản của ứng dụng được lưu vào bộ nhớ đệm, phương pháp này có thể giúp ứng dụng tăng tốc và giúp ứng dụng hoạt động ngay cả khi người dùng không kết nối mạng.
Bài đăng này hướng dẫn cách thiết lập tính năng lưu vào bộ nhớ đệm trong ứng dụng Angular. Giả sử bạn đã quen thuộc với chức năng lưu vào bộ nhớ đệm và trình chạy dịch vụ nói chung. Nếu bạn cần ôn lại, hãy xem bài đăng Service worker và API lưu trữ bộ nhớ đệm.
Giới thiệu về trình chạy dịch vụ Angular
Nhóm Angular cung cấp một mô-đun trình chạy dịch vụ có chức năng lưu vào bộ nhớ đệm được tích hợp tốt với khung và giao diện dòng lệnh (CLI) góc.
Để thêm trình chạy dịch vụ, hãy chạy lệnh sau trong CLI:
ng add @angular/pwa
@angular/service-worker và @angular/pwa hiện đã được cài đặt trong ứng dụng và sẽ xuất hiện trong package.json. Giản đồ ng-add cũng thêm một tệp có tên là ngsw-config.json vào dự án. Bạn có thể sử dụng tệp này để định cấu hình trình chạy dịch vụ. (Tệp này bao gồm cấu hình mặc định mà bạn sẽ tuỳ chỉnh sau.)
Bây giờ, hãy xây dựng dự án để phát hành công khai:
ng build --prod
Bên trong thư mục dist/service-worker-web-dev, bạn sẽ thấy một tệp có tên là ngsw.json. Tệp này cho trình chạy dịch vụ Angular biết cách lưu các thành phần vào bộ nhớ đệm trong ứng dụng. Tệp này được tạo trong quá trình xây dựng dựa trên cấu hình (ngsw-config.json) và các thành phần được tạo tại thời điểm xây dựng.
Bây giờ, hãy khởi động một máy chủ HTTP trong thư mục chứa tài sản chính thức của ứng dụng, mở URL công khai và xem các yêu cầu mạng của máy chủ đó trong Công cụ của Chrome cho nhà phát triển:
- Nhấn tổ hợp phím "Control + Shift + J" (hoặc "Command+Option+J" trên máy Mac) để mở Công cụ cho nhà phát triển.
- Nhấp vào thẻ Mạng.
Lưu ý rằng thẻ mạng có nhiều thành phần tĩnh được tải trực tiếp xuống trong nền bằng tập lệnh ngsw-worker.js:
Đây là trình chạy dịch vụ Angular lưu trước các thành phần tĩnh được chỉ định trong tệp kê khai ngsw.json đã tạo.
Tuy nhiên, một thành phần quan trọng còn thiếu: nyan.png. Để lưu trước hình ảnh này vào bộ nhớ đệm, bạn cần thêm mẫu chứa hình ảnh này vào ngsw-config.json (nằm ở gốc không gian làm việc):
{
"$schema": "./node_modules/@angular/service-worker/config/schema.json",
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js",
"/assets/*.png"
]
}
},
...
}
Thay đổi này sẽ thêm tất cả hình ảnh PNG trong thư mục /assets vào nhóm thành phần tài nguyên app. Vì installMode cho nhóm thành phần này được đặt thành prefetch, nên trình chạy dịch vụ sẽ lưu trước vào bộ nhớ đệm tất cả các thành phần được chỉ định (nay bao gồm cả hình ảnh PNG).
Việc chỉ định các thành phần khác để lưu trước vào bộ nhớ đệm cũng đơn giản: cập nhật các mẫu trong nhóm thành phần tài nguyên app.
Kết luận
Việc sử dụng trình chạy dịch vụ để lưu vào bộ nhớ đệm có thể cải thiện hiệu suất của ứng dụng bằng cách lưu các thành phần vào bộ nhớ đệm cục bộ. Nhờ đó, các thành phần này trở nên đáng tin cậy hơn khi dùng mạng kém. Cách sử dụng tính năng lưu vào bộ nhớ đệm bằng giao diện dòng lệnh (CLI) của Angular và Angular:
- Thêm gói
@angular/pwavào dự án. - Kiểm soát nội dung mà trình chạy dịch vụ lưu vào bộ nhớ đệm bằng cách chỉnh sửa
ngsw-config.json.