Làm PWA, web chạy như app không cần lên chợ ứng dụng

PWA là gì và khác app cài đặt ở đâu

PWA (progressive web app, tạm hiểu là ứng dụng web nâng cao) thực chất là một web được làm để chạy giống app. Khách vào web trên điện thoại rồi bấm thêm vào màn hình chính, từ đó nó có biểu tượng riêng và mở lên như một app, chạy được cả khi mạng chập chờn và gửi được thông báo đẩy trên nhiều máy.

App cài đặt luôn phải qua hai chợ ứng dụng lớn trước khi tới tay khách; PWA thì bỏ hẳn bước đó, đến thẳng từ đường link nên khách không phải mất công tìm và tải. Bạn cũng không phải qua khâu duyệt của hai chợ, cập nhật là khách có bản mới ngay, và chỉ cần làm một bản chạy trên cả điện thoại lẫn máy tính. Nhiều chủ web hỏi Web22 đúng câu này: web của tôi có làm PWA được không, hay phải xây từ đầu? Phần lớn trường hợp câu trả lời là được, vì PWA vốn xây trên nền web bạn đang có sẵn.

Đổi lại, PWA không chạm sâu được vào mọi tính năng của điện thoại như app cài đặt. Một app đo bước chân bằng cảm biến, quét vân tay để mở khoá, hay xử lý ảnh nặng ngay trên máy vẫn cần app native (viết riêng cho từng hệ điều hành). Với những nhu cầu đó, PWA không phải hướng đi, và Web22 nói thẳng điều này ngay từ buổi tư vấn thay vì nhận làm rồi mới báo không được.

Ưu và nhược điểm PWA so với app cài đặt

Cả hai hướng đều có chỗ đứng riêng. So sánh cụ thể sẽ giúp bạn thấy PWA hợp ở đâu và app cài đặt vẫn cần thiết ở đâu, thay vì chọn theo cảm tính.

PWA làm tốt điều gì

• Không phải qua chợ ứng dụng. Khách bấm link là dùng được ngay, không mất công tìm trên App Store hay Google Play rồi tải về vài chục MB trước khi mở lần đầu.
• Một bản chạy mọi máy. Cùng một mã nguồn chạy trên iPhone, Android và cả máy tính, thay vì Web22 phải dựng hai bản riêng cho hai hệ điều hành.
• Cập nhật tức thì. Sửa một lỗi hay đổi giao diện là khách thấy ngay lần mở tiếp theo, không phải chờ Apple duyệt bản mới rồi khách mới tự cập nhật.
• Không tốn phí tài khoản chợ. Apple thu phí tài khoản nhà phát triển theo năm, Google thu một lần. PWA không dính khoản này.
• Google đọc được nội dung. Vì PWA vẫn là một trang web, Google index và xếp hạng được như web bình thường. App cài đặt thì nội dung bên trong Google không đọc tới.

App cài đặt vẫn thắng ở đâu

• Chạm sâu phần cứng. Cảm biến vân tay, định vị GPS chạy nền liên tục, quét mã bằng camera xử lý tại chỗ, những việc này app native làm mượt và ổn định hơn PWA.
• Thông báo đẩy trên iPhone còn giới hạn. PWA gửi thông báo đẩy được trên Android khá tốt, nhưng trên iOS mới hỗ trợ gần đây và còn vài ràng buộc tuỳ phiên bản hệ điều hành. App native không vướng giới hạn này.
• Offline sâu và xử lý nặng. App cần chạy hoàn toàn không mạng trong thời gian dài, hoặc xử lý dữ liệu nặng ngay trên máy, vẫn hợp với app native hơn.
• Có mặt trên chợ ứng dụng như một tín hiệu uy tín. Một số ngành, khách có thói quen tìm app trên App Store trước khi tin tưởng, lúc đó việc hiện diện ở chợ ứng dụng tự nó có giá trị.

Nói ngắn gọn: PWA không phải bản rẻ tiền của app cài đặt, mà là một hướng khác, hợp với nhóm bài toán khác. Web22 làm cả hai nên tư vấn theo đúng việc bạn cần, không cố lái về phía nào để dễ chốt đơn.

Khi nào nên chọn PWA

PWA hợp khi bạn muốn có trải nghiệm giống app mà không muốn gánh chi phí và rào cản của app cài đặt. Vài trường hợp PWA là lựa chọn khôn ngoan:

