Nếu bạn là trưởng 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 để làm như vậy, thì bạn đang tìm hiểu bài viết phù hợp. Bài viết này sẽ cho biết Ứng dụng web tiến bộ (PWA) là gì và những gì bạn cần để tạo PWA trong AEM tận dụng thư viện WorkBox thông qua cấu hình mà không cần lập trình.
Tại sao lại là PWA?
Ứng dụng web tiến bộ tận dụng những gì web hiện đại có thể làm. Bạn có thể cài đặt tiện ích đó trên thiết bị của mình, tải nhanh chóng và các lượt truy cập tiếp theo sẽ tải ngay lập tức. Trẻ phản hồi nhanh với thông tin đầu vào. Chúng hoạt động tốt trên kết nối không đáng tin cậy hoặc khi không có kết nối mạng. PWA sử dụng các API hiện đại để mang lại trải nghiệm hấp dẫn 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), tính năng cập nhật ở chế độ nền và quyền truy cập vào dữ liệu khi không có mạng.
Để cải thiện một ứng dụng web thành một Ứng dụng web tiến bộ, bạn phải thêm 2 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 để đại diện cho PWA và cấu hình khác mô tả giao diện cũng như 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 PWA của bạn phong phú bằng cách xác định các tài nguyên mà PWA sử dụng và các chiến lược để truy cập vào các tài nguyên đó.
Service worker là gì?
Về bản chất, service worker chỉ là một tập lệnh mà trình duyệt của bạn chạy một cách độc lập khi bạn tương tác với ứng dụng web của mình. Một trình chạy dịch vụ đang hoạt động sẽ 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, đảm bảo dữ liệu luôn được cập nhật bằng API Đồng bộ hoá trong nền và tích hợp với thông báo đẩy. 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 cho nhiều tình huống, trả về tài nguyên được lưu trước trong bộ nhớ đệm ngay lập tức, lưu trữ dữ liệu trong bộ nhớ đệm và cập nhật tài nguyên khi kết nối với web.
Service worker có thể khó viết từ đầu. Workbox được tạo ra để hỗ trợ dễ dàng 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 cũng như 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 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à nhiều việc khác nhờ có mã sẵn sàng cho việc phát hành công khai.
Nâng cấp trang web AEM lên PWA
Trình quản lý trải nghiệm của Adobe (AEM) là một giải pháp quản lý nội dung toàn diện để tạo trang web, ứng dụng di động, biểu mẫu và bảng hiệu kỹ thuật số. Công cụ này giúp bạn dễ dàng quản lý nội dung và tài sản tiếp thị của mình.
Mặc dù AEM cung cấp một thư viện phong phú để xây dựng các ứng dụng web, nhưng cho đến nay, việc xây dựng một PWA bằng cách thêm một trình chạy dịch vụ và tệp kê khai vẫn rất khó khăn.
Trang web Trình quản lý trải nghiệm của Adobe là công cụ xây dựng giao diện người dùng nằm trong Trình quản lý trải nghiệm của 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 ứng dụng trang đơn hoặc trang web AEM hiện có thành Ứng dụng web tiến bộ hỗ trợ chế độ ngoại tuyến có thể cài đặt mà chỉ cần định cấu hình và không cần lập trình. Dịch vụ 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ộ, đồng thời tóm tắt những điểm phức tạp của việc viết tệp kê khai nguyên 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ể sử dụng các thành phần xây dựng thương hiệu khác nhau và thậm chí là nội dung ngoại tuyến riêng cho từng ngôn ngữ. Để thực hiện 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 một trang Trang web 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à nhấp vào bất kỳ. Bạn sẽ thấy một thẻ có tên Progressive Web App. (Lưu ý: nếu bạn không thấy thẻ 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 cũng như giao diện của Ứng dụng web tiến bộ chỉ bằng vài cú nhấp chuột.
Nếu đã hoàn thành các 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 sử 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 PWA. Trang web Trình quản lý trải nghiệm của Adobe cung cấp giao diện người dùng thân thiện để định cấu hình các thuộc tính.
URL bắt đầu là điểm truy cập của PWA. 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 vào URL khởi động. Chế độ hiển thị định cấu hình xem ứ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 xuất hiện trên màn hình chính hoặc ngăn ứng dụng của thiết bị khi ứng dụng được cài đặt trên thiết bị. Cấu hình trong hình ảnh sẽ tạo tệp kê khai JSON như dưới đây.
{
"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ể đưa người dùng của mình trực tiếp đến trải nghiệm ứng dụng thay vì đến trang mặc định mà người dùng mới hoặc chưa được xác thực sẽ hiển thị. Việc này mang lại cho người dùng PWA trải nghiệm mượt mà hơn, giống như ứng dụng hơn.
AEM hiểu rằng mỗi ngôn ngữ có thể có giao diện khác nhau. Bạn có thể định cấu hình các thuộc tính, màu sắc và biểu tượng cho nhiều khu vực hoặc ngôn ngữ, sau đó đồng bộ hoá cấu hình này 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 để hiển thị 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 để lưu vào bộ nhớ đệm và chiến lược lưu vào bộ nhớ đệm sẽ sử dụng.
Nếu đang sử dụng trình chạy dịch vụ, thì bạn có thể đã quen thuộc với chiến lược lưu vào bộ nhớ đệm. Chiến lược lưu vào bộ nhớ đệm chỉ định những tài nguyên cần lưu vào bộ nhớ đệm và liệu có nên tìm các tài nguyên đó trong bộ nhớ đệm trước, trên mạng trước hay trong bộ nhớ đệm có kết nối dự phòng qua mạng. Sau đó, bạn có thể chọn 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, nghĩa 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 một đường dẫn bị thiếu hoặc bị hỏng.
Trong AEM, thuật ngữ "clientlibs" đề cập đến Thư viện phía máy khách: sự kết hợp giữa JavaScript, CSS và tài nguyên tĩnh có liên quan đã được thêm vào dự án của bạn và được trình duyệt web của ứng dụng sử dụng cũng như được sử dụng. Bạn có thể dễ dàng thiết lập chế độ sử dụng thư viện phía máy khách 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ể thêm tài nguyên của bên thứ ba 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 trình chạy dịch vụ. Trình chạy dịch vụ này được tạo cho ứng dụng sử dụng hộp làm việc nội bộ của bạn. Đó là gần như tất cả những gì cần làm để giúp ứ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 của bạn giống như một ứng dụng nền tảng. Nhấp vào biểu tượng này 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 bản 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ụ cho nhà phát triển của trình duyệt để xem chi tiết về 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 xem 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 tiến trang web AEM của mình thành một Ứng dụng web tiến bộ.
Công cụ 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 bạn 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 đ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 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à tăng tỷ lệ chuyển đổi. AEM kết hợp với Workbox giúp bạn dễ dàng cải tiến trang web hiện có của mình 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ó biểu tượng có thể che khuất
- Tìm hiểu thêm về các trang web Trình quản lý trải nghiệm của 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ộ