Trang này được dịch bởi Cloud Translation API.

Ứng dụng web tiến bộ trên các trang web nhiều nguồn gốc

Thách thức và cách giải quyết khi xây dựng Ứng dụng web tiến bộ trên các trang web nhiều nguồn gốc.

Demián Renzulli

Thông tin khái quát

Trước đây, việc sử dụng kiến trúc đa nguồn gốc có một số lợi ích nhưng đối với Ứng dụng web tiến bộ, cách tiếp cận đó cũng đặt ra nhiều thách thức. Cụ thể, chính sách cùng nguồn gốc áp dụng các quy định hạn chế đối với việc chia sẻ những nội dung như trình chạy dịch vụ và bộ nhớ đệm, quyền, cũng như để đạt được trải nghiệm độc lập trên nhiều nguồn gốc. Bài viết này sẽ mô tả các lợi ích và việc không tốt khi sử dụng nhiều nguồn gốc, đồng thời giải thích các khó khăn và cách giải quyết khi xây dựng Ứng dụng web tiến bộ trong các trang web nhiều nguồn gốc.

Sử dụng đúng và sai mục đích của nhiều nguồn gốc

Có một số lý do chính đáng để các trang web sử dụng kiến trúc nhiều nguồn gốc, chủ yếu liên quan đến việc cung cấp một nhóm ứng dụng web độc lập hoặc tạo các trải nghiệm hoàn toàn tách biệt với nhau. Bạn cũng nên tránh sử dụng.

Tốt

Hãy cùng xem các lý do hữu ích trước:

