Sử dụng trình chạy dịch vụ Angular để giúp ứ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ý vấn đề khả năng kết nối hạn chế
Khi người dùng có quyền truy cập mạng hạn chế hoặc hoàn toàn không truy cập được, chức năng của ứng dụng web có thể suy giảm đáng kể và thường gặp lỗi. Việc sử dụng trình chạy dịch vụ để 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à gửi phản hồi trực tiếp từ bộ nhớ đệm cục bộ thay vì truy xuất các yêu cầu đó từ mạng. Sau khi các tài sản của ứng dụng đã được lưu vào bộ nhớ đệm, phương pháp này thực sự có thể tăng tốc ứng dụng và giúp ứng dụng hoạt động khi người dùng không kết nối mạng.
Bài đăng này sẽ hướng dẫn cách thiết lập tính năng lưu trước vào bộ nhớ đệm trong ứng dụng Angular. Giả sử bạn đã quen với việc 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 tập lại, hãy xem bài đăng về Service worker và Cache Storage API.
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 trước được tích hợp tốt với khung và giao diện dòng lệnh Angular (CLI).
Để 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ể 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 này một chút.)
Bây giờ, hãy tạo dự án để phát hành chính thức:
ng build --prod
Bên trong thư mục dist/service-worker-web-dev, bạn sẽ thấy một tệp 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 tạo bản dựng.
Bây giờ, hãy khởi động 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 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ập lệnh ngsw-worker.js tải trực tiếp xuống ở chế độ nền:
Đây là trình chạy dịch vụ Angular sẽ lưu vào bộ nhớ đệm các thành phần tĩnh được chỉ định trong tệp kê khai ngsw.json đã tạo.
Tuy nhiên, thiếu một tài sản quan trọng: nyan.png. Để lưu trước hình ảnh này vào bộ nhớ đệm, bạn cần thêm một mẫu đưa hình ảnh này vào ngsw-config.json. Mẫu này nằm trong thư mục gốc của 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 service worker sẽ lưu trước tất cả các nội dung được chỉ định vào bộ nhớ đệm (hiện bao gồm cả hình ảnh PNG).
Việc chỉ định các tài sản khác để lưu trước vào bộ nhớ đệm cũng rất đơ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 trước 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ộ. Điều này giúp các thành phần này trở nên đáng tin cậy hơn trên các mạng yếu. Cách sử dụng tính năng lưu trước vào bộ nhớ đệm bằng Angular và CLI Angular:
- Thêm gói
@angular/pwavào dự án của bạ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.