Xây dựng nhiều Ứng dụng web tiến bộ trên cùng một miền

Cách tạo nhiều PWA dựa trên cùng một tên miền để giúp người dùng biết rằng các PWA thuộc cùng một tổ chức hoặc dịch vụ.

Chase Phillips

Demián Renzulli

Matt Giuca

Trong bài đăng trên blog về Ứng dụng web tiến bộ trong các trang web nhiều nguồn gốc, Demian đã thảo luận về những thách thức mà trang web được xây dựng trên nhiều nguồn gốc phải đối mặt khi cố gắng xây dựng một Ứng dụng web tiến bộ duy nhất bao gồm tất cả các nguồn gốc đó.

Ví dụ về loại cấu trúc trang web này là một trang web thương mại điện tử, trong đó:

• Trang chủ nằm tại https://www.example.com.
• Các trang danh mục được lưu trữ tại https://category.example.com.
• Trang chi tiết sản phẩm tại https://product.example.com.

Như đã thảo luận trong bài viết này, chính sách cùng nguồn gốc áp dụng một số hạn chế, ngăn chặn việc chia sẻ trình chạy dịch vụ, bộ nhớ đệm và quyền giữa các nguồn gốc. Vì lý do đó, bạn nên tránh loại cấu hình này và cân nhắc việc di chuyển sang một cấu trúc trang web gốc bất cứ khi nào có thể, và đối với những nhà phát triển đã tạo trang web theo cách này.

Trong bài đăng này, chúng ta sẽ xem xét trường hợp ngược lại: thay vì một PWA duy nhất trên nhiều nguồn gốc, chúng tôi sẽ phân tích trường hợp của các công ty muốn cung cấp nhiều PWA, tận dụng cùng một tên miền và giúp người dùng biết rằng các PWA đó thuộc cùng một tổ chức hoặc dịch vụ.

Như bạn có thể đã thấy, chúng tôi đang sử dụng nhiều thuật ngữ nhưng có liên quan đến nhau, chẳng hạn như miền và nguồn gốc. Trước khi tiếp tục, hãy cùng xem xét các khái niệm này.

Điều khoản kỹ thuật

• Miền: Bất kỳ chuỗi nhãn nào được xác định trong Hệ thống tên miền (DNS). Ví dụ: com và example.com là các miền.
• Tên máy chủ: Một mục DNS phân giải thành ít nhất một địa chỉ IP. Ví dụ: www.example.com sẽ là tên máy chủ, example.com có thể là tên máy chủ nếu có địa chỉ IP và com sẽ không bao giờ phân giải thành địa chỉ IP nên không thể là tên máy chủ.
• Nguồn gốc:Sự kết hợp giữa lược đồ, tên máy chủ và cổng (không bắt buộc). Ví dụ: https://www.example.com:443 là một nguồn gốc.

Như tên gọi của nó, chính sách cùng nguồn gốc áp dụng các hạn chế về nguồn gốc, vì vậy chúng tôi chủ yếu đề cập đến thuật ngữ này trong suốt bài viết. Tuy nhiên, thỉnh thoảng chúng tôi vẫn sẽ sử dụng "miền" hoặc "miền con" để mô tả kỹ thuật đang được sử dụng nhằm tạo ra các "nguồn gốc" khác nhau.

Trường hợp có nhiều PWA liên quan

Trong một số trường hợp, bạn có thể muốn tạo các ứng dụng độc lập, nhưng vẫn xác định rằng các ứng dụng đó thuộc cùng một tổ chức hoặc "thương hiệu". Việc sử dụng lại cùng một tên miền là một cách hay để thiết lập mối quan hệ đó. Ví dụ:

• Một trang web thương mại điện tử muốn tạo ra một trải nghiệm độc lập để cho phép người bán quản lý kho hàng của họ, đồng thời đảm bảo rằng họ hiểu rằng trải nghiệm đó thuộc về trang web chính nơi người dùng mua sản phẩm.
• Một trang web tin tức thể thao muốn tạo một ứng dụng cụ thể cho một sự kiện thể thao lớn, cho phép người dùng nhận số liệu thống kê về các cuộc thi mà họ yêu thích qua thông báo và cài đặt ứng dụng đó dưới dạng Ứng dụng web tiến bộ, đồng thời đảm bảo người dùng nhận ra đó là một ứng dụng do công ty tin tức xây dựng.
• Một công ty muốn xây dựng các ứng dụng trò chuyện, thư và lịch riêng biệt và muốn chúng hoạt động như các ứng dụng riêng lẻ, gắn với tên của công ty.

