Giới thiệu về ứng dụng web lũy tiến

Hầu hết các nhà phát triển ít nhất đã nghe thấy một số tiếng vang xung quanh Ứng dụng web lũy tiến. Chúng được hỗ trợ rộng rãi bởi các công ty công nghệ như Google và nhanh chóng trở thành định mức cho các ứng dụng web đa thiết bị.

Nhưng, chính xác thì sự khác biệt giữa một điển hình và một cấp tiến ứng dụng web?

Cho các nhà phát triển, đó là cả một thế giới khác biệt. Ứng dụng web lũy tiến sử dụng API web hiện đại để tạo trải nghiệm ứng dụng gốc trong trình duyệt. Điều này có nghĩa là các nhà phát triển có thể xây dựng các ứng dụng động tải nhanh mà không cần sử dụng các khung lai.

Trong hướng dẫn này, tôi sẽ đề cập đến kiến thức cơ bản về ứng dụng web lũy tiến, một số tính năng chính và cách bạn có thể bắt đầu xây dựng công trình của riêng mình.

Ứng dụng web lũy tiến là gì?

Ứng dụng web lũy tiến (hoặc PWAs) tận dụng API trình duyệt web để tạo trải nghiệm ứng dụng gốc ngay trên trình duyệt trên mọi thiết bị.

Cuối cùng, các ứng dụng web lũy tiến bao gồm một số ít công nghệ mà các nhà phát triển có thể sử dụng để tạo các ứng dụng giống như bản địa mạnh mẽ. Nhiều người đến từ API web chẳng hạn như API công nhân dịch vụ hoặc là Đẩy API.

Có khá nhiều yêu cầu gọi một cái gì đó là PWA nhưng đây là những người quan trọng nhất:

Là đầy đủ đáp ứng di động.
Tuân thủ tăng cường tiến bộ.
Có thể cài đặt cục bộ trên điện thoại thông minh và máy tính bảng.
Chạy ngoại tuyến không có Internet, sử dụng nhân viên phục vụ.
Tách nội dung khỏi chức năng sử dụng vỏ ứng dụng.
Buồng trên HTTPS để bảo mật hơn.
Có thể khám phá trong tìm kiếm Google.
Có các trang giống như ứng dụng động nhưng mỗi vẫn có URL riêng.

Nếu bạn nghĩ đến việc xây dựng một ứng dụng web nhỏ thay vào đó, bạn có thể thử tạo Ứng dụng web lũy tiến. Điều này đi kèm với một chút của một đường cong học tập nhưng bạn có rất nhiều kiểm soát nhiều hơn trải nghiệm người dùng kết quả là.

Hãy đi sâu vào các nguyên tắc cơ bản của Ứng dụng web lũy tiến và tìm hiểu điều gì khiến chúng đánh dấu.

Nhân viên phục vụ

Mỗi ứng dụng web lũy tiến cần nhân viên phục vụ. đó là như nhân viên giao thông ai điều phối lưu lượng truy cập sẽ đi đâu, dữ liệu đến từ đâu và làm thế nào tất cả được tổ chức và lưu trữ.

Nói một cách đơn giản, nhân viên phục vụ hoạt động như một tệp JavaScript và chạy trong nền của ứng dụng web của bạn. Bất cứ khi nào người dùng thực hiện một sự kiện, nó gọi kịch bản nhân viên phục vụ để kéo dữ liệu, lưu dữ liệu hoặc cả hai!

Sử dụng API công nhân dịch vụ Là Cần thiết để chạy PWA được hỗ trợ ngoại tuyến. Đây là cách bạn truyền dữ liệu giữa các khung nhìn và làm thế nào bạn có thể yêu cầu dữ liệu từ cơ sở dữ liệu cục bộ. Nhưng, đây chủ yếu là những thứ tiên tiến mà bạn học được bằng cách làm việc trong một dự án PWA.

Hãy nhìn vào Dịch vụ nấu ăn công nhân cho đoạn trích cơ bản và bản demo sống. Đây là một cách tuyệt vời để học bằng cách nghiên cứu những gì người khác đã làm và nhân bản trong ứng dụng của riêng bạn.

Nếu bạn đang hy vọng xây dựng một ứng dụng web lũy tiến bắt đầu với API công nhân dịch vụ. Chỉ cần tinker với nó và thiết lập một bản demo đơn giản tại địa phương. Điều này sẽ đặt nền tảng cho sau này xây dựng các tính năng và trang ứng dụng tùy chỉnh tất cả đều chạy qua nhân viên phục vụ.

