Ứng dụng web tiến bộ là gì và làm cách nào để cài đặt một ứng dụng web?

Ứng dụng web tiến bộ là gì và làm cách nào để cài đặt một ứng dụng web?

Ứ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 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ọ.
  • Phản ứng nhanh nhẹn : PWA sẽ 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 được xác định là một ứng dụng (chứ không phải là một 'trang web').
  • Hôn ướ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 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 cho Ứ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 những tập lệnh này sức mạnh lớn hơn.



Do đó, các nhân viên dịch vụ tạo thành nền tảng của tiêu chuẩn PWA, sử dụng bộ đệm web cho kết quả gần như tức thời.

Trước khi có service worker, tập lệnh bộ nhớ cache của trình duyệt đi đến là Application Cache (hoặc App Cache). Ứ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, Bộ nhớ đệm ứng dụng có một số hạn chế nổi tiếng, như Ngoài danh sách 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 (hãy nhớ rằng nó 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ớ cache 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 ứng dụng web 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à của Jake Archibald Nhân viên dịch vụ đã 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ỏ hơn một chút:

  • Trình duyệt 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 di động (Hỗ trợ đầy đủ): Chrome, Firefox, Safari, UC Browser, Samsung internet, Mint Browser, Wechat
  • Trình duyệt 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.

Hãy xem video bên dưới để biết điều gì sẽ xảy ra khi bạn truy cập Trang Twitter 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. Trên thực tế, nó rất 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.

Lần thử đầu tiên 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 lập xuất hiện theo thời gian.

Bộ sưu tập Hình ảnh (2 Hình ảnh) Mở rộng Mở rộng Gần

Ứ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 họ 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ó, nên họ sẽ không thay thế các ứng dụng gốc.

Ít nhất, không phải trong lúc này.

bạn có thể đưa trò chơi ps3 vào ps4 không

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 hoàn toàn tải 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% số trang mỗi phiên, với mức tăng lớn 75% 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 ​​tỷ lệ chuyển đổi trên thiết bị di động tăng 76%.

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.

Đăng lại Đăng lại tiếng riu ríu E-mail Hướng dẫn cho người mới bắt đầu để tạo hoạt ảnh cho bài phát biểu

Hoạt hình có thể là một thách thức. Nếu bạn đã sẵn sàng bắt đầu thêm đối thoại vào dự án của mình, chúng tôi sẽ chia nhỏ quy trình cho bạn.

Đọc tiếp Chủ đề liên quan Giới thiệu về tác giả Gavin Phillips(Đã xuất bản 945 bài báo)

Gavin là Junior Editor cho Windows và Technology Explained, người đóng góp thường xuyên cho Podcast Thực sự Hữu ích và là người đánh giá sản phẩm thường xuyên. Anh ấy có bằng Cử nhân (Hons) Viết đương đại với Thực hành nghệ thuật kỹ thuật số bị cướp đoạt từ những ngọn đồi của Devon, cũng như hơn một thập kỷ kinh nghiệm viết văn chuyên nghiệp. Anh ấy thích uống nhiều trà, trò chơi trên bàn và bóng đá.

Xem thêm từ Gavin Phillips

Theo dõi bản tin của chúng tôi

Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!

Bấm vào đây để đăng ký