Sử dụng nguồn gốc riêng biệt

Trong những trường hợp như vậy, phương pháp đề xuất là dành cho từng ứng dụng riêng biệt về mặt khái niệm đang phát trực tiếp trên nguồn gốc riêng.

Nếu muốn sử dụng cùng một tên miền trong tất cả các miền đó, bạn có thể thực hiện bằng cách sử dụng miền con. Ví dụ: một công ty cung cấp nhiều ứng dụng hoặc dịch vụ Internet có thể lưu trữ ứng dụng thư tại https://mail.example.com và ứng dụng lịch tại https://calendar.example.com, đồng thời cung cấp dịch vụ chính của doanh nghiệp của họ tại https://www.example.com. Một ví dụ khác là trang web thể thao muốn tạo một ứng dụng độc lập dành riêng cho một sự kiện thể thao quan trọng, chẳng hạn như giải vô địch bóng đá tại https://footballcup.example.com. Người dùng có thể cài đặt và sử dụng độc lập với trang web thể thao chính, được lưu trữ tại https://www.example.com. Phương pháp này cũng có thể hữu ích cho các nền tảng cho phép khách hàng tạo các ứng dụng độc lập mang thương hiệu của công ty. Ví dụ: một ứng dụng cho phép người bán tạo PWA của riêng họ tại https://merchant1.example.com, https://merchant2.example.com, v.v.

Việc sử dụng nguồn gốc khác nhau giúp đảm bảo sự tách biệt giữa các ứng dụng, nghĩa là mỗi ứng dụng có thể quản lý các tính năng riêng của trình duyệt một cách độc lập, bao gồm:

• Khả năng cài đặt: Mỗi ứng dụng đều có Tệp kê khai riêng và cung cấp trải nghiệm có thể cài đặt riêng.
• Bộ nhớ: Mỗi ứng dụng có bộ nhớ đệm riêng, bộ nhớ cục bộ và về cơ bản là mọi hình thức lưu trữ cục bộ trên thiết bị mà không cần chia sẻ với ứng dụng khác.
• Service Worker: Mỗi ứng dụng có trình chạy dịch vụ riêng cho các phạm vi đã đăng ký.
• Quyền: Các quyền cũng được xác định theo nguồn gốc. Nhờ đó, người dùng sẽ biết chính xác dịch vụ nào họ đang cấp quyền và các tính năng như thông báo sẽ được phân bổ đúng cách cho từng ứng dụng.

Bạn nên tạo mức độ tách biệt như vậy trong trường hợp sử dụng nhiều PWA độc lập. Vì vậy, bạn nên sử dụng phương pháp này.

Nếu các ứng dụng trên miền con muốn chia sẻ dữ liệu cục bộ với nhau, thì các ứng dụng đó vẫn có thể thực hiện việc này thông qua cookie. Hoặc đối với các trường hợp nâng cao hơn, các ứng dụng có thể cân nhắc việc đồng bộ hoá bộ nhớ thông qua máy chủ.

Sử dụng cùng một điểm gốc

Phương pháp thứ hai là xây dựng nhiều PWA khác nhau trên cùng một nguồn gốc. Điều này bao gồm các trường hợp sau:

Đường dẫn không chồng chéo

Nhiều PWA hoặc "ứng dụng web" theo khái niệm, được lưu trữ trên cùng một nguồn gốc và với đường dẫn không chồng chéo. Ví dụ:

• https://example.com/app1/
• https://example.com/app2/

Đường dẫn chồng chéo/lồng nhau

Nhiều ứng dụng web tiến bộ (PWA) trên cùng một nguồn gốc, một trong hai phạm vi có phạm vi được lồng vào nhau:

• https://example.com/ ("ứng dụng bên ngoài")
• https://example.com/app/ ("ứng dụng bên trong")