Dành cho hướng dẫn cho người mới bắt đầu và đoạn mã chi tiết, Tôi đặc biệt khuyến nghị những tài nguyên này:

Bắt đầu với nhân viên phục vụ
Bắt đầu với nhân viên phục vụ
Mẫu công nhân dịch vụ: Mẫu trang ngoại tuyến tùy chỉnh

Vỏ ứng dụng

Hầu hết các ứng dụng gốc theo kiến trúc shell ứng dụng nơi chứa dữ liệu và mã ứng dụng tách biệt hoàn toàn với UI. Vỏ ứng dụng có thể là lưu trữ cục bộ vì vậy mỗi trang tải cực kỳ nhanh.

Điều này giữ cho cùng “ứng dụng gốc” cảm giác nơi giao diện luôn hiển thị nhưng nội dung / chức năng tải khác nhau mỗi lần. Kiểm tra trang này trên trang web Google Developers để tìm hiểu thêm một chút về mô hình vỏ ứng dụng.

Hầu hết các ứng dụng có một vỏ ứng dụng rất đơn giản và bạn nên thiết kế kiến trúc của bạn với sự đơn giản trong tâm trí.

Thông thường, vỏ ứng dụng có những những yếu tố chính:

Liên kết thanh điều hướng hàng đầu.
Nút làm mới (tùy chọn).
Trang nền container.

Bạn có thể tìm thấy một trường hợp nghiên cứu tốt đẹp ở đây về Kiến trúc trình bao ứng dụng web lũy tiến I / O của Google. Họ cũng cung cấp một số mẹo để xây dựng kiến trúc shell của riêng bạn, lưu trữ bộ nhớ cache và kéo nó tự động cho mọi trang.

Hãy nghĩ về kiến trúc vỏ như Tất cả các thành phần UI tĩnh bạn sẽ sử dụng trên mỗi trang. Những cái này nên tách khỏi phần còn lại của mã của bạn và lưu trữ để dễ dàng sử dụng lại. Ngoài ra kiểm tra Giới thiệu của Google đến chủ đề có nhiều mã đoạn trích để giúp bạn bắt đầu.

Hỗ trợ trực tuyến và ngoại tuyến

Hầu hết các ứng dụng gốc chạy tốt mà không cần Internet. Ứng dụng web lũy tiến có nghĩa là tuân theo hành vi tương tự.

Thông qua nhân viên phục vụ, bạn có thể xây dựng bộ nhớ cache cục bộ với mã JSON cho mỗi trang. Bằng cách này, người dùng có thể duyệt ứng dụng web của bạn tại địa phương. Bạn cũng có thể bao gồm một tệp kê khai để xác định biểu tượng của bạn, màn hình giật gân và các cài đặt khởi chạy khác.

Nếu bạn đang sử dụng API Công nhân dịch vụ, hãy xem qua API bộ nhớ cache đó là một phần của cùng một khung. Nói chung đó là cách tốt nhất để lưu trữ dữ liệu cục bộ và truy cập nó từ nhân viên phục vụ một lát sau.

Bạn cũng có thể kiểm tra bất kỳ ứng dụng web nào sử dụng Ngọn hải đăng, một công cụ miễn phí để kiểm tra tính tuân thủ tính năng và hỗ trợ cho các công nghệ PWA.

PWAs luôn yêu cầu hỗ trợ ngoại tuyến thông qua API công nhân dịch vụ, vì vậy họ có thể làm việc trong các trạng thái kết nối thấp. Ngọn hải đăng là cách tốt nhất để kiểm tra hỗ trợ ngoại tuyến cùng với một loạt các tính năng khác.

Ví dụ trực tiếp

Nghiên cứu PWAs sống và xem cách họ làm việc là một cách tuyệt vời để học hỏi. Tuy nhiên, thị trường Ứng dụng Web lũy tiến là vẫn đang nổi lên, rất nhiều trong số những cái tốt nhất là rải rác vào các góc khác nhau của Internet.

Nhưng, nhờ Phòng trưng bày đá PWA, Tôi đã tuyển chọn một vài ví dụ tuyệt vời để thể hiện những gì PWAs thực sự có thể làm.

1. Chuyển đổi tiền tệ

Điều này khá đơn giản Chuyển đổi tiền tệ lấy tỷ giá hối đoái và tính toán hiện tại sự khác biệt giữa một tấn tiền tệ trên toàn thế giới.