• Ngân sách gọn: làm một bản chạy mọi máy rẻ hơn làm app riêng cho từng nền tảng, lại không phát sinh phí tài khoản chợ ứng dụng.
• Muốn khách dùng ngay: khách vào từ link là dùng được, không phải thuyết phục họ vào chợ tải app rồi chờ cài xong mới thấy sản phẩm.
• Cập nhật thường xuyên: đổi nội dung hay tính năng là khách thấy ngay, không chờ chợ duyệt lại từng lần.
• Không cần chạm sâu phần cứng: nếu app chủ yếu là xem, đặt, tra cứu, đặt lịch, quản lý đơn hàng, PWA thừa sức đáp ứng.
• Cần Google tìm thấy: quán ăn, spa, cửa hàng muốn khách gõ tìm trên Google ra ngay trang đặt lịch của mình, việc này app cài đặt không làm được vì Google không đọc nội dung trong app.

Một ví dụ hay gặp: một tiệm giặt ủi muốn khách quen đặt lịch nhận đồ mà không cần khách tải app. Web22 làm một PWA cho phép khách bấm “thêm vào màn hình chính” ngay lần đầu ghé web, lần sau khách mở như mở app, đặt lịch trong vài giây, chủ tiệm không phải trả phí duy trì tài khoản trên hai chợ ứng dụng.

Ngược lại, dự án đòi hỏi khai thác sâu phần cứng máy, hoặc bạn muốn xuất hiện trên hai chợ lớn như một cách gây dựng uy tín, thì nên đi hướng app cài đặt đa nền tảng. Web22 trình bày kỹ hơn cả mảng này ở trang dịch vụ lập trình app di động. Còn nếu mục tiêu chính là bán hàng và bạn còn phân vân giữa PWA với một app riêng để quản lý đơn, tham khảo thêm app bán hàng để so hai hướng theo đúng nhu cầu kinh doanh.

Những tính năng PWA làm được

PWA không phải chỉ là “web mở lên trông giống app”. Có ba nhóm tính năng cụ thể khiến nó dùng thật được như một app, và mức độ mỗi tính năng còn tuỳ thiết bị khách dùng.

Cài lên màn hình chính

Khách mở web trên trình duyệt, thấy gợi ý hoặc tự bấm “thêm vào màn hình chính”, từ đó có một biểu tượng riêng giống hệt app thật. Mở lên là chạy toàn màn hình, không còn thanh địa chỉ trình duyệt, cảm giác dùng gần như một app cài đặt.

Chạy được khi mạng yếu hoặc mất mạng

PWA giữ sẵn một phần nội dung và giao diện trên máy khách (kỹ thuật gọi là service worker, phần chạy nền lưu tạm dữ liệu), nên khi mạng chập chờn hoặc mất hẳn, khách vẫn mở được app và xem những gì đã tải trước đó. Đây không phải offline tuyệt đối như một số app native chuyên biệt, nhưng đủ để khách không thấy màn hình trắng khi đi vào hầm gửi xe hay vùng sóng yếu.

Thông báo đẩy

Trên phần lớn máy Android, PWA gửi thông báo đẩy khá ổn định, dùng được cho việc nhắc lịch hẹn, báo đơn hàng, thông báo khuyến mãi. Trên iPhone, tính năng này mới được hỗ trợ gần đây và còn vài giới hạn tuỳ phiên bản iOS khách đang dùng. Web22 kiểm tra và nói rõ trên nhóm thiết bị khách hàng của bạn nó chạy tới đâu, tránh hứa suông một tính năng không chắc chạy đều trên mọi máy.

Quy trình Web22 làm một PWA

Không phải PWA nào cũng bắt đầu từ số 0. Cách Web22 làm chia theo hai tình huống phổ biến.

