Nền tảng

Nền tảng vững chắc

Nền tảng vững chắc là yêu cầu cơ bản để xây dựng những PWA hiệu quả. Để triển khai nền tảng này, bạn cần thiết kế và lập trình cho các quy tắc ràng buộc của web theo một số nguyên tắc sau:

  • Sử dụng thiết bị di động làm điểm hạn chế lấy nét. Hãy đảm bảo mỗi thành phần hiển thị trong thiết kế của bạn chỉ tập trung vào nội dung và hoạt động tương tác thiết yếu.
  • Nhấn mạnh nội dung và chức năng cốt lõi trong quá trình thiết kế.
  • Nâng cao dần khi cần. Bắt đầu bằng cách xây dựng chức năng và nội dung cốt lõi của một thành phần bằng những công cụ đơn giản nhất, có sẵn rộng rãi nhất. Giúp mọi người dễ tiếp cận. Sau đó, thử nghiệm các tính năng nâng cao mà bạn muốn sử dụng và cải thiện thành phần cùng với các tính năng đó.
  • Cung cấp cho người dùng một trải nghiệm nhanh và chất lượng cao, tập trung vào các chỉ số hiệu suất web lấy người dùng làm trung tâm, nhận chỉ số người dùng thực và nâng cao hiệu suất cho tất cả người dùng, bất kể kết nối mạng, loại đầu vào, CPU hay công suất của GPU.

Bằng cách tuân theo các nguyên tắc này và cải tiến bằng các mẫu và tính năng web hiện đại, bạn có thể tạo ra trải nghiệm tuyệt vời và nhanh chóng với các thiết kế thực sự nội tại. Các thiết kế được hỗ trợ bởi các quy tắc ràng buộc thay vì pixel, cho phép mọi người dùng truy cập vào nội dung và chức năng cốt lõi của bạn theo cách phù hợp nhất với ngữ cảnh duyệt web cụ thể của họ.

Thiết kế web đáp ứng

Kể từ bài viết Thiết kế web thích ứng của Ethan Marcotte vào năm 2010, chúng tôi khuyến khích các nhà thiết kế và nhà phát triển tạo ra những trải nghiệm linh hoạt, giúp tạo ra giao diện người dùng hoạt động được trên nhiều kích thước màn hình và thiết bị.

Ở một nơi nào đó, kích thước này đã được rút ngắn xuống kích thước trên thiết bị di động, máy tính bảng và máy tính để bàn, với chiều rộng bị ảnh hưởng nhiều bởi kích thước màn hình iOS. Với CSS hiện đại và sự tập trung mới vào mục đích ban đầu của thiết kế thích ứng, chúng ta có thể đặt lại tình trạng nhồi nhét trong các trang web mượt mà.

Thiết kế web thích ứng giới thiệu ba thành phần kỹ thuật:

  • Lưới linh hoạt
  • Nội dung nghe nhìn linh hoạt
  • Truy vấn về nội dung nghe nhìn

Ethan kết luận rằng những yêu cầu về kỹ thuật này là chưa đủ; từ tương lai cũng đòi hỏi một cách tư duy khác.

Lầm tưởng về người dùng thiết bị di động

Trong thời kỳ đầu, các giả định về thiết kế đáp ứng được đưa ra với tên là giúp thiết kế trang web dễ dàng hơn. Ví dụ: trải nghiệm nhỏ dành cho điện thoại có chiều rộng 320px, trải nghiệm trung bình dành cho máy tính bảng và chiều rộng 1024px dành cho máy tính. Màn hình nhỏ có khả năng cảm ứng còn màn hình lớn thì không. Người dùng điện thoại vội và bị phân tâm, do đó cần có trải nghiệm "nhẹ".

Không có điều nào đúng cả; những giả định cho rằng nhu cầu của người dùng về cơ bản là khác nhau; chúng là những quan niệm sai lầm về thiết bị di động, chỉ dựa trên kích thước màn hình hoặc loại thiết bị. Điều này không liên quan đến quá trình xem xét kỹ lưỡng.

Ví dụ: dùng một ứng dụng web tiến bộ (PWA) mạng xã hội mà bạn có thể cài đặt ngay hôm nay trên thiết bị di động và máy tính. Trên máy tính, nhiều người dùng có thể giữ một cửa sổ hẹp với nguồn cấp dữ liệu ở một bên của màn hình trong khi làm việc, đồng thời cho rằng họ đang sử dụng thiết bị di động vì chiều rộng có sẵn sẽ không chính xác.

Thế giới PWA nằm ngoài thẻ của trình duyệt thậm chí đang bổ sung thêm những thách thức mới vào thế giới thiết kế thích ứng, chẳng hạn như chế độ thu nhỏ và khả năng hoạt động với thiết bị có thể gập lại.

