Ứng dụng thống trị điện thoại của bạn. Trong một thời gian dài, các ứng dụng không ảnh hưởng đến máy tính để bàn hoặc trình duyệt của bạn theo cách tương tự. Điều đó đã thay đổi trong những năm gần đây. Ứng dụng web tiến bộ (PWA) đang ngày càng phát triển và thay đổi các tương tác của chúng tôi với tất cả các trang web.
Nhưng chính xác thì Ứng dụng web tiến bộ là gì? PWA làm được gì mà một trang web thì không? Đây là những điều bạn cần biết về Ứng dụng web tiến bộ.
Ứng dụng Web Tiến bộ là gì?
Ứng dụng web tiến bộ là các ứng dụng web cung cấp một trang web thông thường cho người dùng nhưng xuất hiện như một ứng dụng di động gốc. PWA cố gắng mang lại khả năng sử dụng của một ứng dụng dành cho thiết bị di động gốc vào bộ tính năng của trình duyệt hiện đại, tận dụng tối đa những tiến bộ trong cả hai lĩnh vực phát triển.
Vậy thì điều gì xác định PWA?
- Phổ quát :một PWA phải hoạt động liền mạch (tốt, gần như) cho mọi người dùng, bất kể trình duyệt của họ là gì.
- Đáp ứng :PWA phải hoạt động với mọi thiết bị, chẳng hạn như máy tính xách tay, máy tính bảng, điện thoại thông minh của bạn, v.v.
- Thiết kế :thiết kế phải bắt chước các ứng dụng di động gốc, nghĩa là các menu được sắp xếp hợp lý, dễ tìm, với khả năng tương tác đơn giản cho các tính năng nâng cao.
- An toàn :PWA nên sử dụng HTTPS để giữ an toàn cho dữ liệu của người dùng.
- Có thể khám phá: người dùng có thể tìm thấy các PWA và chúng có thể dễ dàng nhận dạng là một ứng dụng (chứ không phải là một "trang web").
- Mức độ tương tác: một PWA phải có quyền truy cập vào các tính năng tương tác gốc như thông báo đẩy.
- Cập nhật: PWA vẫn được cập nhật, phục vụ các phiên bản mới nhất của dịch vụ hoặc trang web.
- Cài đặt: cho phép người dùng dễ dàng "cài đặt" PWA vào màn hình chính của họ mà không cần đến cửa hàng ứng dụng.
- Chia sẻ: PWA chỉ yêu cầu một URL duy nhất để chia sẻ mà không cần bất kỳ cài đặt nào.
Như bạn có thể thấy, PWA nhằm cung cấp cho người dùng trải nghiệm trang web đầy đủ với các tính năng và thiết kế giao diện được sắp xếp hợp lý của một ứng dụng gốc.
Ứng dụng Web Tiến bộ hoạt động như thế nào?
Chìa khóa của Ứng dụng web tiến bộ là công nhân dịch vụ trình duyệt.
Service worker là một tập lệnh chạy trên nền trình duyệt của bạn, "tách biệt khỏi trang web, mở ra cánh cửa cho các tính năng không cần trang web hoặc tương tác của người dùng." Bạn có thể sử dụng các nhân viên dịch vụ như thông báo đẩy và đồng bộ hóa nền vào lúc này, nhưng tương lai PWA trước mắt mang lại cho các tập lệnh này sức mạnh lớn hơn.
Do đó, các nhân viên dịch vụ hình thành nền tảng của tiêu chuẩn PWA, sử dụng bộ nhớ cache trên web để có kết quả gần như tức thì.
Trước khi có service worker, tập lệnh bộ đệm ẩn của trình duyệt đi đến là Bộ đệm ứng dụng (hoặc Bộ đệm ứng dụng). Ứng dụng Cache có nhiều tính năng trong một loạt các dịch vụ ưu tiên ngoại tuyến nhưng hơi dễ xảy ra lỗi. Hơn nữa, App Cache có một số hạn chế nổi tiếng, như A List Apart giải thích.
Nhưng vấn đề chính đối với các nhà phát triển là thiếu sự tương tác trực tiếp với chính xác cách hoạt động của AppCache, ngăn các nhà phát triển sửa chữa chính xác các vấn đề khi chúng phát sinh. Đổi lại, các trang web và dịch vụ có đầy đủ chức năng ngoại tuyến là một lựa chọn mạo hiểm.
Nhân viên dịch vụ, tuy nhiên, chỉ tồn tại khi hành động của họ được yêu cầu. Trong PWA, khi bạn nhấp vào thứ gì đó hoặc sử dụng một tính năng, nhân viên dịch vụ sẽ bắt đầu thực hiện. Service worker (nhớ rằng đó là một tập lệnh) xử lý sự kiện, quyết định xem liệu bộ đệm ẩn ngoại tuyến có thể hoàn thành yêu cầu hay không. Ý tưởng là có nhiều bộ đệm ẩn ngoại tuyến để PWA lựa chọn, cung cấp nhiều chức năng ngoại tuyến hơn nhiều.
Ngoài ra, bộ nhớ đệm không chỉ để tăng tốc độ ngoại tuyến. Ví dụ, bạn đến một PWA, nhưng kết nối của bạn rất chắp vá. Service worker cung cấp bộ nhớ đệm trước đó, hoạt động đầy đủ mà không làm gián đoạn trải nghiệm của bạn.
Hỗ trợ Trình duyệt Web Ứng dụng Tiến bộ
Có hai yêu cầu để sử dụng Ứng dụng web tiến bộ:trình duyệt tương thích và dịch vụ hỗ trợ PWA.
Đầu tiên, hãy xem xét các trình duyệt. Bạn có hai tùy chọn để kiểm tra hỗ trợ trình duyệt PWA. Đầu tiên là Jake Archibald's Service Worker đã sẵn sàng chưa? hiển thị dễ dàng trạng thái sẵn sàng PWA của các trình duyệt chính, cùng với internet Samsung.
Để có cái nhìn tổng quan chi tiết hơn về hỗ trợ trình duyệt PWA, bạn nên xem Tôi có thể sử dụng, một trang web chuyên liệt kê việc triển khai các công nghệ web và trình duyệt khác nhau theo phiên bản trình duyệt. Ví dụ:nếu bạn nhập "service worker" vào thanh tìm kiếm, bạn sẽ thấy một bảng hiển thị số phiên bản mà mỗi trình duyệt đã triển khai service worker PWA.
Bảng Tôi có thể sử dụng nhân viên dịch vụ xác nhận rằng tất cả các trình duyệt chính đều hỗ trợ PWA. Nó cũng minh họa hỗ trợ PWA cho một số trình duyệt máy tính để bàn và trình duyệt di động thay thế.
Chia nhỏ thêm một chút:
- Trình duyệt trên máy tính để bàn (Hỗ trợ đầy đủ): Chrome, Firefox, Opera, Edge, Safari
- Trình duyệt dành cho máy tính để bàn (Hỗ trợ một phần / Phiên bản đã lỗi thời): Trình duyệt QQ, Trình duyệt Baidu
- Trình duyệt trên điện thoại di động (Hỗ trợ đầy đủ): Chrome, Firefox, Safari, UC Browser, Samsung internet, Mint Browser, Wechat
- Trình duyệt trên điện thoại di động (Hỗ trợ một phần / Phiên bản lỗi thời): Trình duyệt QQ, Trình duyệt Android, Opera Mobile
Vì vậy, các trình duyệt chính đều hỗ trợ PWA. Microsoft Edge và Safari là những bổ sung gần đây nhất cho danh sách hỗ trợ đầy đủ. Ngược lại, cả Trình duyệt QQ và Trình duyệt Baidu hiện đều sử dụng các phiên bản lỗi thời và như vậy đã giảm xuống cấp thứ hai.
Cách Tìm và Cài đặt Ứng dụng Web Tiến bộ
Bây giờ bạn đã biết nên sử dụng trình duyệt nào, bạn có thể nghĩ đến việc tìm kiếm và cài đặt PWA. Đối với ví dụ này, tôi sẽ sử dụng Samsung Galaxy S8 với Google Chrome.
Ứng dụng web tiến bộ có ở khắp mọi nơi. Nhiều công ty đã điều chỉnh các trang web và dịch vụ của họ để cung cấp phiên bản Ứng dụng web tiến bộ. Trong nhiều trường hợp, trước tiên bạn sẽ gặp phải PWA khi bạn truy cập trang chủ hoặc trang web dịch vụ dành cho thiết bị di động, điều này sẽ kích hoạt Thêm vào màn hình chính hộp thoại.
Xem video bên dưới để biết điều gì sẽ xảy ra khi bạn truy cập trang Twitter dành cho thiết bị di động.
Tất nhiên, truy cập vô số trang web và hy vọng thấy trình kích hoạt màn hình chính là không hữu ích. Trong thực tế, nó hoàn toàn tốn thời gian. Rất may, bạn không cần phải làm điều đó vì có một số trang web dành riêng cho việc lập danh mục PWA.
Đầu tiên, hãy thử outweb. Nó liệt kê một loạt các PWA khá phong phú, với các tùy chọn mới thường xuyên xuất hiện. Tiếp theo, hãy thử pwa.rocks. Nó có một lựa chọn nhỏ hơn, nhưng một số PWA tiện dụng mà bạn sẽ muốn thêm vào thiết bị của mình.
Hơn nữa, vào tháng 1 năm 2019, Chrome 72 dành cho Android được xuất xưởng với Hoạt động web đáng tin cậy (TWA). TWA cho phép các tab Chrome mở ở chế độ độc lập. Đổi lại, điều này cho phép PWA nổi bật trong cửa hàng ứng dụng Google Play. Một số PWA đầu tiên xuất hiện trên Google Play là Twitter Lite, Instagram Lite và Google Maps Go, với nhiều thiết bị khác sẽ xuất hiện theo thời gian.
Ứng dụng Web Tiến bộ có Thay thế Ứng dụng Gốc không?
Ứng dụng web tiến bộ là một bước kết hợp tuyệt vời giữa trình duyệt của bạn và một ứng dụng di động gốc. PWA sẽ thay thế hoàn toàn các ứng dụng gốc? Đó là một không khó từ tôi. PWA tuyệt vời như một sản phẩm nhẹ, nhưng do chúng hiện chủ yếu tập trung vào việc tái tạo các trang web và dịch vụ hiện có, chúng sẽ không thay thế các ứng dụng gốc.
Ít nhất, không phải trong lúc này.
Mặc dù vậy, PWA vẫn hoạt động. Dữ liệu có sẵn tại PWA Stats cũng sao lưu điều này. Dưới đây là một vài con số thú vị minh họa cách PWA đang thay đổi tương tác của chúng ta với các trang web thường được sử dụng:
- Trivago đã thấy mức tăng tương tác 150% đối với những người dùng thêm PWA của họ vào màn hình chính.
- Trang chủ PWA của Forbes "tải hoàn toàn chỉ trong 0,8 giây", trong khi số lần hiển thị trên mỗi lượt truy cập tăng 10 phần trăm. PWA của Forbes cũng chứng kiến thời lượng phiên của người dùng tăng gấp đôi.
- Twitter Lite đã chứng kiến mức tăng 65 phần trăm số trang mỗi phiên, với mức tăng lớn 75 phần trăm về số lượng tweet. Nó cũng tương tác "trong vòng chưa đầy 5 giây qua 3G."
- Alibaba đã chứng kiến mức tăng 76% trong chuyển đổi trên thiết bị di động.
PWA chưa phải là chính thống. Nhưng với hàng loạt lợi ích mà chúng mang lại, chẳng hạn như tiết kiệm dung lượng trên thiết bị của bạn, bạn sẽ được nghe về chúng nhiều hơn trong tương lai.