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 tạo bằng công nghệ web. PWA cung cấp các khả năng tương tự như các ứng dụng dành cho iOS, Android và máy tính. Các yếu tố này 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 Ứng dụng trên Mac OS X, trình đơn Bắt đầu trên Windows và màn hình chính trên Android và iOS.
- Hiển thị trong trình chuyển đổi hoạt động, công cụ tìm kiếm thiết bị như Tiêu điểm và trong trang chia sẻ nội dung.
Hướng dẫn này chỉ thảo luận về các tính năng Ứ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ề bảng điều khiển ứng dụng khác.
Tóm tắt
- Sử dụng thẻ Manifest (Tệp kê khai) để kiểm tra tệp kê khai ứng dụng web của bạn.
- Sử dụng thẻ Service Worker 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 các sự kiện đẩy, chuyển sang chế độ ngoại tuyến hoặc dừng một trình chạy dịch vụ.
- Xem bộ nhớ đệm của trình chạy dịch vụ trong thẻ Cache Storage (Bộ nhớ đệm).
- Huỷ đăng ký một trình chạy dịch vụ và xoá mọi bộ nhớ và bộ nhớ đệm chỉ bằng một thao tác nhấp vào nút trên thẻ Xoá bộ nhớ.
Tệp kê khai ứng dụng web
Nếu bạn muốn người dùng có thể thêm ứng dụng của mình vào thư mục Ứng dụng trên Mac OS X, trình đơn Start (Bắt đầu) trên Windows và màn hình chính trên Android và iOS, bạn cần có một 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 để 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 Tệp kê khai ứng dụng (
manifest.webmanifesttrong ảnh chụp màn hình ở trên). - Các phần Danh tính 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 hơn với người dùng.
- 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 cho PWA chỉ bằng một lần nhấp vào nút. Để tìm hiểu thêm, hãy xem bài viết Kiểm tra việc đă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 Phím tắt #N sẽ hiển thị thông tin về tất cả các đối tượng lối tắt của bạn.
- Phần Screenshot #N (Ảnh chụp màn hình #N) sẽ hiển thị ảnh chụp màn hình để giúp giao diện người dùng cài đặt ứng dụng trở nên phong phú hơn.
Ngoài ra, nếu Công cụ cho nhà phát triển gặp lỗi, chẳng hạn như 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 giấu
Phần Icons (Biểu tượng) trong thẻ Manifest (Tệp kê khai) cho thấy 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 biểu tượng có thể che, định dạng biểu tượng thích ứng với nền tảng.
Để cắt các biểu tượng để chỉ hiển thị vùng an toàn tối thiểu, hãy chọn 
Chỉ hiển thị vùng an toàn tối thiểu cho các biểu tượng có thể che khuất.
Nếu toàn bộ biểu trưng của bạn xuất hiện trong vùng an toàn thì bạn đã có thể tiếp tục sử dụ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. 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 trên thiết bị di động. Hãy lưu ý cách trình duyệt Chrome dành cho máy tính hiển thị nút cài đặt trong thanh địa chỉ, mặc dù Công cụ cho nhà phát triển đang ở Chế độ thiết bị. Tuy nhiên, nếu bạn có thể thêm thành công ứng dụng của mình 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 kiểm thử 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 DevTools 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 của 
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 thực hiện.
Để kiểm tra lối tắt bạn đã xác định trong tệp kê khai, hãy cuộn đến phần Shortcut #N (Lối tắt #N) của thẻ Manifest (Tệp kê khai).
Kiểm tra ảnh chụp màn hình để 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à một bộ ảnh chụp màn hình vào tệp kê khai, ứng dụng 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 Ảnh chụp màn hình #N trong thẻ Tệp kê khai.
Kiểm tra việc đăng ký trình xử lý giao thức URL
PWA có thể xử lý các đườ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.
Cách kiểm thử trình xử lý:
- Mở Công cụ cho nhà phát triển trên trang đích của PWA của bạn. Ví dụ: xem bản minh hoạ PWA 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 mà bạn muốn trình xử lý kiểm tra rồi nhấp vào Kiểm tra giao thức.
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. Chúng là các tập lệnh mà trình duyệt chạy trong 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 mà không cần đến trang web hoặc hoạt động 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 liên quan:
Thẻ Service Worker (Trình chạy dịch vụ) trong bảng điều khiển Application (Ứng dụng) là vị trí chính trong Công cụ cho nhà phát triển để kiểm tra và gỡ lỗi trình chạy dịch vụ.
- Nếu một trình chạy dịch vụ được cài đặt cho trang hiện đang mở, thì bạn sẽ thấy trình chạy đó trong thẻ này. Ví dụ: trong ảnh chụp màn hình ở trên, có một trình chạy dịch vụ được cài đặt cho phạm vi của
https://airhorner.com/. - Hộp đánh dấu
Offline (Ngoại tuyến) sẽ chuyển Công cụ cho nhà phát triển sang 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 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ụ phải cập nhật trong mỗi lần tải trang. - Hộp đánh dấu
Bỏ qua cho mạng bỏ qua trình chạy dịch vụ và buộc trình duyệt phải 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 Mạng có danh sách các yêu cầu bị chặn liên quan đến trình chạy dịch vụ (bộ lọc
is:service-worker-intercepted). - Đường liên kết Update (Cập nhật) thực hiện thao tác cập nhật một lần cho trình chạy dịch vụ đã chỉ định.
- Nút Đẩy mô phỏng một thông báo đẩy không có tải trọng (còn gọi là tích tích).
- Nút Đồng bộ hoá mô phỏng một sự kiện đồng bộ hoá trong 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ý một trình chạy dịch vụ và xoá sạch bộ nhớ cũng như bộ nhớ đệm chỉ bằng một nút nhấp.
- Dòng Source (Nguồn) cho bạn biết thời điểm trình chạy dịch vụ đang chạy đã được cài đặt. Đường liên kết này là tên tệp nguồn của trình chạy dịch vụ. Khi nhấp vào đường liên kết, bạn sẽ được chuyển đến nguồn của trình chạy dịch vụ.
- Dòng Status (Trạng thái) cho bạn biết trạng thái của dịch vụ. Số trên dòng này (
#16trong ảnh chụp màn hình) cho biết số lần trình chạy dịch vụ được cập nhật. Nếu bật hộp đánh dấu Cập nhật khi tải lại
, bạn sẽ nhận thấy số lượng này tăng sau mỗi lần tải trang.
Bên cạnh trạng thái, bạn sẽ thấy một đường liên kết bắt đầu (nếu trình chạy dịch vụ đã 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 dừng và khởi động bất cứ lúc nào. Việc dừng trình chạy dịch vụ một cách rõ ràng bằng cách sử dụng đường liên kết dừng (dừng) có thể mô phỏng hoạt động đó. Dừng trình chạy dịch vụ là một cách tuyệt vời để kiểm thử xem mã của bạn hoạt động như thế nào khi trình chạy dịch vụ này bắt đầu sao lưu lại. Công cụ này thường phát hiện các lỗi do các giả định sai lầm về trạng thái toàn cầu ổn định. - Dòng Clients (Ứng dụng khách) cho bạn biết nguồn gốc của trình chạy dịch vụ. Nút lấy tiêu điểm 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 lấy tiêu điểm bên cạnh một trình chạy dịch vụ đang chạy trong một thẻ khác, thì Chrome sẽ tập trung vào thẻ đó.
Bảng Cập nhật chu kỳ hiển thị cho bạn các hoạt động của trình chạy dịch vụ và thời gian đã trôi qua của chúng, 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 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ẻ Service Workers sẽ hiển thị biểu tượng 
Error cùng với số lượng lỗi bên cạnh dòng Source (Nguồn).
Đường liên kết kèm theo số 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ả trình chạy dịch vụ, hãy nhấp vào Xem tất cả đăng ký ở cuối thẻ Trình chạy dịch vụ. Đường liên kết này dẫn đến chrome://serviceworker-internals/?devtools, nơi bạn có thể gỡ lỗi thêm cho trình chạy dịch vụ của mình.
Bộ nhớ đệm của trình chạy dịch vụ
Thẻ Cache Storage (Bộ nhớ đệm của bộ nhớ đệm) cung cấp danh sách chỉ đọc các tài nguyên đã được lưu vào bộ nhớ đệm bằng API Bộ nhớ đệm (service worker).
Xin lưu ý rằng lần đầu tiên bạn mở bộ nhớ đệm và thêm tài nguyên vào bộ nhớ đệm đó, Công cụ cho nhà phát triển có thể không phát hiện được thay đổi. Tải lại trang và bạn sẽ thấy bộ nhớ đệm.
Nếu đã mở từ hai bộ nhớ đệm trở lên, bạn sẽ thấy các bộ nhớ này được liệt kê bên dưới trình đơn thả xuống Bộ nhớ đệm.
Mức sử dụng hạn mức
Một số phản hồi trong thẻ Bộ nhớ đệm có thể bị gắn cờ là "không rõ ràng". Đây là phản hồi được truy xuất từ một nguồn 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, sẽ có khoảng đệm đáng kể được thêm vào kích thước của phản hồi mờ dùng để tính toán giới hạn hạn mức bộ nhớ (tức là liệu có gửi ngoại lệ QuotaExceeded hay không) và được API navigator.storage báo cáo.
Chi tiết của khoảng đệm này là khác nhau giữa các 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ờ được lưu vào bộ nhớ đệm nào cũng đóng góp 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ờ mà bạn muốn lưu vào bộ nhớ đệm, vì bạn có thể dễ dàng vượt quá giới hạn 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 các tài nguyên mờ.
Hướng dẫn liên quan:
Xoá bộ nhớ
Thẻ Xóa 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 cũng như 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 trên 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: