Gỡ lỗi ứng dụng web tiến bộ

Sử dụng bảng điều khiển Ứ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à những ứ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 chức năng tương tự như ứng dụng iOS, Android và 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 vào các vị trí khởi chạy 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 và màn hình chính trên Android và iOS.
• Xuất hiện trong trình chuyển đổi hoạt động, các công cụ tìm kiếm trên thiết bị (chẳng hạn như Spotlight) và trong các trang 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 Ứng dụng. Nếu bạn đang tìm kiếm thông tin trợ giúp về các ngăn khác, hãy xem phần cuối cùng của hướng dẫn này: Hướng dẫn về các ngăn khác của ứng dụng.

Tóm tắt

• Sử dụng thẻ Manifest (Tệp kê khai) để kiểm tra tệp kê khai ứng dụng web.
• Sử dụng thẻ Service Workers cho toàn bộ các tác vụ liên quan đến service worker, chẳng hạn như huỷ đăng ký hoặc cập nhật mộ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 service worker.
• Xem bộ nhớ đệm của trình chạy dịch vụ trên thẻ Cache Storage (Bộ nhớ đệm).
• Huỷ đăng ký một trình chạy dịch vụ và xoá tất cả bộ nhớ cũng như bộ nhớ đệm chỉ bằng một cú nhấp vào 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 Applications (Ứ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 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 Application (Ứng dụng) để kiểm tra tệp kê khai đó.

• Để xem nguồn tệp kê khai, hãy nhấp vào nhãn App Manifest (Tệp kê khai ứng dụng) manifest.webmanifest trong ảnh chụp màn hình ở trên.
• Các phần Danh tính và 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 thử việc đăng ký trình xử lý giao thức URL của PWA chỉ bằng một nút nhấp. Để tìm hiểu thêm, hãy xem phần Kiểm thử việc đăng ký trình xử lý giao thức URL.
• Phần Icons 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 đó.
• Nhóm phần Lối tắt #N hiển thị thông tin về tất cả các đối tượng lối tắt của bạn.
• Bộ ảnh chụp màn hình Ả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ư không tải được biểu tượng), thì thẻ Manifest sẽ hiển thị một phần Installability (Khả năng cài đặt) mô tả lỗi đó.

Xem và kiểm tra biểu tượng có thể chỉnh sửa

Mục Biểu tượng của thẻ Tệp kê khai hiển thị tất 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 khu vực an toàn cho biểu tượng có thể che mờ, định dạng của các biểu tượng thích ứng với nền tảng.

Để cắt biểu tượng sao cho chỉ nhìn thấy khu vực an toàn tối thiểu, 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 đều xuất hiện trong vùng an toàn, thì bạn không cần làm gì cả.

Lắp đặt điều kiện kích hoạt

Chrome cho phé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:

1. Mở trang đích của PWA trong Chrome.

2. Ở bên phải thanh địa chỉ trên cùng, hãy nhấp vào biểu tượng Cài đặt.

   

3. Làm theo hướng dẫn trên màn hình.

Tính năng Cài đặt ứng dụng (hoặc Thêm vào màn hình chính trên một số thiết bị) không thể mô phỏng quy trình cho thiết bị di động. 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ỉ, ngay cả khi DevTools ở Chế độ thiết bị. Tuy nhiên, nếu bạn có thể thêm ứ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 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 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 3 chấm rồi nhấp vào Cài đặt ứng dụng (hoặc Thêm vào màn hình chính).

Kiểm tra lối tắt

Lối tắt cho ứng dụng giúp bạn cung cấp quyền truy cập nhanh vào một số ít thao tác thường dùng mà người dùng cần thực hiện thường xuyên.

Để kiểm tra các lối tắt mà bạn đã xác định trong tệp kê khai, hãy di chuyển đến các phần Lối tắt #N của thẻ 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à một bộ ảnh chụp màn hình vào tệp kê khai, ứng dụng của bạn sẽ có một 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 của thẻ Manifest.

Kiểm thử 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ý làm trình xử lý giao thức URL cho PWA.

Cách kiểm thử trình xử lý:

1. 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.
2. 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. Giờ đây, trình duyệt đã đăng ký PWA làm trình xử lý cho giao thức web+coffee.
3. Trong phần Application (Ứng dụng) > Manifest (Tệp kê khai) > Protocol Handler (Trình xử lý giao thức), hãy nhập URL mà bạn muốn trình xử lý kiểm thử rồi nhấp vào Test protocol (Kiểm thử giao thức). Trong ví dụ này, trình xử lý có thể xử lý americano, chai và latte-macchiato.
4. Khi Chrome hỏi bạn có thể mở ứng dụng này 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).
5. 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ở trong ứng dụng.

Trình chạy dịch vụ

Service worker là một công nghệ cơ bản trong nền tảng web trong tương lai. Đây là những tập lệnh mà trình duyệt chạy ở chế độ nền, tách biệt với một trang web. Các tập lệnh này cho phép bạn truy cập vào những tính năng không cần trang web hoặc lượt 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 khi không có mạng.

Hướng dẫn liên quan:

• Giới thiệu về Service Worker
• Thông báo đẩy: Kịp thời, phù hợp và chính xác