API trình chạy dịch vụ và định dạng tệp kê khai cho phép bạn thực hiện một trong hai việc trên bằng cách sử dụng phạm vi cấp đường dẫn. Tuy nhiên, trong cả hai trường hợp, việc sử dụng cùng một nguồn gốc gây ra nhiều vấn đề và hạn chế. Nguyên nhân gốc rễ phát sinh từ thực tế là trình duyệt sẽ không hoàn toàn coi những "ứng dụng" này là "ứng dụng" riêng biệt. Do đó, phương pháp này không được khuyến khích.

Trong phần tiếp theo, chúng tôi sẽ phân tích chi tiết hơn về những thách thức này và những việc có thể làm nếu không thể sử dụng các nguồn gốc riêng biệt.

Những thách thức đối với nhiều PWA cùng nguồn gốc

Dưới đây là một số vấn đề thực tế phổ biến cho cả hai phương pháp cùng nguồn gốc:

• Bộ nhớ: Cookie, bộ nhớ cục bộ và tất cả các hình thức lưu trữ cục bộ trên thiết bị được dùng chung giữa các ứng dụng. Vì lý do đó, nếu người dùng quyết định xoá dữ liệu cục bộ cho một ứng dụng, thì tất cả dữ liệu gốc sẽ bị xoá; không có cách nào để thực hiện việc này đối với một ứng dụng duy nhất. Xin lưu ý rằng Chrome và một số trình duyệt khác sẽ chủ động nhắc người dùng xoá dữ liệu cục bộ khi gỡ cài đặt một trong các ứng dụng và điều này cũng sẽ ảnh hưởng đến dữ liệu của các ứng dụng khác trên nguồn gốc. Một vấn đề khác là các ứng dụng cũng sẽ phải chia sẻ hạn mức bộ nhớ. Điều này có nghĩa là nếu một trong hai ứng dụng đó chiếm quá nhiều dung lượng, thì ứng dụng còn lại sẽ bị ảnh hưởng tiêu cực.
• Quyền: Các quyền gắn liền với nguồn gốc. Điều đó có nghĩa là nếu người dùng cấp quyền cho một ứng dụng, thì quyền đó sẽ được áp dụng đồng thời cho tất cả ứng dụng trên nguồn gốc đó. Điều đó nghe có vẻ tốt (không phải xin cấp quyền nhiều lần), nhưng hãy nhớ: nếu người dùng chặn quyền đối với một ứng dụng, thì điều đó sẽ ngăn các ứng dụng khác yêu cầu quyền đó hoặc sử dụng tính năng đó.
• Cài đặt người dùng: Các chế độ cài đặt cũng được thiết lập theo nguồn gốc. Ví dụ: nếu 2 ứng dụng có kích thước phông chữ khác nhau và người dùng chỉ muốn điều chỉnh mức thu phóng của một trong số các ứng dụng đó để bù cho kích thước phông chữ, thì họ sẽ không thể thực hiện nếu không áp dụng chế độ cài đặt này cho các ứng dụng khác.

Những thách thức này gây khó khăn cho việc khuyến khích phương pháp tiếp cận này. Tuy nhiên, nếu không thể sử dụng một nguồn gốc riêng biệt (ví dụ: miền con), như đã thảo luận trong phần Sử dụng nguồn gốc riêng biệt, từ hai lựa chọn có cùng nguồn gốc mà chúng tôi đã trình bày, bạn nên sử dụng đường dẫn không trùng lặp thay vì đường dẫn chồng chéo/lồng nhau.

Như đã đề cập, những thách thức được thảo luận trong phần này là phổ biến đối với cả hai phương pháp tiếp cận cùng nguồn gốc. Trong phần tiếp theo, chúng ta sẽ đi sâu hơn vào chi tiết về lý do tại sao việc sử dụng đường dẫn chồng chéo/lồng nhau là chiến lược ít được đề xuất nhất.

Những thách thức khác đối với các đường dẫn chồng chéo/lồng nhau

