Nếu bạn là trưởng nhóm kỹ thuật hoặc nhà phân tích tiếp thị kỹ thuật số quan tâm đến việc cung cấp trải nghiệm web hiện đại cho ứng dụng web Trình quản lý trải nghiệm Adobe (AEM) của mình và đang tìm kiếm các lựa chọn để thực hiện việc này, thì bạn đã đến đúng bài viết. Bài này sẽ trình bày về Ứng dụng web tiến bộ (PWA) và những gì bạn cần để tạo PWA trong AEM bằng cách tận dụng thư viện WorkBox thông qua việc định cấu hình mà không cần lập trình.
Tại sao nên chọn PWA?
Ứng dụng web tiến bộ tận dụng những gì web hiện đại có thể làm. Chúng có thể cài đặt trên thiết bị của bạn, tải nhanh chóng và các lượt truy cập tiếp theo sẽ tải ngay lập tức. Họ phản hồi nhanh chóng với thông tin nhập. Các tệp này hoạt động tốt khi có kết nối không đáng tin cậy hoặc khi không có mạng. PWA sử dụng các API hiện đại để cung cấp trải nghiệm hấp dẫn giống như ứng dụng với giao diện người dùng toàn màn hình (không bắt buộc), cập nhật ở chế độ nền và quyền truy cập dữ liệu ngoại tuyến.
Để cải thiện một ứng dụng web thành một Ứng dụng web tiến bộ, bạn cần thêm hai cấu phần phần mềm:
- Tệp kê khai ứng dụng web: tệp cấu hình JSON xác định URL điểm truy cập của ứng dụng, biểu tượng dùng để thể hiện PWA và cấu hình khác mô tả giao diện và hoạt động của ứng dụng.
- Trình chạy dịch vụ: một tập lệnh cung cấp các dịch vụ nền giúp làm phong phú PWA của bạn bằng cách xác định các tài nguyên mà PWA sử dụng và chiến lược để truy cập vào những tài nguyên đó.
Trình chạy dịch vụ là gì?
Về cốt lõi, trình chạy dịch vụ chỉ là một tập lệnh mà trình duyệt chạy độc lập khi bạn tương tác với ứng dụng web của mình. Trình chạy dịch vụ đang hoạt động cung cấp các dịch vụ như lưu vào bộ nhớ đệm thông minh bằng API Bộ nhớ đệm, luôn cập nhật dữ liệu bằng API Đồng bộ hoá nền và tích hợp với thông báo đẩy. Một trình chạy dịch vụ có chiến lược lưu vào bộ nhớ đệm phù hợp sẽ mang lại trải nghiệm người dùng ổn định và đáng tin cậy trong nhiều trường hợp, ngay lập tức trả về các tài nguyên được lưu trước vào bộ nhớ đệm, lưu trữ dữ liệu vào bộ nhớ đệm và cập nhật tài nguyên khi kết nối với web.
Trình chạy dịch vụ có thể khó viết từ đầu. Workbox được thiết kế để đơn giản hơn. Workbox là một tập hợp các thư viện giúp bạn viết và quản lý service worker và lưu vào bộ nhớ đệm bằng Cache Storage API. Khi được sử dụng cùng nhau, Service worker và Cache Storage API sẽ kiểm soát cách yêu cầu các nội dung (HTML, CSS, JS, hình ảnh, v.v.) từ mạng hoặc bộ nhớ đệm, thậm chí cho phép bạn trả về nội dung được lưu vào bộ nhớ đệm khi ngoại tuyến. Với Workbox, bạn có thể nhanh chóng thiết lập và quản lý cả hai, v.v. bằng mã sẵn sàng để sản xuất.
Nâng cấp trang web AEM lên PWA
Trình quản lý trải nghiệm Adobe (AEM) là một giải pháp quản lý nội dung toàn diện để xây dựng trang web, ứng dụng dành cho thiết bị di động, biểu mẫu và bảng hiệu kỹ thuật số. Giúp bạn dễ dàng quản lý nội dung và tài sản tiếp thị.
Mặc dù AEM cung cấp một thư viện phong phú để xây dựng ứng dụng web, nhưng cho đến nay, rất khó để xây dựng PWA bằng cách thêm trình chạy dịch vụ và tệp kê khai.
Adobe Trải nghiệm Sites là một công cụ xây dựng giao diện người dùng thuộc Trình quản lý trải nghiệm Adobe. Khi được sử dụng cùng với Trình quản lý trải nghiệm Adobe dưới dạng dịch vụ đám mây, AEM Sites giúp bạn dễ dàng chuyển đổi mọi trang web hoặc ứng dụng trang đơn hiện có của AEM thành Ứng dụng web tiến bộ có hỗ trợ ngoại tuyến và có thể cài đặt mà chỉ cần định cấu hình và không cần lập trình. Công cụ này sử dụng Workbox để cung cấp các phương pháp hay nhất cho Ứng dụng web tiến bộ và tóm tắt những điểm phức tạp của việc viết tệp kê khai mẫu và trình chạy dịch vụ.
AEM hỗ trợ bản địa hoá nội dung, tức là bạn có thể xây dựng nhiều thương hiệu và thậm chí là nội dung ngoại tuyến riêng cho từng khu vực. Để làm việc này, hãy tạo các cấu hình PWA khác nhau cho từng ngôn ngữ chính.
Bắt đầu định cấu hình PWA trên AEM
Đăng nhập vào Trình quản lý trải nghiệm của Adobe dưới dạng một Dịch vụ đám mây rồi chọn bất kỳ trang web nào của Trình quản lý trải nghiệm của Adobe hoặc các thuộc tính ngôn ngữ chính và lượt nhấp. Bạn sẽ thấy một tab có tên Progressive Web App. (Lưu ý: nếu bạn không thấy tab này, vui lòng liên hệ với Adobe để bật tính năng này). Bạn có thể định cấu hình cài đặt và giao diện của Ứng dụng web tiến bộ chỉ bằng vài cú nhấp chuột.
Nếu bạn đã hoàn thành hướng dẫn về AEM Sites, có thể bạn đã xem trang web của WKND trước đây. Bài viết này dùng bản minh hoạ WKND làm điểm bắt đầu. Khi hoàn tất, bạn sẽ cập nhật WKND từ một ứng dụng web thành PWA bằng WorkBox.
Định cấu hình tệp kê khai
Tệp kê khai ứng dụng web là một tệp JSON chứa các thuộc tính mô tả giao diện và hành vi của một PWA. Các trang web của Trình quản lý trải nghiệm Adobe cung cấp giao diện người dùng thân thiện để định cấu hình các tài sản.
URL bắt đầu là điểm truy cập của PWA của bạn. Khi người dùng nhấn vào biểu tượng PWA trên điện thoại, họ sẽ truy cập được URL khởi động. Chế độ hiển thị sẽ định cấu hình ứng dụng là trải nghiệm cửa sổ hay toàn màn hình. Bạn cũng có thể chỉ định hướng màn hình của ứng dụng. Màu giao diện là màu của cửa sổ và thanh công cụ, còn màu nền là màu của màn hình chờ khi chạy ứng dụng. Biểu tượng là hình ảnh hiển thị trên màn hình chính của thiết bị hoặc ngăn ứng dụng khi ứng dụng được cài đặt trên thiết bị. Cấu hình hiển thị trong hình ảnh sẽ tạo ra tệp kê khai JSON như bên dưới.
{
"name": "WKND Adventures and Travel",
"short_name": "WKND Adventures and Travel",
"start_url": "/content/wknd/us/en.html",
"display": "standalone",
"theme_color": "#FFDC00",
"background_color": "#FF851B",
"orientation": "any",
"icons": [
{
"src": "/content/dam/wknd/pwa-logo.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "any maskable"
}
]
}
URL bắt đầu có thể khác với trang đích mặc định cho miền của bạn. Bằng cách thay đổi tham số start_url, bạn có thể trực tiếp đưa người dùng của mình đến trải nghiệm trong ứng dụng thay vì trang mặc định mà người dùng mới hoặc người dùng không được xác thực sẽ hiển thị. Điều này mang lại cho người dùng PWA có trải nghiệm mượt mà và giống như ứng dụng hơn.
AEM hiểu rằng mỗi ngôn ngữ có thể có một giao diện khác nhau. Bạn có thể định cấu hình thuộc tính, màu sắc và biểu tượng khác nhau cho các khu vực hoặc ngôn ngữ khác nhau, sau đó đồng bộ hóa cấu hình với các trang được liên kết.
Sau khi truy cập vào PWA trên trình duyệt, bạn có thể nhấp chuột phải và kiểm tra để mở Công cụ cho nhà phát triển và xem tệp kê khai trong bảng điều khiển Ứng dụng.
Định cấu hình trình chạy dịch vụ
Bạn có thể định cấu hình nội dung vào bộ nhớ đệm và chiến lược lưu vào bộ nhớ đệm mà bạn muốn sử dụng.
Nếu đang sử dụng trình chạy dịch vụ, bạn có thể quen thuộc với các chiến lược lưu vào bộ nhớ đệm. Chiến lược lưu vào bộ nhớ đệm chỉ định tài nguyên nào cần lưu vào bộ nhớ đệm và tìm các tài nguyên đó trong bộ nhớ đệm trước, mạng trước hay trong bộ nhớ đệm bằng mạng dự phòng. Sau đó bạn có thể chọn các tài nguyên để lưu trước vào bộ nhớ đệm khi trình chạy dịch vụ được cài đặt. Trình chạy dịch vụ ứng dụng AEM triển khai chiến lược bộ nhớ đệm ấm, tức là trải nghiệm của người dùng sẽ không bị gián đoạn ngay cả khi bạn chỉ định đường dẫn bị thiếu hoặc bị hỏng.
Trong AEM, thuật ngữ "clientlibs" dùng để chỉ các Thư viện phía máy khách: sự kết hợp giữa JavaScript, CSS và các tài nguyên tĩnh có liên quan đã được thêm vào dự án của bạn, được phân phát đến và được trình duyệt web của ứng dụng sử dụng. Bạn có thể dễ dàng thiết lập để sử dụng các thư viện phía máy khách của mình khi không có mạng bằng cách chỉ định các thư viện đó trong giao diện người dùng.
Bạn cũng có thể dùng tài nguyên của bên thứ ba, chẳng hạn như phông chữ. Cấu hình bộ nhớ đệm ngoại tuyến này cung cấp thông tin cấu hình cho một trình chạy dịch vụ. Trình chạy này được tạo cho ứng dụng sử dụng nội bộ hộp công việc của bạn. Đó là gần như tất cả những gì cần làm để làm cho ứng dụng của bạn có thể cài đặt. Sau khi cài đặt, biểu tượng ứng dụng sẽ hiển thị trên màn hình chính của thiết bị di động giống như ứng dụng nền tảng. Nhấp vào biểu tượng sẽ truy cập vào trang web wknd.
Xin lưu ý rằng bạn có thể thay đổi nội dung hoặc các chế độ cài đặt này bất cứ lúc nào. Khi bạn xuất bản các thay đổi, trình duyệt sẽ cập nhật trình chạy dịch vụ tại ứng dụng và người dùng sẽ thấy một thông báo cho biết đã có phiên bản PWA mới hơn. Người dùng có thể nhấp vào thông báo đó để tải lại ứng dụng và nhận thông tin cập nhật mới nhất. Bạn có thể mở bảng điều khiển ứng dụng và công cụ dành cho nhà phát triển trình duyệt để xem chi tiết của trình chạy dịch vụ.
Bạn có thể mở rộng bộ nhớ đệm để xem nội dung đã được lưu vào bộ nhớ đệm cục bộ:
Kết quả
Đã đến lúc nhìn nhận kết quả nỗ lực của bạn. Chỉ với cấu hình và không cần lập trình, bạn đã cải thiện trang web AEM của mình thành một Ứng dụng web tiến bộ.
Các công cụ dành cho nhà phát triển Chrome cung cấp tính năng kiểm tra ngọn hải đăng để cho phép bạn kiểm tra mức độ tuân thủ của ứng dụng web và cấu hình của mình với các tiêu chuẩn của Ứng dụng web tiến bộ.
Kết luận
Progressive Web Apps cung cấp trải nghiệm giống như ứng dụng cho trang web của bạn, sử dụng tính đa nền tảng và bản chất mở của web với chi phí phát triển và bảo trì thấp hơn trong khi vẫn kiểm soát được việc phân phối. Điều này giúp tăng mức độ tương tác, tỷ lệ giữ chân và quan trọng nhất là thúc đẩy tỷ lệ chuyển đổi cao hơn. AEM kết hợp với Workbox giúp bạn dễ dàng cải thiện trang web hiện có thành PWA mà chỉ cần định cấu hình và không cần lập trình.
Tài liệu tham khảo
- Hướng dẫn về WKND
- Trình chạy dịch vụ
- API Bộ nhớ đệm
- Tệp kê khai ứng dụng web
- Hỗ trợ biểu tượng thích ứng trong PWA có các biểu tượng có thể che phủ
- Tìm hiểu thêm về các trang web của Trình quản lý trải nghiệm Adobe
- Tìm hiểu thêm về Workbox:
- Chiến lược lưu vào bộ nhớ đệm của hộp công việc:
- Tìm hiểu thêm về Ứng dụng web tiến bộ