Thẻ Service Workers (Worker dịch vụ) trong bảng điều khiển Application (Ứng dụng) là nơi chính trong Công cụ cho nhà phát triển để kiểm tra và gỡ lỗi worker dịch vụ.

• Nếu một trình chạy dịch vụ được cài đặt vào trang hiện đang mở, thì bạn sẽ thấy trình chạy dịch vụ đó được liệt kê trên 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 https://airhorner.com/.
• Hộp đánh dấu 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 Mạng hoặc lựa chọn Go offline trong 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 đối với mạng sẽ bỏ qua trình chạy dịch vụ và buộc trình duyệt chuyển đến mạng để tìm 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 với 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 một lần cập nhật cho trình chạy dịch vụ được chỉ định.
• Nút Push (Đẩy) mô phỏng một thông báo đẩy không có tải trọng (còn gọi là tickle).
• Nút Đồ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ụ được chỉ định. Hãy xem Xoá bộ nhớ để biết cách huỷ đăng ký một trình chạy dịch vụ và xoá bộ nhớ cũng như bộ nhớ đệm chỉ bằng một lần nhấp vào nút.
• Dòng Source (Nguồn) cho 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 này, bạn sẽ được chuyển đến nguồn của worker dịch vụ.
• Dòng Trạng thái cho biết trạng thái của trình chạy dịch vụ. Số trên dòng này (#16 trong ả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ẽ thấy số này tăng lên mỗi khi tải trang. Bên cạnh trạng thái, bạn sẽ thấy một đường liên kết start (bắt đầu) (nếu trình chạy dịch vụ đã dừng) hoặc một đường liên kết stop (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à khởi động bất cứ lúc nào. Việc dừng rõ ràng trình chạy dịch vụ bằng cách sử dụng đường liên kết stop có thể mô phỏng điều đó. Việc dừng trình chạy dịch vụ là một cách hay để kiểm thử cách hoạt động của mã khi trình chạy dịch vụ khởi động lại. Nó thường cho thấy các lỗi do giả định sai về trạng thái chung liên tục.
• Dòng Clients (Máy khách) cho biết nguồn gốc mà trình chạy dịch vụ được đặt phạm vi. Nút focus (lấy tiêu điểm) thường hữu ích khi bạn có nhiều worker dịch vụ đã đăng ký. Nếu bạn nhấp vào nút focus bên cạnh một trình chạy dịch vụ đang chạy trong một thẻ khác, Chrome sẽ tập trung vào thẻ đó.

• Bảng Chu kỳ cập nhật cho biết các hoạt động của worker dịch vụ và thời gian đã trôi qua của các hoạt độ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 bài viết Vòng đời của trình chạy dịch vụ.

Nếu trình chạy dịch vụ gây ra lỗi, thẻ Trình chạy dịch vụ sẽ cho thấy biểu tượng Lỗi cùng với số lỗi bên cạnh dòng Nguồn. Đường liên kết có số này sẽ đưa bạn đến Bảng điều khiển có tất cả các lỗi đã ghi.

Để xem thông tin về tất cả các worker dịch vụ, hãy nhấp vào Xem tất cả các lượt đăng ký ở cuối thẻ Service Workers (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 các worker service.

Bộ nhớ đệm của trình chạy dịch vụ

Thẻ Cache Storage (Bộ nhớ đệm) cung cấp danh sách chỉ đọc gồm các tài nguyên đã được lưu vào bộ nhớ đệm bằng Cache API (API Bộ nhớ đệm) (trình chạy dịch vụ).

Xin lưu ý rằng vào lần đầu tiên bạn mở một bộ nhớ đệm và thêm tài nguyên vào đó, DevTools có thể không phát hiện thấy thay đổi. Tải lại trang và bạn sẽ thấy bộ nhớ đệm.

Nếu có từ 2 bộ nhớ đệm trở lên đang mở, bạn sẽ thấy chúng được liệt kê bên dưới trình đơn thả xuống Bộ nhớ đệm.

Hạn mức sử dụng

Một số phản hồi trong thẻ Bộ nhớ đệm có thể bị gắn cờ là "không rõ ràng". Điều này đề cập đến một 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, có một lượng lớn khoảng đệm được thêm 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 được đưa ra hay không) và được API navigator.storage báo cáo.

Thông tin chi tiết về khoảng đệm này sẽ 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ờ được lưu vào bộ nhớ đệm nào đó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:

• Stack Overflow: Những hạn chế nào áp dụng cho câu trả lời không rõ ràng?
• Workbox: Tìm hiểu về hạn mức bộ nhớ

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 ứng dụng web tiến bộ. Thẻ này cho phép bạn huỷ đăng ký các worker dịch vụ và xoá tất cả bộ nhớ đệm và bộ nhớ chỉ bằng một cú nhấp vào nút. Hãy xem phần bên dưới để tìm hiểu thêm.

Hướng dẫn liên quan:

• Xoá bộ nhớ

Các hướng dẫn khác về bảng điều khiển Ứng dụng

Hãy xem các hướng dẫn bên dưới để biết thêm thông tin về các ngăn khác của bảng điều khiển Ứng dụng.

Hướng dẫn liên quan:

• Kiểm tra tài nguyên trang
• Kiểm tra và quản lý bộ nhớ cục bộ và bộ nhớ đệm