Chế độ thu nhỏ

Khi PWA được cài đặt trên thiết bị máy tính, cửa sổ có thể thực sự nhỏ; nhỏ hơn cửa sổ của trình duyệt, nhỏ hơn cửa sổ xem trên thiết bị di động. Đây là tính năng mới trên web: chúng tôi có thể hỗ trợ chế độ thu nhỏ, một cửa sổ có thể nhỏ tới 200x100 pixel CSS.

Hiện nay, khi tạo PWA, bạn nên cân nhắc cung cấp những gì ở chế độ thu nhỏ, nhờ có thiết kế web thích ứng, chẳng hạn như chỉ cần điều khiển các nút trên trình phát nhạc, thông tin trên trang tổng quan hoặc các thao tác nhanh.

Trên máy tính, PWA có thể hiển thị trong một cửa sổ nhỏ hơn so với cửa sổ nhỏ nhất mà bạn từng thiết kế cho trình duyệt. Nó bổ sung một điểm ngắt mới cho thiết kế web thích ứng của bạn: chế độ thu nhỏ.

Thiết bị có thể gập lại và thiết bị kết hợp

Ngày nay, các thiết bị có thể gập lại và thiết bị kết hợp cũng phổ biến:

  • Điện thoại vỏ sò nhỏ.
  • Thiết bị có thể gập lại để làm điện thoại hoặc máy tính bảng.
  • Máy tính xách tay có thể chuyển đổi thành máy tính bảng.
  • Máy tính bảng có thể hoạt động như máy tính xách tay có bàn phím và bàn di chuột.
  • Sau đó, điện thoại có thể được chuyển đổi thành máy tính để bàn qua một trung tâm.

Mặc dù thử thách tồn tại trên mọi trang web, nhưng với Progressive Web App, bạn nắm quyền kiểm soát và chịu trách nhiệm về cửa sổ khi ứng dụng được cài đặt. Do đó, thiết kế của bạn phải phản ứng và mang lại trải nghiệm tốt nhất trong mọi bối cảnh.

Ưu tiên mọi thứ

Nhưng bạn nên bắt đầu từ đâu? Thiết bị di động ưu tiên, nội dung trước, ngoại tuyến trước? Khi thiết kế tính linh hoạt của web, đó là gì? Câu trả lời là có, mọi thứ trước tiên. Thuật ngữ ưu tiên thiết bị di động đã được diễn giải theo nhiều cách kể từ khi Luke Wroblewski sáng tạo ra từ này lần đầu tiên vào năm 2009: từ việc mô phỏng các mẫu trải nghiệm người dùng và giao diện người dùng dành riêng cho nền tảng trên web, cho đến việc tạo ứng dụng dành cho thiết bị di động trước khi tạo ứng dụng web cho đến việc chỉ sử dụng các truy vấn nội dung nghe nhìn có chiều rộng tối thiểu và gọi cụm từ đó một ngày. Tuy nhiên, mục đích ban đầu của ứng dụng này là: thiết bị di động buộc bạn phải tập trung. Như Luke đã nói:

Thiết bị di động yêu cầu nhóm phát triển phần mềm chỉ tập trung vào dữ liệu và hành động quan trọng nhất trong ứng dụng. Đơn giản là không có chỗ trong màn hình 320 x 480 pixel cho các phần tử không liên quan, không cần thiết. Bạn cần phải ưu tiên. Vì vậy, khi một nhóm thiết kế Mobile First, kết quả đạt được là mang lại một trải nghiệm tập trung vào các nhiệm vụ chính mà người dùng muốn hoàn thành mà không phải đi vòng và các mảnh vụn về giao diện làm hỏng các trang web truy cập máy tính để bàn hiện nay. Đó là trải nghiệm người dùng tốt và phù hợp cho doanh nghiệp.

Luke Wroblewski

Chỉ tập trung mỗi chế độ xem trang web của bạn vào những công việc thiết yếu mà người dùng muốn hoàn thành ở đó và không thêm nội dung vào ý tưởng chỉ vì họ có nhiều không gian trên màn hình hơn.

Nguyên tắc thứ hai được gợi ý trong Thiết kế web thích ứng: "độ dốc của những trải nghiệm khác nhau". Một trải nghiệm đơn lẻ, giống hệt nhau, hoàn hảo về mặt pixel cho mọi người dùng không phải là mục tiêu của công việc; tất cả những điều này là không thể.

