Sử dụng bảng điều khiển Application (Ứng dụng) để kiểm tra, sửa đổi và gỡ lỗi tệp kê khai ứng dụng web, trình chạy dịch vụ và bộ nhớ đệm của trình chạy dịch vụ.
Ứng dụng web tiến bộ (PWA) là các ứng dụng hiện đại, chất lượng cao được xây dựng bằng công nghệ web. PWA cung cấp các chức năng tương tự như ứng dụng iOS, Android và ứng dụng dành cho máy tính. Các loại chiến dịch phụ đó là:
- Đáng tin cậy ngay cả trong điều kiện mạng không ổn định.
- Có thể cài đặt để khởi chạy các nền tảng của hệ điều hành, chẳng hạn như thư mục Applications (Ứng dụng) trên Mac OS X, trình đơn Start (Bắt đầu) trên Windows cũng như màn hình chính trên Android và iOS.
- Xuất hiện trong các trình chuyển đổi hoạt động, các công cụ tìm kiếm thiết bị như Tiêu điểm và trong trang tính chia sẻ nội dung.
Hướng dẫn này chỉ thảo luận về các tính năng của Ứng dụng web tiến bộ trong bảng điều khiển Ứng dụng. Nếu bạn đang tìm kiếm trợ giúp về các ngăn khác, hãy xem phần cuối của hướng dẫn này, Hướng dẫn về các ngăn ứng dụng khác.
Tóm tắt
- Sử dụng thẻ Tệp kê khai để kiểm tra tệp kê khai ứng dụng web.
- Sử dụng thẻ Trình chạy dịch vụ cho một loạt tác vụ liên quan đến trình chạy dịch vụ, chẳng hạn như huỷ đăng ký hoặc cập nhật dịch vụ, mô phỏng sự kiện đẩy, chuyển sang chế độ ngoại tuyến hoặc dừng trình chạy dịch vụ.
- Xem bộ nhớ đệm của trình chạy dịch vụ trong thẻ Bộ nhớ bộ nhớ đệm.
- Huỷ đăng ký trình chạy dịch vụ và xoá tất cả bộ nhớ và bộ nhớ đệm bằng một lần nhấp nút trên thẻ Xoá bộ nhớ.
Tệp kê khai ứng dụng web
Nếu muốn người dùng có thể thêm ứng dụng của bạn vào thư mục Ứng dụng của họ trên Mac OS X, trình đơn Start (Bắt đầu) trên Windows cũng như màn hình chính trên Android và iOS, thì bạn cần có tệp kê khai ứng dụng web. Tệp kê khai xác định cách ứng dụng xuất hiện trên màn hình chính, nơi chuyển hướng người dùng khi khởi chạy từ màn hình chính và giao diện của ứng dụng khi khởi chạy.
Sau khi thiết lập tệp kê khai, bạn có thể sử dụng thẻ Manifest (Tệp kê khai) của bảng điều khiển Application (Ứng dụng) để kiểm tra tệp đó.
- Để xem nguồn tệp kê khai, hãy nhấp vào đường liên kết bên dưới nhãn App Manifest (Tệp kê khai ứng dụng) (
manifest.webmanifesttrong ảnh chụp màn hình ở trên). - Các phần Nhận dạng và Bản trình bày chỉ hiển thị các trường từ nguồn tệp kê khai theo cách thân thiện với người dùng hơn.
- Phần Trình xử lý giao thức cho phép bạn kiểm tra việc đăng ký trình xử lý giao thức URL của PWA chỉ bằng một lần nhấp vào một nút. Để tìm hiểu thêm, hãy xem bài viết Kiểm tra hoạt động đăng ký trình xử lý giao thức URL.
- Phần Biểu tượng hiển thị mọi biểu tượng mà bạn đã chỉ định và cho phép bạn kiểm tra mặt nạ của các biểu tượng đó.
- Tập hợp các phần Lối tắt #N hiển thị thông tin về tất cả đối tượng lối tắt của bạn.
- Tập hợp phần Screenshot #N (Ảnh chụp màn hình #N) hiển thị ảnh chụp màn hình cho giao diện người dùng cài đặt phong phú hơn của ứng dụng.
Ngoài ra, nếu Công cụ cho nhà phát triển gặp lỗi, chẳng hạn như một biểu tượng không tải được, thì thẻ Tệp kê khai sẽ hiển thị phần Khả năng cài đặt mô tả lỗi đó.
Xem và kiểm tra các biểu tượng có thể che
Phần Biểu tượng của thẻ Tệp kê khai hiển thị tất cả các biểu tượng của ứng dụng. Trong phần này, bạn cũng có thể kiểm tra các vùng an toàn đối với các biểu tượng có thể che (định dạng của biểu tượng thích ứng với nền tảng).
Để cắt bớt các biểu tượng sao cho chỉ khu vực an toàn tối thiểu mới hiển thị, hãy đánh dấu vào 
Chỉ hiển thị khu vực an toàn tối thiểu cho các biểu tượng che mờ được.
Nếu toàn bộ biểu trưng của bạn hiển thị trong vùng an toàn thì bạn đã sẵn sàng.
Cài đặt điều kiện kích hoạt
Chrome giúp bạn bật và quảng bá việc cài đặt PWA ngay trong giao diện người dùng của Chrome. Tìm hiểu Cách cung cấp trải nghiệm cài đặt trong ứng dụng của riêng bạn.
Cách kích hoạt quy trình cài đặt PWA:
- Mở trang đích của PWA trong Chrome.
Ở bên phải của thanh địa chỉ ở trên cùng, hãy nhấp vào
Cài đặt.
Làm theo hướng dẫn trên màn hình.
Tính năng Cài đặt ứng dụng không thể mô phỏng quy trình làm việc cho thiết bị di động. Hãy lưu ý cách trình duyệt Chrome trên máy tính hiển thị nút cài đặt trong thanh địa chỉ, mặc dù DevTools đang ở Chế độ thiết bị. Tuy nhiên, nếu bạn có thể thêm thành công ứng dụng vào máy tính, thì ứng dụng đó cũng sẽ hoạt động trên thiết bị di động.
Nếu muốn trải nghiệm trải nghiệm thực tế trên thiết bị di động, bạn có thể kết nối một thiết bị di động thực với Công cụ cho nhà phát triển thông qua tính năng gỡ lỗi từ xa. Để kích hoạt quá trình cài đặt trên thiết bị di động đã kết nối, hãy mở trình đơn có biểu tượng ba dấu chấm 
rồi nhấp vào 
Cài đặt ứng dụng.
Kiểm tra lối tắt
Lối tắt ứng dụng cho phép bạn truy cập nhanh vào một số thao tác phổ biến mà người dùng cần thường xuyên.
Để kiểm tra các lối tắt bạn đã xác định trong tệp kê khai, hãy cuộn đến phần Lối tắt #N của thẻ Tệp kê khai.
Kiểm tra ảnh chụp màn hình để có giao diện người dùng cài đặt phong phú hơn
Khi bạn thêm nội dung mô tả và tập hợp ảnh chụp màn hình vào tệp kê khai, ứng dụng của bạn sẽ nhận được hộp thoại cài đặt phong phú hơn.
Để kiểm tra ảnh chụp màn hình, hãy di chuyển đến phần Screenshot #N (Ảnh chụp màn hình #N) của thẻ Manifest (Tệp kê khai).
Kiểm thử việc đăng ký trình xử lý giao thức URL
PWA có thể xử lý những đường liên kết sử dụng một giao thức cụ thể để mang lại trải nghiệm tích hợp hơn. Để tìm hiểu cách tạo trình xử lý, hãy xem bài viết Đăng ký trình xử lý giao thức URL cho PWA.
Để kiểm tra trình xử lý của bạn:
- Mở Công cụ cho nhà phát triển trên trang đích của PWA. Ví dụ: hãy xem PWA minh hoạ này.
- Trên trang minh hoạ, hãy cài đặt PWA rồi tải lại ứng dụng sau khi cài đặt. Trình duyệt hiện đã đăng ký PWA làm trình xử lý cho giao thức
web+coffee. - Trong phần Ứng dụng > Tệp kê khai > Trình xử lý giao thức, hãy nhập URL bạn muốn trình xử lý kiểm tra và nhấp vào Giao thức kiểm tra.
Trong ví dụ này, trình xử lý có thể xử lý americano,chaivàlatte-macchiato. - Khi Chrome hỏi bạn có thể mở ứng dụng hay không, hãy xác nhận bằng cách nhấp vào Open Protocol Handler (Mở trình xử lý giao thức).
- Trong hộp thoại tiếp theo, hãy cho phép ứng dụng xử lý các đường liên kết
web+coffee.
Nếu trình xử lý xử lý thành công đường liên kết, bạn sẽ thấy hình ảnh một tách cà phê được mở ra trong ứng dụng.
Trình chạy dịch vụ
Trình chạy dịch vụ là một công nghệ cơ bản trong nền tảng web trong tương lai. Đây là các tập lệnh mà trình duyệt chạy ở chế độ nền, tách biệt với trang web. Các tập lệnh này cho phép bạn truy cập vào các tính năng không cần trang web hoặc tương tác của người dùng, chẳng hạn như thông báo đẩy, đồng bộ hoá trong nền và trải nghiệm ngoại tuyến.
Hướng dẫn có liên quan:
Thẻ Service Workers (Trình chạy dịch vụ) trong bảng điều khiển Application (Ứng dụng) là nơi chính trong DevTools để kiểm tra và gỡ lỗi trình chạy dịch vụ.
- Nếu một worker dịch vụ được cài đặt cho trang đang mở, thì bạn sẽ thấy worker đó được liệt kê trên thẻ này. Ví dụ: trong ảnh chụp màn hình ở trên, có một worker dịch vụ được cài đặt cho phạm vi của
https://airhorner.com/. - Hộp đánh dấu
Ngoại tuyến sẽ đặt Công cụ cho nhà phát triển vào chế độ ngoại tuyến. Điều này tương đương với chế độ ngoại tuyến có trong bảng điều khiển Network (Mạng), hoặc tuỳ chọn Go offlinetrong Command Menu (Trình đơn lệnh). - Hộp đánh dấu
Cập nhật khi tải lại buộc trình chạy dịch vụ cập nhật mỗi khi tải trang. - Hộp đánh dấu
Bỏ qua cho mạng sẽ bỏ qua trình chạy dịch vụ và buộc trình duyệt truy cập vào mạng đối với các tài nguyên được yêu cầu. - Đường liên kết Yêu cầu mạng sẽ đưa bạn đến bảng điều khiển Network (Mạng), trong đó có danh sách các yêu cầu bị chặn có liên quan đến trình chạy dịch vụ (bộ lọc
is:service-worker-intercepted). - Đường liên kết Cập nhật thực hiện một lần cập nhật của worker dịch vụ được chỉ định.
- Nút Push (Đẩy) mô phỏng một thông báo đẩy không có trọng tải (còn gọi là tiếng chập chờn).
- Nút Sync (Đồng bộ hoá) mô phỏng một sự kiện đồng bộ hoá ở chế độ nền.
- Đường liên kết Huỷ đăng ký sẽ huỷ đăng ký trình chạy dịch vụ đã chỉ định. Hãy xem phần Xoá bộ nhớ để biết cách huỷ đăng ký worker dịch vụ và xoá bộ nhớ và bộ nhớ đệm chỉ bằng một lần nhấp vào nút.
- Dòng Nguồn cho bạn biết thời điểm trình chạy dịch vụ hiện đang chạy được cài đặt. Đường liên kết là tên của tệp nguồn của worker dịch vụ. Khi nhấp vào đường liên kết, bạn sẽ được đưa đến nguồn của nhân viên dịch vụ.
- Dòng Trạng thái cho bạn biết trạng thái của trình chạy dịch vụ. Số trên dòng này (
#16trong ảnh chụp màn hình) cho biết số lần cập nhật worker dịch vụ. Nếu bật hộp đánh dấu
Cập nhật khi tải lại, bạn sẽ thấy số này tăng lên mỗi lần tải trang.
Bên cạnh trạng thái, bạn sẽ thấy đường liên kết bắt đầu (nếu trình chạy dịch vụ bị dừng) hoặc đường liên kết dừng (nếu trình chạy dịch vụ đang chạy). Trình chạy dịch vụ được thiết kế để trình duyệt có thể dừng và bắt đầu bất cứ lúc nào. Bạn có thể mô phỏng việc đó bằng cách dừng rõ ràng worker của dịch vụ bằng đường liên kết stop (dừng). Dừng trình chạy dịch vụ là một cách hay để kiểm thử xem mã của bạn hoạt động như thế nào khi trình chạy dịch vụ bắt đầu sao lưu lại. Công cụ này thường phát hiện lỗi do những giả định sai lầm về trạng thái toàn cầu ổn định. - Dòng Ứng dụng cho bạn biết nguồn gốc mà trình chạy dịch vụ có phạm vi. Nút focus (tập trung) chủ yếu hữu ích khi bạn có nhiều trình chạy dịch vụ đã đăng ký. Nếu bạn nhấp vào nút focus (tập trung) bên cạnh một worker dịch vụ đang chạy trong một thẻ khác, thì Chrome sẽ tập trung vào thẻ đó.
Bảng Chu kỳ cập nhật cho bạn biết các hoạt động của worker dịch vụ và thời gian đã trôi qua, chẳng hạn như cài đặt, chờ và kích hoạt. Để xem dấu thời gian chính xác của từng hoạt động, hãy nhấp vào nút Mở rộng
.
Để biết thêm thông tin, hãy xem phần Vòng đời của trình chạy dịch vụ.
Nếu trình chạy dịch vụ gây ra bất kỳ lỗi nào, thẻ Trình chạy dịch vụ sẽ hiển thị biểu tượng Lỗi 
cùng số lượng lỗi bên cạnh dòng Nguồn.
Đường liên kết kèm theo số điện thoại sẽ đưa bạn đến Bảng điều khiển chứa tất cả các lỗi đã ghi lại.
Để xem thông tin về tất cả worker dịch vụ, hãy nhấp vào Xem tất cả lượt đăng ký ở cuối thẻ Worker dịch vụ. Đường liên kết này sẽ đưa bạn đến chrome://serviceworker-internals/?devtools, nơi bạn có thể gỡ lỗi thêm cho worker dịch vụ.
Bộ nhớ đệm của trình chạy dịch vụ
Thẻ Bộ nhớ đệm cung cấp danh sách chỉ có thể đọc các tài nguyên đã được lưu vào bộ nhớ đệm bằng cách sử dụng Cache API (dịch vụ của worker).
Xin lưu ý rằng trong lần đầu tiên bạn mở bộ nhớ đệm và thêm tài nguyên vào bộ nhớ đệm đó, DevTools có thể không phát hiện được sự thay đổi. Tải lại trang và bạn sẽ thấy bộ nhớ đệm.
Nếu bạn có hai hoặc nhiều bộ nhớ đệm đang mở, bạn sẽ thấy các bộ nhớ đệm đó được liệt kê bên dưới trình đơn thả xuống Bộ nhớ bộ nhớ đệm.
Hạn mức sử dụng
Một số phản hồi trong thẻ Bộ nhớ đệm có thể được gắn cờ là "mờ". Đây là phản hồi được truy xuất từ một nguồn gốc khác, chẳng hạn như từ CDN hoặc API từ xa, khi CORS không được bật.
Để tránh rò rỉ thông tin trên nhiều miền, hệ thống sẽ thêm khoảng đệm đáng kể vào kích thước của phản hồi mờ dùng để tính toán hạn mức bộ nhớ (tức là liệu có ngoại lệ QuotaExceeded nào được gửi hay không) và được API navigator.storage báo cáo.
Thông tin chi tiết về khoảng đệm này khác nhau tuỳ theo trình duyệt, nhưng đối với Google Chrome, điều này có nghĩa là kích thước tối thiểu mà bất kỳ phản hồi mờ nào được lưu vào bộ nhớ đệm đều góp phần vào mức sử dụng bộ nhớ tổng thể là khoảng 7 megabyte. Bạn nên lưu ý điều này khi xác định số lượng phản hồi mờ muốn lưu vào bộ nhớ đệm, vì bạn có thể dễ dàng vượt quá hạn mức bộ nhớ sớm hơn nhiều so với dự kiến dựa trên kích thước thực tế của tài nguyên mờ.
Hướng dẫn có liên quan:
Xóa bộ nhớ
Thẻ Xoá bộ nhớ là một tính năng rất hữu ích khi phát triển các ứng dụng web tiến bộ. Thẻ này cho phép bạn huỷ đăng ký trình chạy dịch vụ và xoá tất cả bộ nhớ đệm và bộ nhớ chỉ bằng một lần nhấp vào nút. Hãy xem phần dưới đây để tìm hiểu thêm.
Hướng dẫn liên quan:
Hướng dẫn khác về bảng điều khiển Ứng dụng
Hãy xem hướng dẫn bên dưới để được trợ giúp thêm về các ngăn khác của bảng điều khiển Application (Ứng dụng).
Hướng dẫn liên quan: