Gần đây, có nhiều cuộc thảo luận về Ứng dụng web tiến bộ. Tuy vẫn là một mô hình khá mới, nhưng các nguyên tắc của chúng cũng có thể cải thiện tương đương các ứng dụng được xây dựng bằng vanilla JS, React, Polymer, Angular hoặc bất kỳ khung nào khác. Trong bài đăng này, tôi sẽ tóm tắt một số tuỳ chọn và ứng dụng tham khảo để bắt đầu sử dụng ứng dụng web tiến bộ của riêng bạn ngay hôm nay.
Ứng dụng web tiến bộ là gì?
Điều quan trọng cần phải nhớ là Ứng dụng web tiến bộ hoạt động ở mọi nơi nhưng được tăng tốc trong các trình duyệt hiện đại. Tính năng nâng cao tăng dần là một yếu tố cốt lõi của mô hình.
Aaron Gustafson ví dụ về việc cải tiến tiến bộ với một M&M lạc quan. Miếng đậu phộng là nội dung của bạn, lớp phủ sô-cô-la là lớp trình bày và JavaScript là lớp vỏ kẹo cứng. Lớp này có thể thay đổi màu sắc và trải nghiệm có thể thay đổi tùy thuộc vào khả năng của trình duyệt sử dụng nó.
Hãy coi vỏ kẹo là nơi có thể tồn tại của nhiều tính năng của Ứng dụng web tiến bộ. Đây là những trải nghiệm kết hợp những gì tốt nhất của web và ứng dụng. Các công cụ này rất hữu ích cho người dùng ngay từ lần truy cập đầu tiên trong thẻ trình duyệt, không cần cài đặt.
Khi người dùng tạo dựng mối quan hệ với những ứng dụng này qua nhiều lần sử dụng, ứng dụng này sẽ trở nên ngọt ngào hơn – tải rất nhanh khi kết nối mạng chậm (nhờ có service worker), gửi Thông báo đẩy có liên quan và có biểu tượng hạng nhất trên màn hình chính của người dùng để có thể tải ứng dụng dưới dạng ứng dụng toàn màn hình. Họ cũng có thể tận dụng biểu ngữ cài đặt ứng dụng web thông minh.
Các ứng dụng web tiến bộ
- Progressive (Tăng tiến) – Phù hợp với mọi người dùng, bất kể trình duyệt là gì vì họ được xây dựng với tính năng nâng cao dần dần đóng vai trò là khách hàng cốt lõi.
- Thích ứng – Phù hợp với mọi kiểu dáng, máy tính, thiết bị di động, máy tính bảng hoặc kiểu dáng tiếp theo.
- Không phụ thuộc vào khả năng kết nối – Được tăng cường bằng trình chạy dịch vụ để làm việc khi không có mạng hoặc khi dùng mạng chất lượng thấp.
- Kiểu ứng dụng – Sử dụng mô hình giao diện ứng dụng để cung cấp các thao tác và tương tác kiểu ứng dụng.
- Fresh (Mới) – Luôn được cập nhật nhờ quy trình cập nhật của trình chạy dịch vụ.
- An toàn – Được phân phát qua TLS để ngăn chặn hành vi xem trộm và đảm bảo nội dung không bị can thiệp.
- Có thể khám phá – Có thể được nhận dạng là “ứng dụng” nhờ tệp kê khai W3C và phạm vi đăng ký trình chạy dịch vụ cho phép các công cụ tìm kiếm tìm những ứng dụng đó.
- Có thể thu hút lại – Giúp việc tương tác lại trở nên dễ dàng thông qua các tính năng như thông báo đẩy.
- Có thể cài đặt – Cho phép người dùng "giữ" các ứng dụng họ thấy hữu ích nhất trên màn hình chính mà không gây phiền hà cho cửa hàng ứng dụng.
- Có thể liên kết – Dễ dàng chia sẻ qua URL và không cần cài đặt phức tạp.
Ứng dụng web tiến bộ cũng không phải là duy nhất đối với Chrome dành cho Android. Dưới đây, chúng ta có thể thấy Ứng dụng web tiến bộ Pokedex hoạt động trong Firefox dành cho Android (Beta) với tính năng Thêm vào màn hình chính ở giai đoạn đầu và các tính năng lưu vào bộ nhớ đệm của trình chạy dịch vụ vẫn chạy bình thường.
Một trong những khía cạnh hay của bản chất "tiến bộ" đối với mô hình này là các tính năng có thể dần được mở khoá khi các nhà cung cấp trình duyệt hỗ trợ tốt hơn cho chúng. Các ứng dụng web tiến bộ như Pokedex dĩ nhiên cũng hoạt động tốt trong Opera trên Android với một vài điểm khác biệt đáng chú ý trong quá trình triển khai:
Để tìm hiểu sâu hơn về Ứng dụng web tiến bộ, hãy đọc bài đăng trên blog ban đầu của Alex Russell giới thiệu về các ứng dụng này. Paul Kinlan cũng đã bắt đầu một thẻ Stack Overflow rất hữu ích cho các Ứng dụng web tiến bộ nên xem thử.
Nguyên tắc
Tệp kê khai ứng dụng web
Tệp kê khai cho phép ứng dụng web của bạn xuất hiện giống như bản địa hơn trên màn hình chính của người dùng. Tính năng này cho phép khởi chạy ứng dụng ở chế độ toàn màn hình (mà không có thanh URL), giúp kiểm soát hướng màn hình và trong các phiên bản Chrome gần đây trên Android hỗ trợ việc xác định Màn hình chờ và màu giao diện cho thanh địa chỉ. Tệp này cũng được dùng để xác định một tập hợp các biểu tượng theo kích thước và mật độ dùng cho màn hình chờ và biểu tượng màn hình chính nêu trên.
Bạn có thể tìm thấy tệp kê khai mẫu trong Bộ công cụ dành cho người mới bắt đầu web trở lên trong mẫu Google Chrome. Bruce Lawson viết một Trình tạo tệp kê khai và Mounir Lamouri cũng đã viết một trình xác thực Tệp kê khai web hữu ích mà bạn nên dùng thử.
Trong các dự án cá nhân của mình, tôi dựa vào realfavicongenerator để tạo các biểu tượng có kích thước chính xác cho cả tệp kê khai ứng dụng web và để sử dụng trên iOS, máy tính để bàn, v.v. Mô-đun nút biểu tượng yêu thích cũng có thể nhận được kết quả tương tự trong quá trình xây dựng.
Hiện nay, các trình duyệt dựa trên Chromium (Chrome, Opera, v.v.) hỗ trợ tệp kê khai ứng dụng web, trong đó Firefox đang tích cực phát triển dịch vụ hỗ trợ và Edge liệt kê những trình duyệt này đang được xem xét. kit/Safari vẫn chưa được đăng tín hiệu công khai về ý định triển khai tính năng này.
Để biết thêm thông tin, hãy đọc bài viết Ứng dụng web có thể cài đặt bằng tệp kê khai ứng dụng web trong Chrome dành cho Android trên khoá học Kiến thức cơ bản về web.
Biểu ngữ "Thêm vào Màn hình chính"
Hiện tại, Chrome trên Android đã hỗ trợ việc thêm trang web của bạn vào màn hình chính, nhưng các phiên bản gần đây cũng hỗ trợ chủ động đề xuất thêm các trang web bằng biểu ngữ cài đặt ứng dụng web gốc.
Để lời nhắc cài đặt ứng dụng hiển thị, ứng dụng của bạn phải:
- Có tệp kê khai ứng dụng web hợp lệ
- Được phân phối qua HTTPS (xem letsencrypt để có chứng chỉ miễn phí)
- Có một trình chạy dịch vụ hợp lệ đã đăng ký
- Được truy cập hai lần, cách nhau ít nhất 5 phút giữa các lần truy cập
Hiện có một số mẫu biểu ngữ Cài đặt ứng dụng, từ biểu ngữ cơ bản cho đến các trường hợp sử dụng phức tạp hơn như hiển thị các ứng dụng có liên quan.
Trình chạy dịch vụ để lưu vào bộ nhớ đệm khi không có kết nối mạng
service worker là một tập lệnh chạy ở chế độ nền, tách biệt với trang web của bạn. Phương thức này phản hồi các sự kiện, bao gồm cả các yêu cầu mạng được thực hiện từ các trang mà nó phân phát. Một trình chạy dịch vụ có thời gian hoạt động ngắn có chủ đích.
Trình phân tích cú pháp sẽ đánh thức khi nhận được một sự kiện và chỉ chạy khi cần xử lý sự kiện đó. Service worker cho phép bạn sử dụng API bộ nhớ đệm để lưu tài nguyên vào bộ nhớ đệm và có thể được sử dụng để cung cấp cho người dùng trải nghiệm ngoại tuyến.
Service worker rất hiệu quả trong việc lưu vào bộ nhớ đệm khi không có kết nối mạng nhưng cũng mang lại hiệu suất đáng kể dưới hình thức tải tức thì cho các lượt truy cập lặp lại vào trang web hoặc ứng dụng web của bạn. Bạn có thể lưu shell ứng dụng vào bộ nhớ đệm để shell hoạt động khi không có mạng và điền nội dung bằng JavaScript.
Một bộ mẫu trình chạy dịch vụ toàn diện có sẵn trên các mẫu của Google Chrome. Sổ tay nấu ăn ngoại tuyến của Jake Archibald là một cuốn sách không thể đọc và bạn nên xem hướng dẫn từng bước về ứng dụng web ngoại tuyến đầu tiên của Paul Kinlan nếu mới sử dụng nhân viên dịch vụ.
Nhóm chúng tôi cũng duy trì một số tiện ích trình trợ giúp dịch vụ và xây dựng các công cụ mà chúng tôi thấy hữu ích để giảm chi phí trong quá trình thiết lập trình chạy dịch vụ. Các thư viện này được liệt kê trong Thư viện trình chạy dịch vụ. Hai yếu tố chính là:
- sw-precache: một công cụ thời gian xây dựng giúp tạo tập lệnh service worker hữu ích cho việc lưu trước shell của ứng dụng web
- sw-toolbox: một thư viện cung cấp chức năng lưu vào bộ nhớ đệm trong thời gian chạy cho các tài nguyên ít dùng
Jeff Posnick đã viết một hướng dẫn ngắn gọn về sw-precache với tên gọi Offline-first, short, with the sw-precache và một lớp học lập trình trên cùng một công cụ mà bạn có thể thấy hữu ích.
Chrome, Opera và Firefox đều đã triển khai dịch vụ hỗ trợ cho trình chạy dịch vụ Edge khi có tín hiệu công khai tích cực về sự quan tâm đến tính năng này. Safari đã đề cập ngắn gọn về mối quan tâm đến công nghệ này thông qua kế hoạch 5 năm do một kỹ sư đề xuất.
Thông báo đẩy để tương tác lại
Nhờ đó, bạn có thể xây dựng các ứng dụng web mà người dùng có thể tương tác bên ngoài một thẻ. Bạn có thể đóng trình duyệt và thậm chí người dùng không cần phải chủ động sử dụng ứng dụng web của bạn để tương tác với trải nghiệm của bạn. Tính năng này yêu cầu cả trình chạy dịch vụ và tệp kê khai ứng dụng web, dựa trên một số tính năng được tóm tắt trước đó.
API Push được triển khai trong Chrome, đang trong quá trình phát triển trên Firefox và đang được cân nhắc trong Edge. Chưa có tín hiệu công khai nào từ Safari về ý định triển khai tính năng này.
Thông báo đẩy trên web mở là phần giới thiệu toàn diện về cách thiết lập thông báo đẩy của Matt Gaunt. Lớp học lập trình về Thông báo đẩy cũng có trong phần Kiến thức cơ bản về web.
Michael van Ouwerkerk từ nhóm Chrome cũng có đoạn giới thiệu dài 6 phút để thúc đẩy nếu bạn thích video hơn.
Phân lớp các tính năng nâng cao
Hãy nhớ rằng, trải nghiệm người dùng có thể có mức độ hấp dẫn khác nhau tuỳ thuộc vào trình duyệt đang dùng để xem ứng dụng web. Bạn có quyền kiểm soát phần vỏ kẹo cứng.
Các tính năng bổ sung dành cho nền tảng web như Đồng bộ hoá dưới nền (để đồng bộ hoá dữ liệu với máy chủ ngay cả khi ứng dụng web đang đóng) và Bluetooth qua web (để kết nối với thiết bị Bluetooth từ ứng dụng web) cũng có thể được đưa vào Ứng dụng web tiến bộ theo cách này.
Tính năng đồng bộ hoá một lần trong nền đã được bật trong Chrome và Jake Archibald đăng video về ứng dụng wikipedia ngoại tuyến cùng bài viết minh hoạ cách hoạt động của tính năng này trong thực tế. Francois Beaufort cũng có một số mẫu Bluetooth trên web nếu bạn muốn dùng thử API đó.
Phù hợp với khung
Thực sự không có gì cản trở bạn áp dụng bất kỳ nguyên tắc nào ở trên vào ứng dụng hoặc khung hiện tại mà bạn đang xây dựng. Một số nguyên tắc khác mà bạn nên ghi nhớ trong khi tạo Ứng dụng web tiến bộ là mô hình hiệu suất tập trung vào người dùng RAIL và ảnh động dựa trên FLIP.
Tôi hy vọng rằng trong năm 2016, chúng tôi sẽ chứng kiến ngày càng nhiều các mẫu mã nguyên mẫu và dự án gốc được hỗ trợ một cách tự nhiên cho các Ứng dụng web tiến bộ làm tính năng cốt lõi. Cho đến lúc đó, rào cản khi thêm các tính năng này vào ứng dụng của riêng bạn vẫn chưa quá cao và rất hữu ích, và điều này hoàn toàn xứng đáng với công sức bỏ ra.
Cấu trúc
Có nhiều cấp độ về cách thức "tất cả trong" hoạt động đối với mô hình Ứng dụng web tiến bộ, nhưng một phương pháp phổ biến được thực hiện là kiến trúc chúng xung quanh một Giao diện ứng dụng. Đây không phải là một yêu cầu bắt buộc nhưng đi kèm với một số lợi ích.
Cấu trúc shell ứng dụng khuyến khích lưu shell ứng dụng (Giao diện người dùng) vào bộ nhớ đệm để hoạt động khi không có mạng và điền sẵn nội dung của ứng dụng bằng JavaScript. Ở những lần truy cập lặp lại, việc này cho phép bạn nhanh chóng nhận được các pixel có ý nghĩa trên màn hình mà không cần mạng, ngay cả khi nội dung của bạn cuối cùng cũng đến từ đó. Điều này giúp hiệu suất tăng lên đáng kể.
Gần đây, Jeremy Keith đã nhận xét rằng trong loại mô hình này, có lẽ bạn không nên coi lượt kết xuất phía máy chủ là phương án dự phòng, mà nên coi lượt hiển thị phía máy khách là một tính năng nâng cao. Đây là ý kiến phản hồi công bằng.
Trong mô hình Application Shell, bạn nên dùng tính năng hiển thị phía máy chủ nhiều nhất có thể và nên dùng tính năng hiển thị liên tục phía máy khách dưới dạng một tính năng nâng cao, giống như cách chúng tôi "cải thiện" trải nghiệm khi hỗ trợ trình chạy dịch vụ. Có nhiều cách để đạt được điều này.
Đề xuất của tôi là đọc bài viết của chúng tôi về cấu trúc và đánh giá cách các nguyên tắc tương tự có thể được áp dụng tốt nhất cho ứng dụng và ngăn xếp của riêng bạn.
Bắt đầu tạo mẫu
Vỏ ứng dụng
Kho lưu trữ app-shell chứa việc triển khai gần như hoàn chỉnh cấu trúc Vỏ ứng dụng. Tiện ích này có phần phụ trợ được viết bằng Express.js và giao diện người dùng được viết bằng ES2015.
Vì nội dung này bao gồm cả phần phía máy khách và phía máy chủ của mô hình, đồng thời có khá nhiều vấn đề ở đó, bạn sẽ cần thời gian để làm quen với cơ sở mã. Đó là điểm khởi đầu Ứng dụng web tiến bộ toàn diện nhất của chúng tôi ngay bây giờ. Tài liệu sẽ là trọng tâm tiếp theo của chúng ta trong dự án này.
Bộ khởi động bằng polymer
Điểm khởi đầu chính thức cho các ứng dụng web Polymer hỗ trợ các tính năng sau đây của Progressive Web App:
- Tệp kê khai của ứng dụng web
- Màn hình chờ của Chrome dành cho Android
- Lưu vào bộ nhớ đệm ngoại tuyến của Service worker với các phần tử SW Bạch kim
- Thông báo đẩy (cần phải thiết lập thủ công) sử dụng Phần tử đẩy Bạch kim
Phiên bản PSK hiện tại không được hỗ trợ cho một số mẫu hiệu suất nâng cao hơn (ví dụ: mô hình Application Shell, tải không đồng bộ) mà bạn thấy trong một số ứng dụng web Progressive Polymer.
Chúng tôi dự định thử đưa những mẫu này vào PSK vào năm 2016. Tuy nhiên, bạn có thể tìm thấy các thử nghiệm ban đầu về vấn đề này trong ứng dụng Polymer Zuperkulblog của Rob Dodson và bài thuyết trình tuyệt vời về Mẫu Perf Perf của Eric Bidelman.
Bộ công cụ dành cho người mới bắt đầu dành cho web
Điểm khởi đầu cố định của chúng tôi cho các dự án mới dựa trên nền tảng đám mây bao gồm các tính năng sau đây của Progressive Web App:
- Tệp kê khai của ứng dụng web
- Màn hình chờ của Chrome dành cho Android
- Lưu trước vào bộ nhớ đệm của Service-worker nhờ sw-precache
Nếu bạn ưu tiên làm việc với vanilla JS/ES2015 và không thể sử dụng Polymer, thì Bộ công cụ dành cho người mới bắt đầu web có thể hữu ích như một điểm tham chiếu để bạn có thể sử dụng lại hoặc lấy cắp các đoạn mã.
Ứng dụng web tiến bộ có và không có khung
Một số Ứng dụng web tiến bộ nguồn mở đã được các thành viên của cộng đồng xây dựng, cả có thư viện và khung JS không có và không có thư viện và khung JS. Nếu bạn đang tìm nguồn cảm hứng, các kho lưu trữ dưới đây có thể giúp bạn tham khảo. Chúng cũng là những ứng dụng khá hay.
JavaScript Vanilla
- Bản ghi nhớ thoại của Paul Lewis được xây dựng bằng kiến trúc tương tự như
app-shell(ghi chú) - Wikipedia ngoại tuyến của Jake Archibald (video)
- Air Sounder của Paul Kinlan
- Bộ dò đàn ghi ta của Paul Lewis (bản ghi)
Polymer
- Zuperkulblog của Rob Dodson (trang trình bày)
Thể hiện cảm xúc
- iFixit của Jeff Posnick – sử dụng
sw-precacheđể lưu vào bộ nhớ đệm shell ứng dụng (trang trình bày)
DOM ảo
- Pokedex của Nolan Lawson – ứng dụng web tiến bộ tuyệt vời áp dụng phương pháp "làm mọi việc trong một trình chạy web" để giúp hiển thị liên tục. (ghi nợ)
Angular.js
- Timey.in của Kenneth Auchenberg – cũng sử dụng
sw-precacheđể lưu trước tài nguyên vào bộ nhớ đệm
Ghi chú kết thúc
Như đã đề cập, các Ứng dụng web tiến bộ vẫn còn trong giai đoạn phát triển ban đầu nhưng đây là thời điểm thú vị để sử dụng các phương pháp đằng sau các phương pháp đó và xem chúng có thể được áp dụng hiệu quả đến đâu cho các ứng dụng web của riêng bạn.
Paul Kinlan hiện đang lên kế hoạch xây dựng hướng dẫn Nguyên tắc cơ bản về web cho Ứng dụng web tiến bộ. Nếu bạn có ý kiến về những khía cạnh muốn tìm hiểu, vui lòng nhận xét về chủ đề này.
Tài liệu đọc thêm
- Ứng dụng web tiến bộ: Thoát khỏi các thẻ mà không làm mất đi linh hồn
- Lý do ứng dụng web tiến bộ trở thành tương lai của quá trình phát triển web
- Ứng dụng web tiến bộ: sẵn sàng cho khung giờ vàng
- Tạo ứng dụng tiến bộ bằng ServiceWorker
- Ứng dụng web tiến bộ là tương lai
- Ứng dụng web tiến bộ: Cách mới để trải nghiệm trên thiết bị di động
- Xin giới thiệu Pokedex.org: một ứng dụng web tiến bộ dành cho người hâm mộ Pokémon
- Tóm tắt về Hội nghị Nhà phát triển Chrome: Ứng dụng web tiến bộ