Tạo ứng dụng độc lập

Dùng chế độ hiển thị standalone

Để dùng chế độ hiển thị standalone và cho PWA của bạn có cửa sổ riêng, hãy thêm thành phần display vào web app manifest và đặt giá trị của nó thành standalone:

{
  "name": "My app",
  "start_url": "/",
  "icons": [
    {
      "src": "icon.webp",
      "sizes": "48x48",
      "type": "image/webp"
    }
  ],
  "display": "standalone"
}

Lưu ý rằng còn có các chế độ hiển thị khác, chẳng hạn browser, minimal-ui, và fullscreen. Chế độ hiển thị bạn chọn sẽ thay đổi mức độ giao diện người dùng của trình duyệt được hiển thị cho người dùng, từ hiển thị toàn bộ cho đến có cửa sổ riêng. Để tìm hiểu thêm về tất cả các chế độ hiển thị có sẵn và cách chúng dự phòng khi không được hỗ trợ, xem tài liệu về thành phần display.

Thực hành tốt nhất

Xử lý điều hướng nhiều trang

Nếu ứng dụng của bạn được xây dựng bằng nhiều trang HTML có thể điều hướng, hãy nhớ đưa vào các phần tử giao diện để điều khiển việc điều hướng trong ứng dụng.

Nếu bạn không có các phần tử điều hướng riêng, hãy dùng chế độ hiển thị minimal-ui để bảo đảm người dùng vẫn có thể đi giữa các trang bằng các nút trước và sau được trình duyệt hiển thị trên thanh tiêu đề của ứng dụng.

Tùy chỉnh ứng dụng theo chế độ hiển thị

Khi bạn định nghĩa một chế độ hiển thị khác browser trong web app manifest, nó chỉ áp dụng khi ứng dụng được cài đặt. Giống như bất kỳ trang web nào khác, thành phần display trong manifest không có tác dụng khi PWA chưa được cài đặt. Bạn có thể kiểm tra chế độ hiển thị trong lúc chạy để phát hiện ứng dụng đã được cài hay chưa.

Bằng cách dùng đặc tính media CSS display-mode hoặc tính năng JavaScript Window.matchMedia(), bạn có thể chọn lọc áp dụng kiểu CSS hoặc chạy mã JavaScript trong ứng dụng dựa trên chế độ hiển thị của nó.

Sau đây là ví dụ cho thấy cách dùng at-rule CSS @media để chỉ hiển thị một phần tử trên trang web khi chế độ hiển thị standalone được bật:

.app-button {
  display: none;
}

@media (display-mode: standalone) {
  .app-button {
    display: block;
  }
}

Trong ví dụ này, phần tử .app-button sẽ bị ẩn theo mặc định trừ khi chế độ hiển thị được đặt thành standalone, điều này xảy ra nếu thành phần manifest display được đặt thành standalone và ứng dụng đã được cài trên thiết bị của người dùng.

Sau đây là một ví dụ khác cho thấy cách dùng phương thức window.matchMedia() để phát hiện xem chế độ hiển thị standalone có được bật hay không:

function isStandaloneApp() {
  return window.matchMedia("(display-mode: standalone)").matches;
}

Xem thêm

• Web App Manifests.
• Display modes.
• Tùy chỉnh thanh tiêu đề của ứng dụng trên hệ điều hành máy tính bằng cách dùng Window Controls Overlay API.