Gần đây, đã có nhiều cuộc thảo luận về Ứng dụng web tiến bộ được chào đón. Đây vẫn là một mô hình tương đối mới, nhưng các nguyên tắc của chúng cũng có thể giúp cải thiện các ứng dụng được xây dựng bằng vanilla JS, React, Polymer, Angular hoặc bất kỳ khung cụ thể 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ắt đầu với ứng dụng web tiến bộ của riêng bạn.
Ứ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 đang được phát triển vượt bậc trong các trình duyệt hiện đại. Cải tiến tăng dần là xương sống của mô hình.
Aaron Gustafson ví tính năng nâng cao tiến bộ như một M&M đậu phộng. Hạt lạc 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ể có màu khác nhau và trải nghiệm có thể thay đổi tuỳ thuộc vào khả năng của trình duyệt sử dụng lớp này.
Hãy nghĩ về vỏ kẹo là nơi nhiều tính năng của Ứng dụng web tiến bộ có thể hoạt động. Chúng là những trải nghiệm kết hợp những điểm tốt nhất của web và những tính năng tốt nhất của ứng dụng. Chúng hữu ích cho người dùng ngay từ lần truy cập đầu tiên trong 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, chúng trở nên thú vị hơn – tải rất nhanh trên kết nối mạng chậm (nhờ nhân viên 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 ứ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ộ là
- Tiến bộ – Dành cho mọi người dùng, bất kể lựa chọn trình duyệt là gì, vì chúng được xây dựng với tính năng nâng cao tăng dần với vai trò là đối tượng thuê chính.
- 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 tiếp theo.
- Độc lập về 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 trên mạng chất lượng thấp.
- Giống như ứng dụng – Sử dụng mô hình giao diện ứng dụng để cung cấp các thành phần đ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 của trình chạy dịch vụ.
- An toàn – Được phân phát thông qua TLS để ngăn chặn hành vi can thiệp vào hệ thống và đảm bảo nội dung không bị can thiệp.
- Có thể phát hiện – 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ác công cụ tìm kiếm tìm thấy ứng dụng đó.
- Có thể tương tác lại – Giúp người dùng dễ dàng tương tác lại bằng 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ữ lại" 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 qua 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ụ đang hoạt động tốt.
Một trong những lợi ích hấp dẫn của tính chất "tiến bộ" đối với mô hình này là các tính năng có thể được mở khoá dần khi các nhà cung cấp trình duyệt hỗ trợ họ tốt hơn. 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 với một số 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 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ộ đáng để 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ư một ứng dụng gốc trên màn hình chính của người dùng. Thư viện này cho phép ứng dụng khởi chạy ở chế độ toàn màn hình (không có thanh URL), cung cấp quyền kiểm soát hướng màn hình và trong các phiên bản Chrome trên Android gầ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 dùng để xác định một tập hợp 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 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 Manifest Generator (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 đáng tham khảo.
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, v.v. Mô-đun Nút favicons cũng có thể đạt được kết quả tương tự trong quy 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 mở rộng phạm vi hỗ trợ và Edge liệt kê những tệp này là đang được xem xét. WebKit/Safari 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 dành 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 hiện đã hỗ trợ tính năng 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 trang web bằng cách sử dụ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á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, các lượt truy cập cách nhau ít nhất 5 phút
Hiện có sẵn 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ị 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 trong nền, tách biệt với trang web của bạn. API này phản hồi các sự kiện, bao gồm cả yêu cầu mạng được tạo từ các trang mà nó phân phát. Trình chạy dịch vụ có thời gian tồn tại ngắn có chủ đích.
Nó sẽ thức dậy 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 Cache API để lưu tài nguyên vào bộ nhớ đệm và có thể dùng để cung cấp trải nghiệm ngoại tuyến cho người dùng.
Trình chạy dịch vụ 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 chú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 vào bộ nhớ đệm cho giao diện ứng dụng để giao diện ứng dụng 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ó 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ể bỏ qua và bạn nên thử 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 bạn mới làm việc với nhân viên dịch vụ.
Nhóm của chúng tôi cũng duy trì một số tiện ích trợ giúp trình chạy dịch vụ và xây dựng các công cụ mà chúng tôi thấy hữu ích trong việc giảm chi phí khi thiết lập trình chạy dịch vụ. Các thư viện này được liệt kê trên Thư viện trình chạy dịch vụ. Hai lợi ích chính là:
- sw-precache: một công cụ thời gian xây dựng tạo tập lệnh trình chạy dịch vụ hữu ích cho việc lưu trước giao diện ứng dụng web của bạn vào bộ nhớ đệm
- 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 sử dụng
Jeff Posnick đã viết một bài tóm tắt ngắn gọn về sw-precache có tên là Offline-first, nhanh, với mô-đun 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 hỗ trợ cho trình chạy dịch vụ, trong đó Edge có những 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 đến mối quan tâm đến chủ đề này thông qua kế hoạch 5 năm mà một kỹ sư đề xuất.
Thông báo đẩy để tương tác lại
Một cách hiệu quả là bạn có thể tạo ứ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í không cần chủ động sử dụng ứng dụng web để tương tác với trải nghiệm của bạn. Tính năng này cần có 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 cho Firefox và đang được xem xét cho 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 của họ.
Thông báo đẩy trên web mở là phần giới thiệu toàn diện về cách Matt Gaunt thiết lập thông báo đẩy và Lớp học lập trình về thông báo đẩy cũng có trong Kiến thức cơ bản về web.
Michael van Ouwerkerk từ nhóm Chrome cũng có 6 phút giới thiệu để Đẩy nếu bạn thích video nhiều hơn.
Phân lớp trong 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ó các 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 có quyền kiểm soát 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 đang đóng) và Bluetooth trên web (để trò chuyện với thiết bị Bluetooth từ ứng dụng web) cũng có thể được xếp lớp vào Ứng dụng web tiến bộ theo cách này.
Tính năng Đồng bộ hoá nền một lần đã bật trong Chrome và Jake Archibald có một video giới thiệu ứng dụng wikipedia ngoại tuyến của anh cùng một bài viết minh hoạ cách hoạt động của tính năng này. Francois Beaufort cũng có một số mẫu Bluetooth trên web nếu 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 cho ứng dụng hoặc khung làm việc hiện tại mà bạn đang xây dựng. Một vài nguyên tắc khác mà bạn nên lưu ý khi xây dựng Ứng dụng web tiến bộ là mô hình hiệu suất RAIL tập trung vào người dùng 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 số lượng bản mẫu và dự án khởi đầu tự nhiên tăng lên để hỗ trợ Progressive Web Apps 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 bạn chưa phải là cao và rất đáng để bỏ công sức.
Cấu trúc
Có nhiều cấp độ trong cách triển khai mô hình Ứng dụng web tiến bộ theo nhiều cấp độ khác nhau, nhưng một phương pháp phổ biến là thiết kế chúng dựa trên Giao diện ứng dụng (Application Shell). Đây không phải là một yêu cầu khó, 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 việc lưu giao diện ứng dụng vào bộ nhớ đệm (Giao diện người dùng) để giao diện này hoạt động khi không có mạng và điền nội dung bằng JavaScript. Trong các lượt truy cập lặp lại, điều 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 xuất phát từ đó. Điều này đi kèm với hiệu suất tăng đáng kể.
Gần đây, Jeremy Keith nhận xét rằng trong loại mô hình này, có lẽ việc hiển thị phía máy chủ không nên được xem là phương án dự phòng, mà nên coi hiển thị phía máy khách là một tính năng nâng cao. Đây là một ý kiến phản hồi công bằng.
Trong mô hình Application Shell, 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 như một tính năng nâng cao giống như cách chúng ta "nâng cao" trải nghiệm khi dịch vụ worker được hỗ trợ. Có nhiều cách để giải quyết vấn đề này.
Bạn nên đọc tài liệu của chúng tôi về cấu trúc này và đánh giá cách áp dụng tốt nhất các nguyên tắc tương tự cho ứng dụng và hệ thống của riêng bạn.
Bắt đầu tạo mẫu
Giao diện ứng dụng
Kho lưu trữ app-shell chứa bản triển khai gần như hoàn chỉnh của kiến trúc Vỏ ứng dụng. Giao diện 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ó bao gồm cả phần máy khách và phần phía máy chủ của mô hình và có khá nhiều vấn đề ở đó, nên sẽ mất một thời gian để làm quen với cơ sở mã. Đó là điểm khởi đầu của Ứ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 tôi trong dự án này.
Bộ khởi động bằng polyme
Đ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 của Ứng dụng web tiến bộ sau đây:
- 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 khi không có kết nối mạng bằng 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) với các thành phần Đẩy Bạch kim
Phiên bản PSK hiện tại 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 Application Shell, tải không đồng bộ) mà bạn tìm thấy trong một số ứng dụng web Progressive Polymer.
Chúng tôi dự định thử tích hợp 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 đầu tiên về mẫu 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 Perf Polymer của Eric Bidelman.
Bộ công cụ dành cho người mới bắt đầu web
Điểm khởi đầu cố định của chúng tôi cho các dự án vanilla mới bao gồm các tính năng sau đây 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 trước vào bộ nhớ đệm cho nhân viên dịch vụ nhờ sw-precache
Nếu bạn muốn làm việc với vanilla JS/ES2015 nhưng 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ể trở thành một điểm tham chiếu mà 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ả khi có và không có thư viện và khung JS. Nếu bạn đang tìm nguồn cảm hứng thì các kho lưu trữ dưới đây có thể hữu ích để bạn tham khảo. Chúng cũng là những ứng dụng tuyệt vời.
JavaScript Vanilla
- Voice Ghi nhớ của Paul Lewis được xây dựng bằng cách sử dụng kiến trúc tương tự như
app-shell(ghi nhớ) - Wikipedia ngoại tuyến của Jake Archibald (video)
- Airhorner của Paul Kinlan
- Guitar Tuner 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 giao diện ứng dụng (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 một nhân viên web" để giúp kết xuất tăng tiến. (sáng tác)
Angular.js
- Timey.in của Kenneth Auchenberg – cũng sử dụng
sw-precacheđể lưu trước tài nguyên
Ghi chú kết thúc
Như đã đề cập, các ứng dụng web tiến bộ vẫn còn ở giai đoạn sơ khai nhưng đây là thời điểm thú vị để tìm hiểu các phương pháp dựa trên 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ập kế hoạch cho hướng dẫn Kiến thức cơ bản về web về Ứng dụng web tiến bộ và nếu bạn có ý kiến về những lĩnh vực bạn muốn được đề cập, vui lòng nhận xét theo chuỗi.
Tài liệu đọc thêm
- Ứng dụng web tiến bộ: Thoát các thẻ mà không mất đi linh hồn
- Tại sao ứng dụng web tiến bộ là tương lai của sự phát triển web
- Ứng dụng web tiến bộ: sẵn sàng cho giờ vàng
- Tạo ra một ứ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ộ: Một cách mới để trải nghiệm 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 Hội nghị Nhà phát triển Chrome: Ứng dụng web tiến bộ