Gần đây, có rất nhiều cuộc thảo luận sôi nổi về Ứng dụng web tiến bộ. Mặc dù vẫn là một mô hình tương đối mới, nhưng các nguyên tắc của mô hình này cũng có thể cải thiện các ứng dụng được xây dựng bằng JS thuần tuý, 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ố lựa chọn và ứng dụng tham khảo để bạn bắt đầu sử dụng ứng dụng web tiến bộ của riêng mình ngay hôm nay.
Ứng dụng web tiến bộ là gì?
Điều quan trọng cần nhớ là Ứng dụng web tiến bộ hoạt động ở mọi nơi nhưng được tăng cường trong các trình duyệt hiện đại. Cải tiến tăng dần là nền tảng của mô hình này.
Aaron Gustafson ví cải tiến tăng dần như một viên kẹo sô cô la M&M nhân đậu phộng. Hạt đậu phộng là nội dung, lớp sô cô la là tầng trình diễn và JavaScript là lớp vỏ kẹo cứng. Lớp này có thể khác nhau về màu sắc và trải nghiệm có thể khác nhau tuỳ thuộc vào chức năng của trình duyệt sử dụng lớp này.
Hãy coi lớp vỏ kẹo là nơi chứ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 tính năng tốt nhất của web và ứng dụng. Người dùng có thể sử dụng ngay từ lần đầu tiên truy cập vào một thẻ trình duyệt mà không cần cài đặt.
Khi người dùng xây dựng mối quan hệ với các ứng dụng này thông qua việc sử dụng lặp lại, họ sẽ làm cho lớp vỏ kẹo trở nên ngọt ngào hơn – tải rất nhanh trên các kết nối mạng chậm (nhờ trình chạy dịch vụ), 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 chúng dưới dạng trải nghiệm trong ứ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.
Ứng dụng web tiến bộ là
- Tiến bộ – Hoạt động cho mọi người dùng, bất kể lựa chọn trình duyệt vì chúng được xây dựng với tính năng cải tiến tăng dần dưới dạng đối tượng thuê 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 bất kỳ thiết bị nào khác.
- Không phụ thuộc vào khả năng kết nối – Được cải tiến bằng trình chạy dịch vụ để hoạt động khi không có mạng hoặc trên mạng chất lượng thấp.
- Giống như ứng dụng – Sử dụng giao diện ứng dụng để cung cấp các thao tác điều hướng và tương tác theo kiểu ứng dụng.
- Mới – Luôn cập nhật nhờ quy trình cập nhật trình chạy dịch vụ.
- An toàn – Được phân phát qua TLS để ngăn chặn hành vi nghe lén và đảm bảo nội dung không bị can thiệp.
- Có thể khám phá – Có thể 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ông cụ tìm kiếm tìm thấy chúng.
- Tương tác lại – Giúp người dùng dễ dàng tương tác lại thông qua các tính năng như thông báo đẩy.
- Dễ dàng cài đặt – Cho phép người dùng “giữ” các ứng dụng mà họ thấy hữu ích nhất trên màn hình chính mà không cần đến cửa hàng ứng dụng.
- Có thể liên kết – Dễ dàng chia sẻ qua URL và không yêu cầu cài đặt phức tạp.
Ứng dụng web tiến bộ cũng không chỉ dành riêng cho 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 cho Android (Bản thử nghiệm) với các tính năng Thêm vào màn hình chính và lưu vào bộ nhớ đệm của trình chạy dịch vụ đang hoạt động tốt.
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 cung cấp dịch vụ hỗ trợ tốt hơn cho các tính năng đó. Tất nhiên, các ứng dụng web tiến bộ như Pokedex cũng hoạt động hiệu quả trong Opera trên Android, nhưng có 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 gốc 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 Ứng dụng web tiến bộ mà bạn nên xem qua.
Nguyên tắc
Tệp kê khai ứng dụng web
Tệp kê khai giúp ứng dụng web của bạn có giao diện giống ứng dụng gốc hơn trên màn hình chính của người dùng. Tệp này cho phép ứng dụng được khởi chạy ở chế độ toàn màn hình (không có thanh URL), cho phé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, tệp này 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 biểu tượng màn hình chờ và 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 Web Starter Kit và 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 tiện dụng đáng để xem.
Trong các dự án cá nhân, tôi dựa vào realfavicongenerator để tạo 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, v.v. Mô-đun Node favicons cũng có thể đạt được kết quả tương tự trong quá trình xây dựng.
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 hiện nay, trong khi Firefox đang tích cực phát triển tính năng hỗ trợ và Edge liệt kê các tệp kê khai này là đang xem xét. WebKit/Safari vẫn chưa đă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 cho Android trên trang Kiến thức cơ bản về web.
Biểu ngữ "Thêm vào màn hình chính"
Chrome trên Android đã hỗ trợ thêm trang web của bạn vào màn hình chính trong một thời gian, nhưng các phiên bản gần đây cũng hỗ trợ chủ động đề xuất thêm 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 xuất hiện, ứ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át qua HTTPS (xem letsencrypt để biết chứng chỉ miễn phí)
- Đã đăng ký một trình chạy dịch vụ hợp lệ
- Được truy cập 2 lần, mỗi lần cách nhau ít nhất 5 phút
Có một số mẫu biểu ngữ cài đặt ứng dụng, bao gồm 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ị ứ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ó mạng
Trình chạy dịch vụ là một tập lệnh chạy trong nền, tách biệt với trang web của bạn. Trình chạy dịch vụ phản hồi các sự kiện, bao gồm cả yêu cầu mạng được thực hiện từ các trang mà trình chạy dịch vụ phân phát. Trình chạy dịch vụ có thời gian hoạt động ngắn theo chủ đích.
Dịch vụ này sẽ hoạt động khi nhận được một sự kiện và chỉ chạy trong thời gian cần thiết để xử lý sự kiện đó. Trình chạy dịch vụ cho phép bạn sử dụng Cache API để lưu tài nguyên vào bộ nhớ đệm và có thể dùng để cung cấp cho người dùng trải nghiệm ngoại tuyến.
Trình chạy dịch vụ là công cụ mạnh mẽ để lưu vào bộ nhớ đệm khi không có mạng, nhưng cũng mang lại hiệu suất đáng kể dưới dạng 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 giao diện ứng dụng vào bộ nhớ đệm để giao diện này hoạt động khi không có mạng và điền nội dung bằng JavaScript.
Bạn có thể xem một bộ mẫu trình chạy dịch vụ toàn diện trên các mẫu của Google Chrome. Sách hướng dẫn ngoại tuyến của Jake Archibald là một tài liệu không thể bỏ qua và tôi khuyên bạn nên thử xem hướng dẫn ứng dụng web ngoại tuyến đầu tiên của Paul Kinlan nếu bạn mới sử dụng trình chạy dịch vụ.
Nhóm của chúng tôi cũng duy trì một số tiện ích trợ giúp của trình chạy dịch vụ và các công cụ xây dựng mà chúng tôi thấy hữu ích trong việc giảm bớt hao tổn khi thiết lập trình chạy dịch vụ. Các thư viện này được liệt kê trong phần Thư viện trình chạy dịch vụ. Hai loại chính là:
- sw-precache: một công cụ thời gian xây dựng tạo ra tập lệnh trình chạy dịch vụ hữu ích cho việc lưu trước vào bộ nhớ đệm của giao diện ứng dụng web
- sw-toolbox: thư viện cung cấp bộ nhớ đệm thời gian chạy cho các tài nguyên không thường xuyên sử dụng
Jeff Posnick đã viết một bài hướng dẫn nhanh về sw-precache có tên là Offline-first, fast, with the sw-precache module (Nhanh, ưu tiên ngoại tuyến, với mô-đun sw-precache) và một lớp học lập trình về 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 tính năng hỗ trợ cho trình chạy dịch vụ, trong đó Edge có các tín hiệu công khai tích cực về mối quan tâm đến tính năng này. Safari đã đề cập ngắn gọn về mối quan tâm đến tính năng này thông qua kế hoạch 5 năm do một kỹ sư đề xuất.
Thông báo đẩy để thu hút lại người dùng
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ẻ. Người dùng có thể đóng trình duyệt và thậm chí không cần phải đang 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 đó.
Push API được triển khai trong Chrome, đang được phát triển trong Firefox và đang được xem xét trong Edge. Safari chưa có tín hiệu công khai nào về ý định triển khai tính năng này.
Thông báo đẩy trên web mở là một bài giới thiệu toàn diện về cách thiết lập thông báo đẩy của Matt Gaunt và lớp học lập trình về thông báo đẩy cũng có trên trang Kiến thức cơ bản về web.
Michael van Ouwerkerk trong nhóm Chrome cũng có một video giới thiệu dài 6 phút về Push nếu bạn thích xem video hơn.
Kết hợ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ó nhiều mức độ ngọt ngào khác nhau, tuỳ thuộc vào trình duyệt được dùng để xem ứng dụng web của bạn. Bạn là người kiểm soát lớp vỏ kẹo cứng.
Các tính năng bổ sung sắp ra mắt trên nền tảng web như Đồng bộ hoá trong nền (để đồng bộ hoá dữ liệu với máy chủ ngay cả khi ứng dụng web của bạn đã đóng) và Web Bluetooth (để giao tiếp với các thiết bị Bluetooth từ ứng dụng web của bạn) cũng có thể được phân lớp vào Ứng dụng web tiến bộ của bạn theo cách này.
Tính năng Đồng bộ hoá trong nền một lần đã được bật trong Chrome và Jake Archibald có một video về ứng dụng Wikipedia ngoại tuyến và bài viết minh hoạ tính năng này. François Beaufort cũng có một số mẫu Web Bluetooth nếu bạn muốn dùng thử API đó.
Thân thiện với khung
Bạn hoàn toàn có thể áp dụng bất kỳ nguyên tắc nào ở trên cho một ứng dụng hoặc khung hiện có mà bạn đang xây dựng. Một vài nguyên tắc khác cần lưu ý khi xây dựng Ứng dụng web tiến bộ là mô hình hiệu suất lấy người dùng làm trung tâm RAIL và ảnh động dựa trên FLIP.
Tôi hy vọng rằng trong năm 2016, chúng ta sẽ thấy ngày càng nhiều dự án mẫu và dự án hạt giống tích hợp sẵn tính năng hỗ trợ Ứng dụng web tiến bộ như một tính năng cốt lõi. Cho đến lúc đó, rào cản để thêm các tính năng này vào ứng dụng của riêng bạn không quá cao và theo tôi, việc này hoàn toàn xứng đáng với công sức bỏ ra.
Kiến trúc
Có nhiều mức độ "tất cả trong một" trên mô hình Ứng dụng web tiến bộ, nhưng một phương pháp phổ biến được áp dụng là thiết kế chúng xung quanh một Giao diện ứng dụng. Đây không phải là yêu cầu bắt buộc nhưng mang lại một số lợi ích.
Cấu trúc Giao diện ứng dụng khuyến khích việc lưu giao diện ứng dụng (Giao diện người dùng) vào bộ nhớ đệm để giao diện này hoạt động khi không có mạng và điền nội dung bằng JavaScript. Khi người dùng truy cập lại, điều này cho phép bạn hiển thị các pixel có ý nghĩa trên màn hình rất nhanh mà không cần mạng, ngay cả khi nội dung của bạn cuối cùng đến từ đó. Điều này giúp cải thiện đáng kể hiệu suất.
Jeremy Keith gần đây đã bình luận rằng trong loại mô hình này, có lẽ không nên xem kết xuất phía máy chủ là một phương án dự phòng mà nên xem kết xuất phía máy khách là một tính năng nâng cao. Đây là ý kiến phản hồi hợp lý.
Trong mô hình Giao diện ứng dụng, bạn nên sử dụng tính năng kết xuất phía máy chủ nhiều nhất có thể và sử dụng tính năng kết xuất tăng dần phía máy khách để cải thiện trải nghiệm, tương tự như cách chúng tôi "cải thiện" trải nghiệm khi trình chạy dịch vụ được hỗ trợ. Có nhiều cách để tiếp cận vấn đề này.
Bạn nên đọc bài viết của chúng tôi về cấu trúc và đánh giá cách áp dụng các nguyên tắc tương tự sao cho phù hợp nhất với ứng dụng và ngăn xếp của riêng bạn.
Mã nguyên mẫu để bắt đầu
Giao diện ứng dụng
Kho lưu trữ app-shell chứa một bản triển khai gần như hoàn chỉnh của kiến trúc Giao diện ứng dụng. Ứng dụng 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ì ứng dụng này bao gồm cả phần phía ứng dụng và phía máy chủ của mô hình, đồng thời có khá nhiều hoạt động diễn ra ở đó, nên bạn sẽ mất một chút thời gian để làm quen với toàn bộ mã nguồn. Nếu không, đây là điểm khởi đầu toàn diện nhất cho Ứng dụng web tiến bộ của chúng tôi hiện nay. Tài liệu sẽ là trọng tâm tiếp theo của chúng tôi cho dự án này.
Bộ khởi động Polymer
Điểm xuất phát chính thức cho các ứng dụng web Polymer hỗ trợ các tính năng sau của Ứng dụng web tiến bộ:
- Tệp kê khai ứ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 trình chạy dịch vụ bằng các phần tử Platinum SW
- Thông báo đẩy (cần thiết lập thủ công) với các phần tử Platinum Push
Phiên bản hiện tại của PSK thiếu tính năng hỗ trợ cho một số mẫu hiệu suất nâng cao hơn (ví dụ: mô hình Giao diện ứng dụng, tải không đồng bộ) mà bạn thấy trong một số ứng dụng web Polymer tiến bộ.
Chúng tôi dự định thử đưa các mẫu này vào PSK vào năm 2016, nhưng 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 nói chuyện xuất sắc về Mẫu hiệu suất Polymer của Eric Bidelman.
Bộ công cụ khởi động web
Điểm xuất phát theo quan điểm của chúng tôi cho các dự án vanilla mới bao gồm các tính năng Ứng dụng web tiến bộ sau:
- Tệp kê khai ứ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 trình chạy dịch vụ nhờ sw-precache
Nếu bạn muốn làm việc với vanilla JS/ES2015 và không thể sử dụng Polymer, thì Web Starter Kit có thể là một điểm tham chiếu hữu ích mà bạn có thể sử dụng lại hoặc lấy các đoạn mã từ đó.
Ứ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 trong cộng đồng xây dựng, cả khi có và không có thư viện cũng như khung JS. Nếu bạn đang tìm cảm hứng, các kho lưu trữ dưới đây có thể hữu ích để tham khảo. Chúng cũng là những ứng dụng rất hay.
JavaScript thuần tuý
- Ghi nhớ bằng giọng nói của Paul Lewis được xây dựng bằng cấu trúc tương tự như
app-shell(bài viết) - Wikipedia ngoại tuyến của Jake Archibald (video)
- Air Horner của Paul Kinlan
- Guitar Tuner của Paul Lewis (bài viết)
Polymer
- Zuperkulblog của Rob Dodson (trang trình bày)
Phản ứng
- iFixit của Jeff Posnick – sử dụng
sw-precacheđể lưu giao diện ứng dụng vào bộ nhớ đệm (trang trình bày)
DOM ảo
- Pokedex của Nolan Lawson – ứng dụng web tiến bộ xuất sắc áp dụng phương pháp "làm mọi thứ trong trình chạy web" để hỗ trợ quá trình kết xuất tăng dần. (bài viết)
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
Lời kết
Như đã đề cập, Ứng dụng web tiến bộ vẫn còn sơ khai nhưng đây là thời điểm thú vị để thử nghiệm các phương pháp đằng sau chúng và xem chúng có thể áp dụng tốt như thế nào cho các ứng dụng web của riêng bạn.
Paul Kinlan hiện đang lên kế hoạch cho hướng dẫn về Kiến thức cơ bản về web trên Ứng dụng web tiến bộ. Nếu bạn có ý kiến đóng góp về những nội dung mà bạn muốn được đề cập, vui lòng bình luận trong chuỗi bài viết.
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 bản sắc
- Tại sao ứng dụng web tiến bộ là tương lai của hoạt động phát triển web
- Ứng dụng web tiến bộ: sẵn sàng cho 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 thiết bị di động
- 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 Hội nghị Nhà phát triển Chrome: Ứng dụng web tiến bộ