Progressive Web App Là Gì? Khác Gì Website Thông Thường

Nhiều Người Nhắc Đến PWA Nhưng Chưa Phân Biệt Rõ Với Website Thường

Cách đây không lâu có anh khách gọi điện hỏi bên mình: web app với Progressive Web App có phải cùng một thứ không? Câu hỏi nghe đơn giản nhưng giải thích cho vừa đủ, không thừa không thiếu, lại mất khá nhiều thời gian. Progressive Web App, viết tắt là PWA, là kiểu website được xây để chạy mượt gần như ứng dụng cài trên điện thoại. Dù vậy, bản chất nó vẫn mở qua trình duyệt như bình thường. Nhiều người nghe cụm từ này vài năm gần đây nhưng ít khi phân biệt rạch ròi nó khác gì một website bình thường.

Ở bên mình, chuyện nhầm lẫn này xảy ra thường xuyên nhất lúc khách hàng đang chọn giải pháp cho dự án mới. Có người tưởng PWA là loại app phải nộp lên App Store mới dùng được. Có người lại nghĩ chỉ cần thêm vài dòng code là website cũ biến thành PWA ngay lập tức. Cả hai cách hiểu đều lệch khá xa thực tế. Nếu không gỡ sớm, sự nhầm lẫn này dễ khiến doanh nghiệp chọn sai hướng đầu tư ngay từ đầu. Hệ quả là tốn công làm lại sau này.

Progressive Web App Khác Website Thông Thường Ở Chỗ Nào

Cách Hai Kiểu Trang Hoạt Động Không Giống Nhau

Website thông thường chỉ chạy được khi trình duyệt mở và có kết nối mạng. Đóng trình duyệt là đóng luôn trải nghiệm, mất mạng là trang trắng xoá. Progressive Web App được thiết kế để vượt qua giới hạn đó. Nó vẫn nằm trên nền web, vẫn gõ địa chỉ hoặc bấm link để vào. Nhưng nó có thêm một lớp công nghệ, giúp hoạt động gần giống ứng dụng di động thật sự.

Điểm dễ nhận ra nhất là khả năng cài lên màn hình chính. Trình duyệt sẽ hỏi bạn có muốn thêm vào màn hình chính không, giống hệt lúc tải app từ store. Cài xong, biểu tượng nằm ngay trên điện thoại, mở lên không còn thấy thanh địa chỉ trình duyệt nữa. Trải nghiệm liền mạch hơn hẳn so với việc mở trình duyệt, gõ tên miền, rồi chờ trang load lại từ đầu mỗi lần.

Bộ Ba Đứng Sau Một PWA: Manifest, Service Worker Và HTTPS

Để làm được điều trên, một PWA cần ba thành phần kỹ thuật cơ bản. Manifest là file khai báo tên app, biểu tượng, màu giao diện — thứ giúp trình duyệt biết cách hiển thị khi bạn cài đặt. Service worker là đoạn script chạy nền, đứng giữa trình duyệt và mạng internet. Nó có nhiệm vụ lưu tạm dữ liệu, để trang vẫn mở được cả khi mạng chập chờn. HTTPS là điều kiện bắt buộc, vì service worker chỉ hoạt động trên kết nối đã mã hoá, không chạy trên HTTP thường.

Việc dựng service worker để xử lý dữ liệu offline không khác nhiều, theo kinh nghiệm tụi mình. Nó giống bài toán kiến trúc ứng dụng web xử lý dữ liệu nội bộ. Đội ngũ từng làm việc này cho vài khách hàng ngành dịch vụ. Cùng là chuyện quyết định phần nào chạy trên máy người dùng, phần nào phải gọi về server. Chỉ khác nhau ở quy mô và mục đích sử dụng.

Một lỗi bên mình hay gặp khi review dự án cũ: đội làm web chỉ thêm file manifest rồi nghĩ vậy là xong PWA. Họ quên mất service worker, nên trang vẫn trắng xoá khi mất mạng. Tuỳ độ phức tạp của website gốc, bọc thêm đúng cả lớp PWA thường mất thêm khoảng một đến hai tuần làm việc. Đó là chưa tính thời gian kiểm thử trên nhiều dòng máy khác nhau. Đây là con số đúc kết từ vài dự án thực tế, không phải quy tắc cố định cho mọi trường hợp.

Tốc Độ Tải Và Trải Nghiệm Là Chỗ PWA Ăn Điểm

Trang Hiện Ra Gần Như Tức Thì Ở Lần Quay Lại