Vấn đề khác với phương pháp tiếp cận đường dẫn chồng chéo/lồng ghép (trong đó https://example.com/ là ứng dụng bên ngoài và https://example.com/app/ là ứng dụng bên trong), đó là tất cả URL trong ứng dụng bên trong sẽ thực sự được coi là một phần của cả ứng dụng bên ngoài và ứng dụng bên trong.

Trong thực tế, những vấn đề sau sẽ xảy ra:

• Khuyến mãi cài đặt: Nếu người dùng truy cập vào ứng dụng bên trong (ví dụ: trong trình duyệt web), thì khi ứng dụng bên ngoài đã được cài đặt trong thiết bị của người dùng, trình duyệt sẽ không hiển thị các biểu ngữ quảng cáo cài đặt và sự kiệnBeforeInstallPrompt sẽ không được kích hoạt. Lý do là trình duyệt sẽ kiểm tra xem trang hiện tại có thuộc về một ứng dụng đã được cài đặt hay không. Cách giải quyết cho vấn đề này là cài đặt ứng dụng bên trong theo cách thủ công (thông qua tuỳ chọn trình duyệt "Tạo lối tắt") hoặc cài đặt ứng dụng bên trong trước, trước ứng dụng bên ngoài.
• Thông báo và API Huy hiệu: Nếu ứng dụng bên ngoài được cài đặt nhưng ứng dụng bên trong không được cài đặt, thì thông báo và huy hiệu đến từ ứng dụng bên trong sẽ được phân bổ không chính xác cho ứng dụng bên ngoài (đây là phạm vi bao quanh gần nhất của ứng dụng đã cài đặt). Tính năng này hoạt động đúng cách trong trường hợp cả hai ứng dụng được cài đặt trên thiết bị của người dùng.
• Ghi lại đường liên kết: Ứng dụng bên ngoài có thể chụp các URL thuộc về ứng dụng bên trong. Điều này đặc biệt có thể xảy ra nếu ứng dụng bên ngoài được cài đặt nhưng ứng dụng bên trong thì không. Tương tự, các đường liên kết bên trong ứng dụng bên ngoài liên kết đến ứng dụng bên trong sẽ không liên kết ảnh chụp với ứng dụng bên trong, vì chúng được coi là nằm trong phạm vi của ứng dụng bên ngoài. Ngoài ra, trên ChromeOS và Android, nếu những ứng dụng này được thêm vào Cửa hàng Play (dưới dạng Hoạt động đáng tin cậy trên web), thì ứng dụng bên ngoài sẽ thu thập mọi đường liên kết. Ngay cả khi ứng dụng bên trong đã được cài đặt, hệ điều hành vẫn sẽ cung cấp cho người dùng lựa chọn mở các ứng dụng đó trong ứng dụng bên ngoài.

Kết luận

Trong bài viết này, chúng tôi đã tìm hiểu những cách để nhà phát triển có thể xây dựng nhiều Ứng dụng web tiến bộ liên quan với nhau trong cùng một miền.

Tóm lại, bạn nên sử dụng một nguồn gốc khác (ví dụ: sử dụng miền con) để lưu trữ các PWA độc lập. Việc lưu trữ chúng trong cùng một nguồn gốc đặt ra nhiều thách thức, chủ yếu là do trình duyệt sẽ không coi những ứng dụng này là các ứng dụng riêng biệt một cách hoàn toàn.

• Các nguồn gốc riêng biệt: Được đề xuất
• Cùng nguồn gốc, đường dẫn không chồng chéo: Không nên dùng
• Cùng nguồn gốc, đường dẫn chồng chéo/lồng nhau: Hoàn toàn không nên sử dụng

Nếu không thể sử dụng các nguồn gốc khác nhau, hãy sử dụng các đường dẫn không chồng chéo (ví dụ: https://example.com/app1/ và https://example.com/app2/, bạn nên sử dụng các đường dẫn chồng chéo hoặc lồng nhau, chẳng hạn như https://example.com/ (đối với ứng dụng bên ngoài) và https://example.com/app/ (cho ứng dụng bên trong).

Tài nguyên bổ sung

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

Xin chân thành cảm ơn các bài đánh giá và đề xuất kỹ thuật của họ: Joe Medley, Dominick Ng, Alan Cutter, Daniel Murphy, Penny McLachlan, Thomas Steiner và Darwin Huang

Ảnh chụp của Tim Mosshold trên Unsplash