Làm cho Progressive Web App không giống như một trang web mà giống như một ứng dụng "thực"
Khi bạn chơi trò chơi bingo từ bingo trên Ứng dụng web tiến bộ, bạn có thể yên tâm đặt "PWA chỉ là các trang web". Tài liệu về PWA của Microsoft đồng ý, chúng tôi đồng ý trên trang web này và thậm chí cả các đơn vị tham gia PWA là Frances Berriman và Alex Russell cũng viết như vậy. Có, PWA chỉ là các trang web, nhưng còn hơn thế nữa. Nếu được thiết lập đúng cách, PWA sẽ không cho cảm giác giống như một trang web mà giống như một ứng dụng "thực". Vậy, cảm giác giống như một ứng dụng thực sự có nghĩa là gì?
Để trả lời câu hỏi này, tôi xin phép dùng ứng dụng Podcast của Apple để làm ví dụ. Tính năng này có trên macOS trên máy tính và trên iOS (và iPadOS) tương ứng trên thiết bị di động. Podcast là một ứng dụng truyền thông, nhưng những ý tưởng cốt lõi mà tôi minh hoạ thông qua ứng dụng này cũng áp dụng cho cả các danh mục ứng dụng khác.
Có thể chạy ngoại tuyến
Nếu bạn lùi lại một chút và nghĩ về các ứng dụng dành riêng cho nền tảng mà bạn có trên điện thoại di động hoặc máy tính để bàn, có một điều nổi bật: bạn không bao giờ có được thứ gì cả. Trong ứng dụng Podcasts, ngay cả khi tôi không có kết nối mạng, tôi vẫn luôn có nội dung mới. Khi không có kết nối mạng, ứng dụng vẫn mở một cách tự nhiên. Phần Biểu đồ hàng đầu không hiển thị bất kỳ nội dung nào mà thay vào đó sẽ quay lại thông báo Hiện không thể kết nối ghép nối với nút Thử lại. Đây có thể không phải là trải nghiệm được chào đón nhất, nhưng tôi hiểu điều đó.
Ứng dụng Podcasts tuân theo mô hình giao diện ứng dụng được gọi là. Tất cả nội dung tĩnh cần thiết để hiển thị ứng dụng cốt lõi đều được lưu vào bộ nhớ đệm cục bộ, bao gồm cả các hình ảnh trang trí như biểu tượng trình đơn bên trái và biểu tượng giao diện người dùng của trình phát chính. Nội dung động như dữ liệu Bảng xếp hạng chỉ được tải theo yêu cầu với nội dung dự phòng được lưu vào bộ nhớ đệm cục bộ có sẵn nếu tải không thành công. Hãy đọc bài viết Mô hình giao diện ứng dụng để tìm hiểu cách áp dụng mô hình kiến trúc này vào ứng dụng web của bạn.
Có nội dung ngoại tuyến và có thể phát nội dung nghe nhìn
Khi không có mạng, thông qua ngăn bên trái, tôi vẫn có thể chuyển đến phần Đã tải xuống và thưởng thức các tập podcast đã tải xuống. Các tập podcast này đã sẵn sàng phát và được hiển thị cùng với tất cả siêu dữ liệu như hình minh hoạ và nội dung mô tả.
Bạn có thể phân phát nội dung nghe nhìn đã tải xuống trước đây từ bộ nhớ đệm, chẳng hạn như sử dụng công thức Phân phát âm thanh và video được lưu vào bộ nhớ đệm trong thư viện Workbox. Các nội dung khác luôn có thể được lưu trữ trong bộ nhớ đệm hoặc trong IndexedDB. Hãy đọc bài viết Bộ nhớ cho web để biết tất cả thông tin chi tiết và để biết thời điểm sử dụng công nghệ lưu trữ nào. Nếu có dữ liệu cần được lưu trữ liên tục mà không có nguy cơ bị xoá hoàn toàn khi dung lượng bộ nhớ còn trống sắp hết, thì bạn có thể sử dụng Persistent Storage API (API Bộ nhớ liên tục).
Chủ động tải nền xuống
Tất nhiên, khi có kết nối mạng trở lại, tôi có thể tìm nội dung bằng một cụm từ tìm kiếm như http 203 và khi tôi quyết định đăng ký nhận kết quả tìm kiếm, Podcast HTTP 203, tập mới nhất của bộ sách sẽ được tải xuống ngay lập tức mà không cần đặt câu hỏi.
Tải một tập podcast xuống là một thao tác có thể mất nhiều thời gian hơn. API tìm nạp trong nền cho phép bạn uỷ quyền tải xuống cho trình duyệt. Trình duyệt sẽ xử lý chúng trong nền. Trên Android, trình duyệt thậm chí còn có thể uỷ quyền tiếp tục tải những nội dung tải xuống này cho hệ điều hành, do đó trình duyệt không cần phải chạy liên tục. Sau khi quá trình tải xuống hoàn tất, worker của ứng dụng sẽ được thức dậy và bạn có thể quyết định việc cần làm với phản hồi.
Chia sẻ với và tương tác với các ứng dụng khác
Ứng dụng Podcasts tích hợp một cách tự nhiên với các ứng dụng khác. Ví dụ: khi nhấp chuột phải vào một tập mà tôi thích, tôi có thể chia sẻ tập đó với các ứng dụng khác trên thiết bị, chẳng hạn như ứng dụng Tin nhắn. Ứng dụng này cũng tích hợp tự nhiên với bảng nhớ tạm của hệ thống. Tôi có thể nhấp chuột phải vào một tập bất kỳ rồi sao chép đường liên kết đến tập đó.
API Chia sẻ web và API Mục tiêu của tính năng Chia sẻ web cho phép ứng dụng của bạn chia sẻ và nhận văn bản, tệp cũng như đường liên kết đến và từ các ứng dụng khác trên thiết bị. Mặc dù ứng dụng web chưa thể thêm các mục trong trình đơn vào trình đơn nhấp chuột phải tích hợp sẵn của hệ điều hành, nhưng vẫn có nhiều cách khác để liên kết đến và từ ứng dụng khác trên thiết bị. Với API Bảng nhớ tạm không đồng bộ, bạn có thể lập trình để đọc và ghi dữ liệu văn bản cũng như hình ảnh (ảnh PNG) vào bảng nhớ tạm của hệ thống. Trên Android, bạn có thể sử dụng API Bộ chọn liên hệ để chọn các mục nhập từ trình quản lý danh bạ của thiết bị. Nếu cung cấp cả ứng dụng dành riêng cho nền tảng và PWA, bạn có thể sử dụng Get Install relevant Apps API (API Ứng dụng có liên quan đã cài đặt) để kiểm tra xem ứng dụng dành riêng cho nền tảng đã được cài đặt hay chưa. Trong trường hợp đó, bạn không cần khuyến khích người dùng cài đặt PWA hoặc chấp nhận thông báo đẩy trên web.
Làm mới ứng dụng trong nền
Trong phần cài đặt của ứng dụng Podcasts, tôi có thể định cấu hình để ứng dụng này tự động tải các tập mới xuống. Như vậy, tôi thậm chí không cần phải suy nghĩ về điều đó, nội dung cập nhật sẽ luôn hiện diện ở đó. Phép thuật.
API Đồng bộ hoá định kỳ ở chế độ nền cho phép ứng dụng của bạn thường xuyên làm mới nội dung trong nền mà không cần chạy ứng dụng đó. Điều này có nghĩa là nội dung mới sẽ chủ động được cung cấp để người dùng có thể bắt đầu tìm hiểu ngay lập tức bất cứ khi nào họ quyết định.
Trạng thái được đồng bộ hoá trên đám mây
Đồng thời, các gói thuê bao của tôi được đồng bộ hoá trên tất cả các thiết bị tôi sở hữu. Trong một thế giới liền mạch, tôi không phải lo lắng về việc đồng bộ hoá danh sách kênh đăng ký podcast theo cách thủ công. Tương tự, tôi không phải lo lắng rằng bộ nhớ trên thiết bị di động của mình sẽ bị chiếm dụng bởi các tập phim tôi đã nghe trên máy tính để bàn. Trạng thái phát được duy trì đồng bộ và các tập đã nghe sẽ tự động bị xoá.
Đồng bộ hoá dữ liệu trạng thái ứng dụng là một nhiệm vụ mà bạn có thể uỷ quyền cho API Đồng bộ hoá trong nền. Quá trình đồng bộ hoá không nhất thiết phải diễn ra ngay lập tức mà chỉ cần rốt cuộc và thậm chí là khi người dùng đã đóng lại ứng dụng.
Điều khiển phím phương tiện phần cứng
Khi đang bận sử dụng một ứng dụng khác, chẳng hạn như đọc một trang tin tức trong trình duyệt Chrome, tôi vẫn có thể điều khiển ứng dụng Podcasts bằng các phím phương tiện trên máy tính xách tay. Bạn không cần phải chuyển sang ứng dụng chỉ để tua đi hoặc tua lại.
Các khoá nội dung nghe nhìn được Media Session API hỗ trợ. Như vậy, người dùng có thể sử dụng các phím phương tiện phần cứng trên bàn phím vật lý, tai nghe hay thậm chí điều khiển ứng dụng web bằng các phím phương tiện phần mềm trên đồng hồ thông minh. Một ý tưởng khác để giúp hoạt động tìm kiếm diễn ra suôn sẻ là gửi mẫu rung khi người dùng tìm kiếm một phần đáng kể của nội dung, chẳng hạn như vượt qua phần ghi công mở đầu hoặc ranh giới của chương.
Chế độ đa nhiệm và lối tắt ứng dụng
Tất nhiên, tôi luôn có thể làm nhiều việc cùng lúc bằng ứng dụng Podcasts ở bất cứ đâu. Ứng dụng có một biểu tượng dễ phân biệt mà tôi cũng có thể đặt trên máy tính hoặc thanh Dock ứng dụng để có thể khởi chạy Podcast ngay lập tức khi tôi muốn.
Bạn có thể cài đặt Progressive Web Apps trên cả máy tính và thiết bị di động vào màn hình chính, trình đơn bắt đầu hoặc thanh Dock ứng dụng. Quá trình cài đặt có thể diễn ra dựa trên lời nhắc chủ động hoặc do nhà phát triển ứng dụng kiểm soát hoàn toàn. Bài viết Các yêu cầu để có thể cài đặt ứng dụng là gì? trình bày mọi thông tin bạn cần biết. Khi người dùng làm nhiều việc cùng lúc, PWA sẽ xuất hiện độc lập với trình duyệt.
Các thao tác nhanh trong trình đơn theo bối cảnh
Các thao tác phổ biến nhất trong ứng dụng, Tìm kiếm nội dung mới và Kiểm tra các tập mới, có sẵn ngay từ trình đơn theo bối cảnh của ứng dụng trên Thanh công cụ. Thông qua trình đơn Tuỳ chọn, tôi cũng có thể quyết định mở ứng dụng khi đăng nhập.
Bằng cách chỉ định lối tắt cho biểu tượng ứng dụng trong tệp kê khai ứng dụng web của PWA, bạn có thể đăng ký tuyến đường nhanh đến các tác vụ phổ biến mà người dùng có thể truy cập ngay từ biểu tượng ứng dụng. Trên các hệ điều hành như macOS, người dùng cũng có thể nhấp chuột phải vào biểu tượng ứng dụng và đặt ứng dụng để khởi chạy khi đăng nhập. Chúng tôi đang xử lý một đề xuất chạy khi đăng nhập.
Đóng vai trò là ứng dụng mặc định
Các ứng dụng iOS khác và thậm chí cả trang web hoặc email cũng có thể tích hợp với ứng dụng Podcasts bằng cách tận dụng lược đồ URL podcasts://. Nếu nhấp vào một đường liên kết như podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903 khi đang sử dụng trình duyệt, tôi sẽ được chuyển ngay đến ứng dụng Podcasts và có thể quyết định đăng ký hay nghe podcast.
Chưa thể xử lý toàn bộ giao thức URL tuỳ chỉnh, nhưng chúng tôi vẫn đang tiếp tục xử lý đề xuất Xử lý giao thức URL cho PWA. Hiện tại, registerProtocolHandler() có tiền tố lược đồ web+ là giải pháp thay thế tốt nhất.
Tích hợp hệ thống tệp cục bộ
Có thể bạn sẽ chưa nghĩ đến ngay, nhưng ứng dụng Podcasts tích hợp một cách tự nhiên với hệ thống tệp cục bộ. Khi tôi tải một tập podcast xuống, tập đó sẽ được lưu trữ trong ~/Library/Group Containers/243LU875E5.groups.com.apple.podcasts/Library/Cache trên máy tính xách tay. Giả sử không giống như ~/Documents, thư mục này tất nhiên không dành cho người dùng thông thường truy cập trực tiếp, nhưng thư mục này có trong đó.
Các cơ chế lưu trữ khác ngoài tệp được tham chiếu trong phần nội dung ngoại tuyến.
File System Access API (API Truy cập hệ thống tệp) cho phép nhà phát triển truy cập vào hệ thống tệp cục bộ của thiết bị. Bạn có thể sử dụng API này trực tiếp hoặc thông qua thư viện hỗ trợ browser-fs-access để cung cấp rõ ràng tính năng dự phòng cho các trình duyệt không hỗ trợ API. Vì lý do bảo mật, các thư mục hệ thống không thể truy cập được trên web.
Giao diện nền tảng
Có một điều tinh tế hơn và rõ ràng đối với một ứng dụng iOS như Podcasts: không có nhãn văn bản nào là có thể chọn được và tất cả văn bản đều hoà với phông chữ của hệ thống trên máy. Ngoài ra, sự lựa chọn của tôi về giao diện màu hệ thống (chế độ tối) sẽ được tôn trọng.
Bằng cách tận dụng thuộc tính CSS user-select có giá trị none, bạn có thể bảo vệ để không vô tình chọn các thành phần trên giao diện người dùng.
Tuy nhiên, hãy nhớ không lạm dụng thuộc tính này để khiến nội dung ứng dụng không thể chọn được.
Bạn chỉ nên sử dụng phông chữ này cho các thành phần trên giao diện người dùng như văn bản nút, v.v. Giá trị system-ui cho thuộc tính CSS font-family cho phép bạn chỉ định phông chữ giao diện người dùng mặc định của hệ thống sẽ được dùng cho ứng dụng. Cuối cùng, ứng dụng có thể tuân theo lựa chọn bảng phối màu của người dùng bằng cách tôn trọng lựa chọn prefers-color-scheme của họ, với nút bật/tắt chế độ tối không bắt buộc để ghi đè phông chữ đó.
Một việc khác cần quyết định có thể là những gì trình duyệt nên làm khi đạt đến ranh giới của một khu vực cuộn, chẳng hạn như để triển khai kéo để làm mới tuỳ chỉnh.
Bạn có thể thực hiện việc này với thuộc tính CSS overscroll-behavior.
Thanh tiêu đề tuỳ chỉnh
Khi nhìn vào cửa sổ ứng dụng Podcasts, bạn sẽ thấy cửa sổ này không có thanh tiêu đề và thanh công cụ tích hợp kiểu cũ, chẳng hạn như cửa sổ trình duyệt Safari, mà có một trải nghiệm tuỳ chỉnh trông giống như một thanh bên được gắn vào cửa sổ trình phát chính.
Mặc dù hiện tại không thể thực hiện việc tùy chỉnh thanh tiêu đề.
Tuy nhiên, bạn có thể (và nên) chỉ định các thuộc tính display và theme-color của tệp kê khai ứng dụng web để xác định giao diện của cửa sổ ứng dụng và quyết định các chế độ điều khiển mặc định của trình duyệt (có thể sẽ không có chế độ điều khiển nào trong số này) xuất hiện.
Ảnh động ngắn
Ảnh động trong ứng dụng rất nhanh và mượt mà trong Podcasts. Ví dụ: Khi tôi mở ngăn Ghi chú tập ở bên phải, ngăn này sẽ trượt vào nhẹ nhàng. Khi tôi xoá một tập khỏi nội dung tải xuống, các tập còn lại sẽ nổi lên và chiếm không gian màn hình mà tập bị xoá giải phóng.
Ảnh động hiệu quả trên web chắc chắn là có thể nếu bạn xem xét một số phương pháp hay nhất được nêu trong bài viết Ảnh động và hiệu suất. Bạn có thể cải thiện đáng kể các ảnh động cuộn thường thấy trong nội dung được phân trang hoặc băng chuyền nội dung nghe nhìn bằng cách sử dụng tính năng CSS Scroll Snap. Để có toàn quyền kiểm soát, bạn có thể sử dụng API Ảnh động trên web.
Nội dung xuất hiện bên ngoài ứng dụng
Ứng dụng Podcasts trên iOS có thể hiển thị nội dung ở các vị trí khác ngoài ứng dụng thực tế, chẳng hạn như trong chế độ xem Tiện ích của hệ thống hoặc dưới dạng Siri Đề xuất. Việc đưa ra lời kêu gọi hành động chủ động dựa trên mức sử dụng mà chỉ cần một lần nhấn để tương tác có thể giúp tăng đáng kể tỷ lệ tương tác lại của một ứng dụng như Podcasts.
Content Index API cho phép ứng dụng của bạn cho trình duyệt biết nội dung của PWA có thể sử dụng khi không có mạng. Điều này cho phép trình duyệt hiển thị nội dung này bên ngoài ứng dụng chính. Bằng cách đánh dấu nội dung thú vị trong ứng dụng là phù hợp để phát âm thanh speakable và sử dụng mã đánh dấu có cấu trúc nói chung, bạn có thể giúp các công cụ tìm kiếm và trợ lý ảo như Trợ lý Google giới thiệu sản phẩm/dịch vụ của bạn một cách lý tưởng.
Tiện ích điều khiển nội dung nghe nhìn trên màn hình khoá
Khi một tập podcast đang phát, ứng dụng Podcasts sẽ hiện một tiện ích điều khiển tuyệt đẹp trên màn hình khoá, trong đó có siêu dữ liệu như hình minh hoạ của tập, tiêu đề tập và tên podcast.
Media Session API cho phép bạn chỉ định siêu dữ liệu như hình minh hoạ, tiêu đề bản nhạc, v.v. mà sau đó sẽ xuất hiện trên màn hình khoá, đồng hồ thông minh hoặc các tiện ích đa phương tiện khác trong trình duyệt.
Thông báo đẩy
Thông báo đẩy đã trở thành một chút phiền toái trên web (mặc dù hiện tại lời nhắc thông báo đã nhẹ nhàng hơn rất nhiều). Nhưng nếu được sử dụng đúng cách, chúng có thể mang lại nhiều giá trị. Ví dụ: ứng dụng Podcasts trên iOS có thể tuỳ ý thông báo cho tôi về các tập mới của podcast mà tôi đã đăng ký, hoặc đề xuất các tập mới, cũng như thông báo cho tôi về các tính năng mới của ứng dụng.
Push API (API Đẩy) cho phép ứng dụng của bạn nhận thông báo đẩy để bạn có thể thông báo cho người dùng về những sự kiện đáng chú ý liên quan đến PWA. Đối với các thông báo sẽ kích hoạt vào một thời điểm xác định trong tương lai và không cần kết nối mạng, bạn có thể sử dụng API Kích hoạt thông báo.
Huy hiệu biểu tượng ứng dụng
Mỗi khi có tập mới của một trong những podcast mà tôi đăng ký, một huy hiệu biểu tượng ứng dụng trên biểu tượng màn hình chính của Podcast sẽ xuất hiện để khuyến khích tôi tương tác lại với ứng dụng theo cách không xâm phạm.
Bạn có thể đặt huy hiệu biểu tượng ứng dụng bằng API Huy hiệu. Điều này đặc biệt hữu ích khi PWA của bạn có một số khái niệm về các mục "chưa đọc" hoặc khi bạn cần một phương tiện để thu hút người dùng quay lại ứng dụng một cách không phô trương.
Việc phát nội dung nghe nhìn được ưu tiên hơn so với chế độ cài đặt trình tiết kiệm pin
Khi nội dung nghe nhìn podcast đang phát, màn hình có thể tắt nhưng hệ thống sẽ không chuyển sang chế độ chờ. Các ứng dụng cũng có thể tuỳ ý giữ màn hình ở chế độ bật, chẳng hạn như để hiện lời bài hát hoặc phụ đề.
Screen Wake Lock API cho phép bạn ngăn màn hình tắt. Tính năng phát nội dung nghe nhìn trên web sẽ tự động ngăn hệ thống chuyển sang chế độ chờ.
Khám phá ứng dụng thông qua cửa hàng ứng dụng
Mặc dù ứng dụng Podcasts là một phần trong trải nghiệm của macOS trên máy tính để bàn, nhưng trên iOS, bạn cần cài đặt ứng dụng này từ App Store.
Chỉ cần tìm nhanh podcast, podcasts hoặc apple podcasts, ứng dụng này sẽ xuất hiện trong App Store.
Mặc dù Apple không cho phép PWA trên App Store, nhưng trên Android, bạn có thể gửi PWA
được bao bọc trong một Hoạt động đáng tin cậy trên web.
Tập lệnh bubblewrap giúp việc này diễn ra suôn sẻ.
Tập lệnh này cũng là tập lệnh hỗ trợ nội bộ cho tính năng xuất dữ liệu trong ứng dụng Android của PWABuilder mà bạn có thể sử dụng mà không cần chạm vào dòng lệnh.
Thông tin tóm tắt về tính năng
Bảng dưới đây trình bày tổng quan ngắn gọn về tất cả tính năng, đồng thời cung cấp danh sách các tài nguyên hữu ích để bạn có thể tìm hiểu về chúng trên web.
Kết luận
PWA đã phát triển một bước dài kể từ khi ra mắt vào năm 2015. Trong bối cảnh của Project Fugu 🐡, nhóm Chromium trên nhiều công ty đang nỗ lực thu hẹp khoảng cách còn lại. Thậm chí, chỉ cần làm theo một số lời khuyên trong bài viết này, bạn có thể từng bước đến gần hơn với cảm giác giống như ứng dụng và khiến người dùng quên rằng họ đang xử lý "chỉ một trang web", bởi vì thành thật mà nói, hầu hết họ đều không quan tâm cách xây dựng ứng dụng (và tại sao nên làm như vậy?), miễn là ứng dụng đó giống như một ứng dụng thực tế.
Xác nhận
Bài viết này đã được đánh giá bởi Kayce Basques, Joe Medley, Joshua Bell, Dion Almaer, Ade Oshineye, Pete LePage, Sam Thorogood, Reilly Grant.eff.