Nói về lý do doanh nghiệp bắt đầu để ý tới PWA, phần lớn xuất phát từ một nỗi đau quen thuộc. Khách rời trang vì chờ load quá lâu. Service worker lưu sẵn phần khung giao diện và một số dữ liệu ngay trên máy người dùng. Lần truy cập sau, trang hiện ra gần như tức thì, vì trình duyệt không phải tải lại mọi thứ từ đầu.

Chuyện tối ưu tốc độ vốn là bài toán bên mình xử lý thường xuyên, kể cả với website không phải PWA. Có lần tụi mình chia sẻ khá kỹ trong bài tối ưu tốc độ tải trang cho website doanh nghiệp. Nhưng PWA có lợi thế sẵn ở tầng kiến trúc, nên phần việc tối ưu thường nhẹ nhàng hơn ngay từ vạch xuất phát.

Vẫn Mở Được Trang Dù Sóng Yếu, Giữ Khách Ở Lại Lâu Hơn

Một điểm cộng khác là khả năng hoạt động khi mạng yếu hoặc mất hẳn. Với khách ở khu vực sóng chập chờn, hoặc đang di chuyển trên xe, trang vẫn mở ra được. Đó là nhờ dữ liệu đã lưu cache từ trước. Dù vậy, vài chức năng cần mạng thật sẽ tạm ngưng. PWA còn gửi được thông báo đẩy, giống ứng dụng thật. Nhờ vậy người dùng nhớ quay lại, thay vì quên mất website từng ghé.

Với các website đang bán hàng trực tuyến, đây là lý do khiến nhiều chủ shop cân nhắc chuyển hướng. Giỏ hàng load nhanh, khách bớt bỏ ngang lúc thanh toán. Nếu bạn đang tìm đơn vị thiết kế website bán hàng để làm lại nền tảng theo hướng này, nên hỏi kỹ ngay từ đầu. Có tích hợp PWA hay không cũng nên bàn từ lúc đó. Thêm PWA sau khi website đã hoàn thiện thường tốn công hơn làm ngay từ lúc dựng nền.

Có lần bên mình tư vấn cho một khách bán đồ handmade online. Khách hàng của họ chủ yếu đặt hàng lại nhiều lần trong tháng, phần lớn qua điện thoại. Sau khi chuyển sang PWA, tốc độ mở giỏ hàng nhanh hơn rõ rệt ở lần quay lại. Đơn hàng lặp cũng tăng, dù bên mình không dám nói con số chính xác. Nó còn phụ thuộc nhiều yếu tố khác, như mùa vụ và chương trình khuyến mãi.

Vài Giới Hạn Bạn Nên Biết Trước Khi Chọn PWA

PWA không phải phép màu áp dụng được cho mọi trường hợp. Trên iPhone, trình duyệt Safari từng hỗ trợ khá hạn chế các tính năng như thông báo đẩy hay dung lượng cache. Dù vậy, mọi thứ đã cải thiện nhiều qua các bản cập nhật gần đây. Vài nghiệp vụ cần truy cập sâu vào phần cứng máy, như cảm biến vân tay nâng cao hay Bluetooth phức tạp. Những trường hợp này vẫn làm tốt hơn ở app gốc cài từ store.

Bên mình thường khuyên khách hàng nhìn vào hành vi người dùng thật trước khi quyết định. Khách chủ yếu vào từ máy tính để tra cứu thông tin thì PWA không tạo khác biệt lớn. Nhưng nếu phần đông khách vào từ điện thoại, hay quay lại nhiều lần trong tuần, khoản đầu tư này thường đáng công.

Chọn Hướng Nào Cho Website Sắp Tới Của Bạn

Nếu doanh nghiệp của bạn có bộ phận chăm sóc khách hàng làm việc trực tiếp qua website, đây là điểm đáng chú ý. Khả năng gửi thông báo đẩy của PWA mở thêm một kênh giữ liên lạc, mà website thường không có sẵn. Cách tận dụng kênh này sao cho hiệu quả không phải chuyện đơn giản. Tụi mình có bàn khá kỹ trong bài ứng dụng AI trong chăm sóc khách hàng trên website, bạn đọc thêm nếu quan tâm.

Mỗi doanh nghiệp có một điểm cân bằng riêng giữa hai lựa chọn này. Website thông thường vẫn đủ dùng nếu mục tiêu chỉ là giới thiệu thông tin, ít người quay lại nhiều lần trong tuần. PWA đáng đầu tư hơn khi trải nghiệm lặp lại, tốc độ tải và khả năng giữ chân khách quyết định doanh thu. Lời khuyên của bên mình khá đơn giản: trước khi chốt công nghệ, hãy nhìn vào cách khách hàng thật đang dùng website của bạn. Rồi mới chọn hướng phù hợp với hành vi đó. Đừng chạy theo xu hướng chỉ vì thấy đối thủ đang làm.