Thay vì chỉ coi trải nghiệm web là một điều cố định, hãy xem đây là một tập hợp các đề xuất mà thiết bị của người dùng sẽ sử dụng để tạo ra trải nghiệm tốt nhất cho bối cảnh hiện tại của họ. Để làm được điều này, bạn cần áp dụng tính năng cải tiến tăng dần.

Cải tiến tăng dần

Tăng cường tăng tiến là một mẫu cho phép chúng ta viết mã chạy ở mọi nơi, bắt đầu từ HTML, CSS và JavaScript chuẩn, đồng thời thêm các lớp chức năng ngoài những tính năng dự phòng thích hợp khi API không có sẵn.

Bạn cải thiện bằng cách nào? Phát hiện tính năng là một mẫu trong đó bạn thực hiện kiểm thử để hỗ trợ và phản ứng dựa trên kết quả kiểm thử đó. Có một số công cụ và phương pháp nền tảng web tích hợp sẵn để thực hiện việc này.

Sử dụng @supports để kiểm tra xem trình duyệt có hỗ trợ tính năng CSS hay không và áp dụng các quy tắc dựa trên kết quả. Điều này áp dụng cho cả giá trị và thuộc tính CSS. Nếu một thuộc tính được hỗ trợ nhưng một giá trị không được hỗ trợ, thì thuộc tính đó cũng như sản phẩm không được hỗ trợ cũng sẽ không thành công. Mã JavaScript có thể truy cập vào tập dữ liệu này thông qua CSSSupportsRule.

Hầu hết các tính năng mới của nền tảng web đều được đính kèm vào các đối tượng hiện có, vì vậy, "tính năng" trong tính năng phát hiện kiểu đối tượng sẽ hoạt động tốt trong JavaScript, cũng như các hoạt động tra cứu tương tự khác, chẳng hạn như kiểm tra thuộc tính hoặc phương thức trên các phần tử.

Để gửi JavaScript hiện đại, bạn có thể sử dụng mẫu module/nomodule để cung cấp các tính năng mạnh mẽ hơn với trọng tải nhỏ hơn cho các trình duyệt hiện đại hơn và trải nghiệm dự phòng cho các trình duyệt cũ hơn. Điều này có thêm lợi ích của việc đảm bảo các tính năng JavaScript cơ sở mới, như lời hứa, lớp, hàm mũi tên, cũng như const và let có sẵn cho các trình duyệt hỗ trợ Mô-đun ES.

Bạn thậm chí có thể kết hợp nhiều hình thức phát hiện tính năng để tạo đường cơ sở nâng cao. Chương trình này được gọi là Cắt mù tạt do nhóm BBC News đặt ra. Chương trình này cho phép bạn truyền tải trải nghiệm cốt lõi đến mọi người và chỉ bắt đầu nâng cao trải nghiệm sau khi đạt đến một thanh phát hiện được một tính năng cụ thể.

Tránh phát hiện thiết bị

Bạn nên trực tiếp kiểm thử khả năng hỗ trợ tính năng thay vì đưa ra các giả định hỗ trợ dựa trên chuỗi Tác nhân người dùng.

Chuỗi tác nhân người dùng chưa bao giờ thực sự đáng tin cậy. Họ dựa vào việc có được kiến thức gần như hoàn hảo về mọi tổ hợp trình duyệt, hệ điều hành và thiết bị có sẵn để "đoán đúng". Ngay cả khi chúng dễ bị giả mạo người dùng, ví dụ: chuyển hướng trang web trên máy tính để bàn trên trình duyệt dành cho thiết bị di động cũng đơn giản như việc giả mạo chuỗi tác nhân người dùng trên máy tính.

Hơn nữa, các trình duyệt đang cố gắng đóng băng các chuỗi Tác nhân người dùng, trong đó các chuỗi tác nhân người dùng dùng để phát hiện tính năng được gọi rõ ràng là lý do không dùng nữa, khiến các chuỗi này thậm chí còn không đáng tin cậy hơn so với trước đây khi xác định người dùng và thiết bị.

Hiển thị nội dung trước tiên

Một nguyên tắc khác trong việc thiết kế cho web là: bắt đầu với nội dung của bạn trước. Ví dụ: mã cổ phiếu theo thời gian thực với biểu đồ về giá cổ phiếu, cốt lõi là một bảng gồm các cổ phiếu có giá của chúng trong một khoảng thời gian, có thể kèm theo đường liên kết để làm mới trang web.

Sau đó, bạn có thể cải thiện dữ liệu này bằng JavaScript và các yêu cầu tìm nạp để cập nhật giá trị của bảng trên bộ tính giờ hoặc cải tiến bằng ổ cắm để cập nhật dựa trên chế độ đẩy theo thời gian thực. Bạn có thể cải tiến nó một lần nữa để vẽ biểu đồ kết quả, có thể với CSS, có thể với SVG, với Canvas. Nhưng điểm cốt lõi bắt đầu từ nội dung.