Bản địa hoá / Ngôn ngữ: Dùng miền cấp cao nhất theo mã quốc gia để phân phát các trang web được phân phát ở nhiều quốc gia (ví dụ: https://www.google.com.ar) hoặc sử dụng miền con để phân chia các trang web nhắm đến nhiều vị trí (ví dụ: https://newyork.craigslist.org) hoặc để cung cấp nội dung cho một ngôn ngữ cụ thể (ví dụ: https://en.wikipedia.org).
Ứng dụng web độc lập: Sử dụng nhiều miền con để cung cấp trải nghiệm có mục đích khác biệt đáng kể so với trang web trên nguồn gốc chính. Ví dụ: trên một trang web tin tức, ứng dụng web giải ô chữ có thể được phân phát một cách có chủ đích từ https://crosswords.example.com, sau đó cài đặt và sử dụng như một PWA độc lập mà không cần phải chia sẻ tài nguyên hoặc chức năng nào với trang web chính.

Tệ

Nếu bạn không thực hiện bất kỳ thao tác nào trong số này, có thể việc sử dụng cấu trúc nhiều nguồn gốc sẽ gây bất lợi khi xây dựng Ứng dụng web tiến bộ.

Mặc dù vậy, nhiều trang web vẫn tiếp tục được cấu trúc theo cách này mà không có lý do cụ thể nào hoặc vì lý do "cũ". Một ví dụ là sử dụng miền con để tuỳ ý phân tách các phần của một trang web trong một trải nghiệm hợp nhất.

Ví dụ: bạn không nên sử dụng các mẫu sau:

Các mục trang web: Phân tách các phần khác nhau của một trang web trên các miền con. Trên các trang web tin tức, nhiều người sẽ thấy trang chủ tại: https://www.example.com, trong khi mục thể thao nằm ở https://sports.example.com, trang chính trị ở https://politics.example.com, v.v. Trong trường hợp là trang web thương mại điện tử, hãy sử dụng các mã như https://category.example.com cho danh mục sản phẩm, https://product.example.com cho trang sản phẩm, v.v.
Luồng người dùng: Một phương pháp khác không được khuyến khích là tách riêng các phần nhỏ hơn của trang web, chẳng hạn như các trang cho quy trình đăng nhập hoặc mua hàng trong miền con. Ví dụ: sử dụng https://login.example.com và https://checkout.example.com.

Đối với những trường hợp không thể di chuyển sang một nguồn gốc duy nhất, nội dung sau đây là danh sách các thách thức và (nếu có thể) các giải pháp có thể được xem xét khi xây dựng Ứng dụng web tiến bộ.

Thách thức và cách giải quyết cho PWA trên nhiều nguồn gốc

Khi xây dựng một trang web trên nhiều nguồn gốc, việc cung cấp một trải nghiệm PWA hợp nhất là một vấn đề khó khăn, chủ yếu là do chính sách về cùng nguồn gốc đặt ra một số hạn chế. Hãy cùng xem xét từng nội dung.

Trình chạy dịch vụ

Nguồn gốc của URL tập lệnh trình chạy dịch vụ phải giống với nguồn gốc của trang gọi register(). Điều này có nghĩa là, chẳng hạn như một trang tại https://www.example.com không thể gọi register() bằng url của trình chạy dịch vụ tại https://section.example.com.

Một điểm khác cần cân nhắc là trình chạy dịch vụ chỉ có thể kiểm soát các trang được lưu trữ theo nguồn gốc và đường dẫn chứa trang đó. Tức là nếu được lưu trữ tại https://www.example.com, trình chạy dịch vụ chỉ có thể kiểm soát các URL từ nguồn đó (theo đường dẫn được xác định trong tham số phạm vi), nhưng sẽ không kiểm soát bất kỳ trang nào trong các miền con khác, chẳng hạn như các trang trong https://section.example.com.

Trong trường hợp này, giải pháp duy nhất là sử dụng nhiều trình chạy dịch vụ (một trình chạy dịch vụ cho mỗi nguồn gốc).

Chức năng lưu vào bộ nhớ đệm

Đối tượng Cache,indexDB và localStorage cũng bị ràng buộc vào một nguồn gốc duy nhất. Điều này có nghĩa là bạn không thể truy cập vào các bộ nhớ đệm thuộc về https://www.example.com, chẳng hạn như https://www.section.example.com.

Dưới đây là một số việc bạn có thể làm để quản lý bộ nhớ đệm đúng cách trong các trường hợp như sau:

Tận dụng tính năng lưu vào bộ nhớ đệm của trình duyệt: Bạn luôn nên sử dụng các phương pháp hay nhất để lưu vào bộ nhớ đệm trong trình duyệt theo cách truyền thống. Kỹ thuật này mang lại thêm lợi ích khi sử dụng lại tài nguyên đã lưu vào bộ nhớ đệm trên toàn bộ các nguồn gốc, điều này không thể thực hiện được với bộ nhớ đệm của trình chạy dịch vụ. Để biết các phương pháp hay nhất về cách sử dụng Bộ nhớ đệm HTTP với trình chạy dịch vụ, bạn có thể xem bài đăng này.
Giảm tải cho việc cài đặt trình chạy dịch vụ: Nếu bạn đang duy trì nhiều trình chạy dịch vụ, hãy tránh việc bắt người dùng phải trả chi phí cài đặt lớn mỗi khi họ di chuyển đến một nguồn gốc mới. Nói cách khác: chỉ lưu trước các tài nguyên thực sự cần thiết vào bộ nhớ đệm.

Quyền

Các quyền cũng thuộc phạm vi của các nguồn gốc. Điều này có nghĩa là nếu một người dùng đã cấp một quyền nhất định cho nguồn gốc https://section.example.com, thì quyền này sẽ không chuyển sang các nguồn gốc khác, chẳng hạn như https://www.example.com.

Vì không có cách nào để chia sẻ quyền trên các nguồn gốc, nên giải pháp duy nhất ở đây là yêu cầu cấp quyền trên từng miền con của những miền con cần phải có một tính năng cụ thể (ví dụ: vị trí). Đối với những tính năng như thông báo đẩy trên web, bạn có thể duy trì một cookie để theo dõi xem quyền đã được người dùng chấp nhận trong một miền con khác hay chưa, để tránh yêu cầu lại quyền đó.

Cài đặt

Để cài đặt PWA, mỗi nguồn gốc phải có tệp kê khai riêng với start_url tương ứng với chính nó. Tức là người dùng nhận được lời nhắc cài đặt trên một nguồn gốc cụ thể (ví dụ: https://section.example.com) sẽ không thể cài đặt PWA với start_url trên một nguồn khác (ví dụ: https://www.example.com). Nói cách khác, người dùng nhận được lời nhắc cài đặt trong miền con sẽ chỉ có thể cài đặt PWA cho các trang con, chứ không thể cài đặt PWA cho URL chính của ứng dụng.

Ngoài ra, một người dùng có thể nhận được nhiều lời nhắc cài đặt khi sử dụng trang web (nếu mỗi miền con đều đáp ứng tiêu chí cài đặt) và nhắc người dùng cài đặt PWA.

Để giảm thiểu vấn đề này, bạn có thể đảm bảo rằng lời nhắc chỉ xuất hiện trên nguồn chính. Khi người dùng truy cập vào miền con vượt qua các tiêu chí cài đặt:

Nghe sự kiện beforeinstallprompt.
Ngăn lời nhắc xuất hiện, gọi event.preventDefault().

Bằng cách đó, bạn đảm bảo lời nhắc không xuất hiện ở các phần không mong muốn trên trang web, đồng thời vẫn có thể tiếp tục hiển thị lời nhắc, chẳng hạn như trong nguồn gốc chính (ví dụ: Trang chủ).

Chế độ độc lập

Trong khi thao tác trong một cửa sổ độc lập, trình duyệt sẽ hoạt động theo cách khác khi người dùng chuyển ra ngoài phạm vi mà tệp kê khai của PWA đặt ra. Hành vi này phụ thuộc vào từng phiên bản trình duyệt và nhà cung cấp. Ví dụ: phiên bản Chrome mới nhất sẽ mở một Thẻ tuỳ chỉnh của Chrome khi người dùng di chuyển ra khỏi phạm vi ở chế độ độc lập.

Trong hầu hết các trường hợp, không có giải pháp nào cho vấn đề này. Tuy nhiên, bạn có thể áp dụng giải pháp cho một phần nhỏ trải nghiệm được lưu trữ trong miền con (ví dụ: quy trình đăng nhập):

URL https://login.example.com mới có thể mở bên trong iframe toàn màn hình.
Sau khi tác vụ hoàn tất bên trong iframe (ví dụ: quy trình đăng nhập), bạn có thể sử dụng postMessage() để chuyển mọi thông tin kết quả từ iframe về trang mẹ.
Bước cuối cùng, khi trang chính nhận được thông báo, trình nghe có thể bị huỷ đăng ký và iframe cuối cùng bị xoá khỏi DOM.

Kết luận

Chính sách về cùng nguồn gốc áp dụng nhiều quy định hạn chế đối với những trang web được xây dựng dựa trên nhiều nguồn gốc muốn đạt được trải nghiệm PWA nhất quán. Vì lý do đó, để cung cấp trải nghiệm tốt nhất cho người dùng, bạn không nên chia trang web thành nhiều nguồn gốc.

Đối với các trang web hiện có đã được tạo theo cách này, có thể bạn sẽ gặp khó khăn khi làm cho các PWA nhiều nguồn gốc hoạt động đúng cách. Tuy nhiên, chúng tôi đã tìm ra một số giải pháp tiềm năng. Mỗi phương pháp đều có thể đi kèm với sự đánh đổi, vì vậy, hãy tự đánh giá khi quyết định phương pháp tiếp cận nào trên trang web của bạn.

Khi đánh giá một chiến lược dài hạn hoặc thiết kế lại trang web, hãy cân nhắc chuyển đến một nguồn gốc duy nhất, trừ trường hợp có lý do quan trọng để giữ kiến trúc nhiều nguồn gốc.

Cảm ơn họ đã đánh giá và đề xuất về mặt kỹ thuật: Penny Mclachlan, Paul Covell, Dominick Ng, Alberto Medina, Pete LePage, Joe Medley, Cheney Tsai, Martin Schierle và Andre Bandarra.