Bạn sẽ nhận thấy ứng dụng web này là đáp ứng đầy đủ, hỗ trợ cảm ứng, và tự động cập nhật không có bất kỳ trang làm mới.

Đây chỉ là một số tính năng bạn mong đợi trong bất kỳ Ứng dụng Web lũy tiến điển hình. Điều này ứng dụng cũng có thể được lưu cục bộ để điện thoại của bạn hoạt động ngoại tuyến, mặc dù nó kết nối với tệp JSON để kiểm tra tỷ giá hối đoái hiện tại.

2. Tiếng Anh

Tôi chỉ đơn giản yêu thích ứng dụng web này bởi vì nó vừa độc đáo vừa được thiết kế cực kỳ tốt. Các Bản đồ giọng Anh giám tuyển video trực tuyến nơi mọi người mang dấu từ các khu vực cụ thể của Hoa Kỳ và Vương quốc Anh.

Bằng cách nhấp vào bất cứ nơi nào trên bản đồ, bạn có thể lắng nghe cách mọi người phát âm một số từ nhất định ở các khu vực khác nhau trên thế giới. Ứng dụng này rất nhanh và nó nguồn mở trên GitHub cho bất cứ ai để kiểm tra.

Nội bộ chạy trên Phản ứng / Redux với Căn cứ hỏa lực và một Kết nối API với Google Maps. Chắc chắn là một ví dụ tuyệt vời về một cái gì đó khá đơn giản cho người mới bắt đầu học và học.

3. Pokedex.org

Một PWA khá đơn giản là đây Ứng dụng Pokedex được tạo bởi Nolan Lawson. Ông cũng tự do xuất bản mã này trên GitHub, Vì vậy, nó cho chúng tôi một dự án khác đó là đáng để rình mò và học tập.

Vì dữ liệu này có thể ở trạng thái tĩnh, nên nó xử lý thông qua một động cơ địa phương gọi là PouchDB. Tất cả dữ liệu đến từ PokeAPI và sau đó lưu dưới dạng JavaScript đơn giản. Điều này có nghĩa là bạn có thể lưu nó cục bộ vào điện thoại của bạn giống như một ứng dụng gốc thực sự và nó sẽ chạy với hoặc không có truy cập Internet. Khá tuyệt, đúng không?

Toàn bộ là được cung cấp bởi JavaScript, vì vậy nó là một minh chứng cho việc bạn có thể làm được bao nhiêu với mã frontend. Nó sử dụng rất nhiều bộ nhớ đệm với API công nhân dịch vụ, vì vậy nó điên nhanh và siêu dễ sử dụng.

4. Flipkart

Cuối cùng và đáng ngạc nhiên nhất, hãy xem Trang web Flipkart. Cái này đầy đủ Trên thực tế, cửa hàng thương mại điện tử là một ứng dụng web lũy tiến.

nó là đáp ứng đầy đủ và tải trang động. URL trang được gắn vào trình duyệt, vì vậy bạn có thể sao chép / dán và chia sẻ chúng như một trang web thông thường.

Điều này thật dễ dàng PWA phức tạp nhất tôi từng thấy. Tôi ngạc nhiên khi các nhà phát triển có thể tạo ra trải nghiệm liền mạch như vậy trên web cho tất cả người dùng, nói gì đến hỗ trợ lưu trữ ngoại tuyến cục bộ, quá.

Và, trong khi tôi không thể tìm thấy một repo cho toàn bộ mã nguồn Flipkart, thì có một Trang Flipkart trên GitHub với đoạn mã nhỏ hơn từ nhóm phát triển của họ.

Học nhiều hơn nữa

Ứng dụng web lũy tiến là cực kỳ phổ biến và chắc chắn sẽ đạt được hơi nước khi nhiều nhà phát triển chuyển đổi từ các ứng dụng gốc / lai.

Có một hội nghị thượng đỉnh hàng năm được gọi là Hội nghị thượng đỉnh ứng dụng web tiến bộ và họ xuất bản video trên YouTube mà bạn có thể xem miễn phí. Đây là một cách tuyệt vời để lấy một số kiến thức chuyên nghiệp mà không phải trả tiền vé.

Nhưng, nếu bạn đang tìm kiếm chi tiết hơn Hướng dẫn mã hóa PWA chắc chắn kiểm tra các hướng dẫn này:

Hướng dẫn cho người mới bắt đầu ứng dụng web tiến bộ
Xây dựng ứng dụng web tiến bộ đầu tiên của bạn với React
Xây dựng một ứng dụng web tiến bộ với polymer