Thiết kế nội tại

  • Thiết bị di động làm hạn chế tập trung vào trải nghiệm người dùng.
  • Nhấn mạnh nội dung và chức năng cốt lõi trong quá trình thiết kế.
  • Nâng cấp dần bằng chức năng nâng cao (nếu có).

Những nguyên tắc này kết hợp lại để mang đến cho chúng tôi một điều mới mẻ: thiết kế nội tại. Trong bài nói chuyện Thiết kế bố cục nội tại, Jen Simmons nói về việc sử dụng các công cụ CSS hiện đại như Lưới, Flexbox, bố cục luồng và chế độ viết để thiết kế và xây dựng giao diện người dùng. Nhờ những công cụ này, cô cho biết:

Bạn thực sự có thể làm cho bố cục trở nên nội tại với nội dung chúng ta và thiết kế chúng ta muốn thực hiện.

Jen Simmons

CSS mới này cho phép nhà thiết kế lấy lại một số quyền kiểm soát đối với bố cục nhưng phải tuân thủ các nguyên tắc thiết kế web mới nhất. Thay vì tạo các biểu mẫu cố định dựa trên kích thước màn hình cố định, bạn xác định cùng lúc các quy tắc dựa trên nội dung để áp dụng bố cục bằng cách nhấn vào các thuộc tính nội tại của nội dung đó, chẳng hạn như kích thước nhỏ hoặc lớn, kích thước văn bản và không gian có sẵn. Chúng cho phép bạn nhận ra thiết kế của mình khi tương tác với nội dung mà không cần kiểm soát vị trí của mọi pixel.

Bố cục nội tại giúp cuộc trò chuyện về quyền kiểm soát diễn ra trên toàn vòng tròn trên web, giúp định nghĩa rõ ràng hơn. Quyền kiểm soát trên web không liên quan đến việc đọc chính tả thiết bị, kích thước màn hình, màu sắc, phông chữ hoặc bố cục hoặc chức năng của từng khách truy cập vào trang web của bạn. Quyền kiểm soát trên web liên quan đến việc viết các quy tắc mà trình duyệt sẽ sử dụng để tập hợp trải nghiệm của bạn, xây dựng trải nghiệm riêng biệt cho từng người dùng trong Ứng dụng web tiến bộ của bạn.

Hiệu suất của trang web

Nền tảng cuối cùng nhưng không kém phần quan trọng đối với PWA là Hiệu suất web. Mang đến trải nghiệm tuyệt vời cho người dùng là bắt buộc; nó sẽ giúp tăng số lượt chuyển đổi bằng mọi cách có thể.

Hiệu suất web bao gồm một số bước:

  • Tìm hiểu các chỉ số chính hiện có tập trung vào người dùng.
  • Đặt mục tiêu cho mỗi chỉ số.
  • Đo lường PWA của chúng tôi.
  • Cải thiện các chỉ số bằng cách áp dụng các kỹ thuật và phương pháp hay nhất theo cách tĩnh trong mã nguồn hoặc máy chủ của chúng tôi.
  • Hãy đo lại.
  • Cải thiện trải nghiệm cho từng người dùng, trực tiếp, dựa trên bối cảnh của người dùng.

Hiện nay, các chỉ số về hiệu suất web sẽ đo lường tốc độ xuất hiện của nội dung trên màn hình, cũng như mức độ tương tác của trang web và cảm nhận của người dùng đối với trải nghiệm.

Các chỉ số quan trọng về trang web

Trong thập kỷ qua, chúng tôi đã xử lý nhiều chỉ số để đo lường mức độ thành công về hiệu suất web. Hiện nay, bộ chỉ số được đề xuất (còn gọi là Các chỉ số quan trọng về trang web) tập trung vào 3 khía cạnh chính ảnh hưởng đến hiệu suất và trải nghiệm người dùng:

Một bộ chỉ số trong Các chỉ số quan trọng về trang web cho thấy kết quả về hiệu suất của một trang web.

Với Các chỉ số quan trọng về trang web, bạn có thể xem nhanh mức độ hiệu quả hoặc kém của PWA liên quan đến hiệu suất và trải nghiệm người dùng.

Nền tảng PWA

PWA của bạn cần có một nền tảng vững chắc về thiết kế thích ứng, thiết bị di động và mọi thứ ưu tiên, thiết kế nội tại và hiệu suất web. Đây là nền tảng để mang đến trải nghiệm tuyệt vời cho tất cả người dùng.

Tài nguyên