1. Tư vấn và xác định bạn đang ở tình huống nào (30 phút miễn phí). Web22 hỏi bạn đã có web chưa, mục tiêu dùng PWA để làm gì, và có cần thông báo đẩy hay chạy offline không, để chọn đúng hướng nâng cấp hay dựng mới.
2. Nếu bạn đã có web: đánh giá và nâng cấp. Web22 kiểm tra web hiện tại chạy trên nền tảng gì, thêm phần khiến nó cài được lên màn hình chính, chạy offline ở mức hợp lý, và gắn thông báo đẩy nếu cần. Phần lớn trường hợp không phải viết lại từ đầu.
3. Nếu bạn chưa có web hoặc muốn dựng PWA riêng: dựng mới trên nền web hiện đại. Web22 dựng theo đúng luồng bạn cần (đặt lịch, xem catalogue, quản lý đơn), tối ưu tốc độ tải ngay từ đầu vì PWA chạy chậm thì mất hết ý nghĩa “nhanh như app”.
4. Kiểm thử trên máy thật. Chạy thử trên nhiều dòng điện thoại Android và iPhone, vì mức hỗ trợ offline và thông báo đẩy khác nhau giữa hai hệ điều hành.
5. Bàn giao và hướng dẫn khách của bạn cách cài. Vì PWA không nằm trên chợ ứng dụng, Web22 hướng dẫn bạn cách chỉ khách bấm “thêm vào màn hình chính” đúng chỗ trên từng loại điện thoại, tránh khách không biết cách cài rồi bỏ qua.

Chi phí làm PWA được báo thế nào

Web22 không đưa một con số “trọn gói từ X triệu” ở đây, vì hai tình huống trên chênh lệch chi phí khá xa. Thay vì giá ảo, đây là những gì ảnh hưởng tới giá cuối cùng:

• Nâng web sẵn có hay dựng mới. Nâng một web đang chạy tốt thành PWA thường rẻ hơn nhiều so với dựng một PWA hoàn toàn mới từ đầu.
• Có cần thông báo đẩy không. Thêm phần gửi và quản lý thông báo đẩy cộng thêm công so với một PWA chỉ cần cài lên màn hình chính và chạy mượt.
• Mức độ chạy offline cần tới đâu. Chỉ cần xem lại nội dung đã tải khi mất mạng khác hẳn yêu cầu khách vẫn thao tác được và dữ liệu tự đồng bộ lại khi có mạng trở lại.
• Số lượng và độ phức tạp màn hình, cùng phần xử lý phía sau. Một PWA vài màn hình tĩnh khác xa một PWA có tài khoản, thanh toán, đồng bộ dữ liệu nhiều thiết bị.

Dải giá dưới đây để bạn hình dung, con số chính xác Web22 chốt sau khi nghe rõ nhu cầu:

Xem thêm cách Web22 định giá các dịch vụ khác tại bảng giá dịch vụ. Về lâu dài bạn còn đỡ một khoản nữa: không phải đóng phí duy trì tài khoản nhà phát triển trên hai chợ ứng dụng mỗi năm. Web22 chạy dạng nhóm freelance nên chưa xuất hoá đơn VAT, nói trước để bạn cân đối.

Web22 làm PWA thế nào

Web22 dựng PWA trên nền web hiện đại, làm cho nó tải nhanh, chạy mượt và dùng được cả khi mạng yếu. Đây là phần Web22 quen tay nhất trong hai nhánh của PWA. Với một web đang chạy sẵn, phần lớn thời gian Web22 chọn cách nâng cấp lên PWA thay vì đập đi dựng lại, vì phần khung và nội dung cũ vẫn dùng được, chỉ thêm lớp khiến nó cài đặt và chạy offline được.

Web22 lo phần khiến một web trở thành app thật sự tiện dùng: biểu tượng và màn hình mở riêng, chạy được khi ngắt mạng ở mức hợp lý, và thông báo đẩy nếu bạn cần, với điều kiện Web22 nói rõ mức hỗ trợ thật trên iPhone trước khi bạn kỳ vọng nó hoạt động y hệt Android.

Web22 cam kết ba điều cụ thể ở mảng này: tư vấn thẳng PWA có hợp với bạn không trước khi nhận việc, báo giá theo đúng phạm vi trong vòng 24 giờ sau buổi tư vấn, và bàn giao mã nguồn đầy đủ để bạn không bị khoá vào Web22 về sau.

Và đây là điều Web22 không làm: không nhận PWA cho những dự án cần chạm sâu phần cứng như quét vân tay hay xử lý ảnh nặng liên tục trên máy, vì đó là bài toán của app native, không phải PWA. Gặp trường hợp đó, Web22 nói thẳng ngay từ buổi tư vấn và gợi ý hướng lập trình ứng dụng di động thay vì nhận bừa một việc PWA làm không tới.