Các ứng dụng web tiến bộ có thể làm được nhiều việc khác, chứ không chỉ kết xuất nội dung trên màn hình hay kết nối với các dịch vụ web. PWA có thể xử lý các tệp từ hệ thống tệp, tương tác với bảng nhớ tạm của hệ thống, có thể truy cập phần cứng được kết nối với thiết bị và làm nhiều việc khác. Mọi API web đều có sẵn cho PWA của bạn và một số API bổ sung có sẵn khi bạn cài đặt ứng dụng.
Bạn có thể tham khảo bài viết Những việc web có thể làm hôm nay để biết những việc có thể thực hiện trên từng nền tảng. Đối với các API hoặc chức năng riêng lẻ, bạn có thể sử dụng phần Tôi có thể sử dụng không hoặc bảng tương thích với trình duyệt trên MDN.
Luôn kiểm tra xem có hỗ trợ tính năng không
Chữ cái đầu tiên trong PWA là viết tắt của tiến trình và bắt nguồn từ ý tưởng nâng cao dần và phát hiện tính năng. Bạn không nên kỳ vọng ứng dụng của mình hoạt động theo cùng một cách trên mọi thiết bị. Nhờ vào sự tiến bộ của các quốc gia này, PWA đa dạng về bối cảnh và khả năng trên hàng tỷ thiết bị ở các quốc gia khác nhau.
Tức là bạn cần phát triển ứng dụng theo những lớp có thể không có trên một số thiết bị và kiểm tra phạm vi cung cấp trước khi sử dụng.
Bạn cần kiểm tra với JavaScript xem API có tồn tại trước khi sử dụng hay không hoặc hỏi API xem có dịch vụ nào trên thiết bị cụ thể đó không.
Web mạnh mẽ
Ngày nay, web vô cùng mạnh mẽ. Ví dụ:
- Bạn có thể xây dựng ứng dụng trò chuyện video siêu cục bộ bằng WebRTC, vị trí địa lý và thông báo đẩy.
- Bạn có thể làm cho ứng dụng có thể cài đặt.
- Bạn có thể thêm hiệu ứng video bằng WebAssembly.
- Bạn thậm chí có thể mang hình ảnh vào thực tế ảo bằng WebGL và WebXR.
Hỗ trợ PWA
Hãy chia các API chức năng của PWA thành 4 nhóm:
- Màu xanh lục: Các API có sẵn trên mọi trình duyệt của mọi nền tảng, khi về mặt kỹ thuật có thể. Hầu hết những phụ kiện này đã được vận chuyển trong nhiều năm nên đều được coi là đã trưởng thành nên bạn có thể tự tin sử dụng. Một API ví dụ từ nhóm này là API vị trí địa lý.
- Xanh lục nhạt: Các API chỉ có trên một số trình duyệt. Vì không được hỗ trợ trên một số nền tảng, các trình duyệt này đã hoàn thiện trong nhóm con được hỗ trợ của các trình duyệt để bạn có thể tự tin sử dụng tính năng này trên các nền tảng đó. Một ví dụ về API trong nhóm này là WebUSB.
- Màu vàng: API thử nghiệm. Các API này chưa hoàn thiện; chúng chỉ có sẵn trên một số trình duyệt và trong quá trình kiểm thử hoặc dùng thử. Chúng ta đã nói một số về những chức năng này trong Chương thử nghiệm.
- Màu đỏ: nhóm các API mà bạn không thể dùng trong PWA và vẫn sẽ có kế hoạch thêm các API này về lâu dài. Một API mẫu từ nhóm này là khoanh vùng địa lý.
Khả năng xanh
Dưới đây là danh sách các chức năng quan trọng nhất mà bạn có thể dùng trong PWA.
Thông tin cơ bản
- Lưu tệp vào bộ nhớ đệm trên máy bằng cách sử dụng API Bộ nhớ đệm, như trong chương về Bộ nhớ đệm.
- Thực thi các tác vụ trong luồng bằng cách sử dụng trình thực thi web, như chúng ta đã thấy trong chương Quản lý độ phức tạp.
- Quản lý các yêu cầu mạng bằng nhiều chiến lược trong một trình chạy dịch vụ, như trong chương dành cho Trình chạy dịch vụ.
- Canvas 2D để kết xuất đồ hoạ 2D trên màn hình bằng cách sử dụng API Canvas.
- Canvas hiệu suất cao 2D và 3D hoặc WebGL để kết xuất đồ hoạ 3D.
- WebAssembly hay WASM, để thực thi mã đã biên dịch cấp thấp nhằm nâng cao hiệu suất.
- Giao tiếp theo thời gian thực, sử dụng API WebRTC.
- Các API Hiệu suất web để đo lường và giúp mang đến trải nghiệm tốt hơn. Hãy xem hướng dẫn về API Hiệu suất để biết thêm thông tin.
- Lưu trữ dữ liệu trên máy bằng IndexedDB và tính năng quản lý bộ nhớ để truy vấn hạn mức và yêu cầu bộ nhớ liên tục, như trong chương Dữ liệu ngoại tuyến.
- Âm thanh cấp thấp nhờ API Web Audio.
- Phát hiện trên nền trước bằng cách sử dụng API Mức độ hiển thị trang.
- Giao tiếp qua mạng bằng API Tìm nạp và API WebSocket.
Phần cứng và cảm biến
- Vị trí địa lý lấy vị trí của người dùng thông qua các nhà cung cấp khác nhau, chẳng hạn như vệ tinh hoặc Wi-Fi thông qua API vị trí địa lý.
- Máy ảnh và micrô nhận luồng nội dung nghe nhìn từ máy ảnh và micrô bằng giao diện Thiết bị truyền thông.
- Cảm biến thu thập thông tin theo thời gian thực từ gia tốc kế, con quay hồi chuyển, từ kế và các thiết bị khác bằng API Cảm biến hoặc các giao diện cũ hơn (chẳng hạn như DeviceMotionEvent và DeviceOrientationEvent). Trên Safari, bạn cần dùng yêu cầu hộp thoại cấp quyền không theo chuẩn để sử dụng các quyền đó.
- Thao tác chạm và con trỏ giúp bạn truy cập thông tin về tất cả các thao tác chạm và nhấp dựa trên con trỏ mà bạn thực hiện bằng ngón tay, chuột, bàn di chuột hoặc bút, nhờ vào Sự kiện con trỏ và Sự kiện chạm.
- Tay điều khiển trò chơi để đọc thông tin từ các tay điều khiển trò chơi và cần điều khiển tiêu chuẩn được kết nối với thiết bị bằng Gamepad API.
- Xác thực bằng hệ thống nhận dạng sinh trắc học (chẳng hạn như nhận dạng khuôn mặt hoặc vân tay) bằng Xác thực web hoặc WebAuthn.
Tích hợp hệ điều hành
- Nhờ có Web Speech API, công nghệ tổng hợp giọng nói và nhận dạng giọng nói sử dụng giọng nói đã cài đặt của nền tảng để nói chuyện với người dùng và nhận ra nội dung người dùng đang nói.
- Chia sẻ nội dung từ PWA của bạn với các ứng dụng và địa điểm khác trên thiết bị, nhờ Web Share API, như chúng ta sẽ thấy trong chương về Tích hợp hệ điều hành.
- Truy cập bảng nhớ tạm để lưu và truy xuất nội dung từ bảng nhớ tạm ở nhiều định dạng, nhờ Clipboard API, như tôi đã trình bày trong chương về tích hợp hệ điều hành.
- Quản lý thông tin đăng nhập và mật khẩu của người dùng bằng API Quản lý thông tin xác thực.
- Bật chế độ phát video ở chế độ hình trong hình trong hệ điều hành bằng API Hình trong hình.
- Hiển thị nội dung ở chế độ toàn màn hình nhờ API Toàn màn hình, như tôi đã trình bày trong chương trình về Windows.
Chức năng màu xanh lục nhạt
Dưới đây là danh sách các chức năng quan trọng nhất mà bạn có thể dùng trong PWA. Tuy nhiên, xin lưu ý rằng các chức năng này có thể không có trên một số trình duyệt.
Thông tin cơ bản
- WebGL 2.0, phiên bản mới của thông số kỹ thuật WebGL phù hợp với OpenGL 3.0.
- Codec (Bộ mã hoá và giải mã), quyền truy cập cấp thấp vào từng khung hình riêng lẻ trong luồng video và các đoạn âm thanh; hữu ích cho các ứng dụng web cần toàn quyền kiểm soát cách xử lý nội dung nghe nhìn thông qua Web Codecs API.
Phần cứng và cảm biến
- Chế độ kiểm soát nâng cao cho máy ảnh để sử dụng các chế độ điều khiển kéo, nghiêng và thu phóng ngoài API Nội dung nghe nhìn.
- Bluetooth LE để giao tiếp với các thiết bị Bluetooth năng lượng thấp ở gần người dùng bằng API Bluetooth trên web. Hãy xem bài viết giao tiếp với thiết bị Bluetooth qua JavaScript để biết thêm thông tin.
- Giao tiếp phạm vi gần để trao đổi dữ liệu qua NFC thông qua các tin nhắn có định dạng trao đổi dữ liệu NFC (NDEF) nhẹ, chẳng hạn như thẻ hoặc thẻ NFC sử dụng API WebNFC. Bạn cũng có thể đọc bài viết Tương tác với thiết bị NFC trên Chrome dành cho Android để biết thêm chi tiết.
Thiết bị ngoại vi nối tiếp giúp truy cập ở cấp thấp vào các thiết bị được kết nối với thiết bị bằng cổng nối tiếp, USB hoặc qua Bluetooth bằng WPI nối tiếp web. Trong đường liên kết sau đây, bạn có thể tìm hiểu cách đọc từ và ghi vào cổng nối tiếp.
Quyền truy cập thiết bị USB để giao tiếp với các thiết bị được kết nối qua WebUSB API USB. Hãy xem bài viết quyền truy cập vào thiết bị USB trên web để biết thêm thông tin.
Thiết bị có giao diện dành cho người dùng cho phép PWA của bạn tương tác với bất kỳ loại thiết bị không phổ biến nào đã được chuẩn bị cho hoạt động tương tác của con người bằng API WebHID. Hãy xem hướng dẫn này về cách kết nối với các thiết bị HID không phổ biến.
- Ánh sáng xung quanh đọc mức ánh sáng hiện tại hoặc độ chói của ánh sáng xung quanh thiết bị, ngoài API cảm biến.
- Chế độ Rung cung cấp cho người dùng phản hồi xúc giác khi có sự kiện xảy ra (nếu thiết bị hỗ trợ tính năng đó) thông qua API Rung.
- Ghi nội dung nghe nhìn ghi lại dữ liệu do đối tượng MediaStream hoặc HTMLMediaElement (chẳng hạn như thẻ
<video>) tạo ra để phân tích, xử lý hoặc lưu vào ổ đĩa, nhờ MediaRecorder API. - Áp dụng chế độ Khoá chế độ thức trên màn hình để ngăn thiết bị giảm độ sáng hoặc khoá màn hình khi PWA cần tiếp tục chạy thông qua API Khoá chế độ thức trên màn hình.
- Thực tế ảo cho phép bạn sử dụng tai nghe và các thiết bị khác trong PWA nhờ có WebXR Device API.
- Bạn có thể đạt được thực tế tăng cường trong PWA theo nhiều cách, chẳng hạn như sử dụng WebXR Device API hoặc ứng dụng Tìm kiếm nhanh của Safari cho nội dung thực tế tăng cường (AR).
- Phát hiện người dùng không hoạt động bằng API Phát hiện trạng thái rảnh.
- Khoá hướng (Orientation key) khoá hướng dọc hoặc ngang khi PWA đang hiển thị trên màn hình, nhờ có Screen Orientation API (API Định hướng màn hình) hoặc thuộc tính
orientationcủa Tệp kê khai ứng dụng web cho các ứng dụng cần cài đặt. - Trình bày nội dung trên máy chiếu và màn hình phụ, nhờ API Bản trình bày.
- Khoá một con trỏ để nhận thông tin chuyển động delta từ con trỏ (chuột, bàn di chuột và con trỏ) thay vì các giá trị vị trí (hữu ích cho một số trò chơi) nhờ Pointer Lock API.
Tích hợp hệ điều hành
- Đọc và ghi tệp trên thiết bị, nhờ có File System Access API, như bạn đã thấy trong chương Tích hợp hệ điều hành.
- Nhận nội dung từ các ứng dụng khác nhờ Mục tiêu chia sẻ web, như tôi đã trình bày trong chương Tích hợp với hệ điều hành.
- Lấy dữ liệu người liên hệ bằng API Bộ chọn liên hệ, như được trình bày trong chương về Tích hợp hệ điều hành.
- Đồng bộ hoá trong nền khi không dùng PWA nhờ API đồng bộ hoá trong nền.
- Lên lịch tác vụ khi không dùng PWA nhờ API Đồng bộ hoá định kỳ ở chế độ nền.
- Gửi thông báo bằng API Thông báo đẩy trên web và API Thông báo trên web.
- Chuyển tệp trong nền khi người dùng không sử dụng PWA của bạn, nhờ có API Tìm nạp trong nền.
- Tích hợp tính năng phát nội dung nghe nhìn với hệ điều hành bằng cách sử dụng Media Session API.
- Quản lý các khoản thanh toán trong PWA nhờ có Payment Request API. Apple cũng cung cấp thư viện JS của Apple Pay ở đầu API Yêu cầu thanh toán.
- Truy vấn trạng thái mạng, chẳng hạn như loại kết nối (4G, Wi-Fi) và cờ Lưu dữ liệu bằng Network thông tin API.
- Chụp màn hình của người dùng để ghi lại màn hình hoặc chia sẻ màn hình bằng Screen Capture API (API Chụp ảnh màn hình).
- Phát hiện hình dạng bằng các trình phát hiện có tăng tốc phần cứng trên thiết bị, bao gồm cả mã vạch (vẫn đang phát triển công nghệ nhận dạng ký tự quang học (OCR) văn bản và khuôn mặt người) bằng API Phát hiện hình dạng.
- Truy vấn bộ nhớ của thiết bị bằng giao diện Bộ nhớ của thiết bị.
- Mật khẩu một lần qua SMS cho phép bạn tự động nhận mã qua SMS gửi từ máy chủ của bạn bằng API WebOTP. Safari triển khai một tập hợp con giải pháp dựa trên phần tử
<input>. Đọc thêm về tính năng này trong blog của WebKit. - Quản lý bàn phím ảo xuất hiện trên màn hình thiết bị di động bằng API bàn phím ảo.