PWA hay Progressive Web App là gì, dùng khác gì app native, vì sao PWA trên iOS chưa ngon?

Pnghuy
19/4/2024 17:51Phản hồi: 89
PWA hay Progressive Web App là gì, dùng khác gì app native, vì sao PWA trên iOS chưa ngon?
Chúng ta hay nghe nói đến PWA, ứng dụng PWA hay Progressive Web App, nói theo cách dân dã là ứng dụng web. Vậy PWA là gì và lợi ích của nó so với app native là gì, vì sao không dùng PWA mà phải có app native bên cạnh, Windows hay macOS muốn dùng PWA thì như thế nào? Rất nhiều câu hỏi mình sẽ chia sẻ với anh em trong chủ đề bài này.

Ứng dụng PWA là gì?


PWA hay web app là một loại ứng dụng web tiên tiến, kết hợp các tính năng của trang web truyền thống và native app, cho trải nghiệm mượt mà mà không tốn nhiều bộ nhớ, không cần thời gian tải về, không cần cập nhật và độ bảo mật thì cũng cao không kém gì native app.

PWA cũng có thể hoạt động offline, tương thích với mọi thiết bị, và có khả năng cài đặt trực tiếp từ trình duyệt, có dung lượng nhẹ, thời gian tải nhanh, hỗ trợ deep links.

Khi dùng PWA, có một số công nghệ chính đằng sau nó như:

  • Service workers: đây là thứ giúp cho PWA có thể chạy offline hoặc chạy trên các mạng tốc độ rất thấp. Ngoài ra service workers còn đóng góp nhiều vai trò quan trọng khác trong cách hoạt động của PWA.
  • Manifest: một tệp JSON được tạo ra để trình duyệt có thể nhận diện được ứng dụng: icon, tên ứng dụng, màu theme, các tùy chọn nâng cao như hướng mong muốn và các lối tắt ứng dụng…Manifest là một phần bắt buộc để PWA hoạt động tốt.
  • WebAssembly: là một công nghệ cho phép chạy các mã máy ảo, nhờ nó mà PWA hoạt động mượt mà hơn, thực thi mã nhanh hơn. PWA cũng sử dụng WebAssembly để tương tác với phần cứng. Nhà phát triển cũng chỉ cần xây dựng WebAssembly 1 lần và có thể chạy trên nhiều nền tảng.
  • Web Push Notifications: Cho phép gửi thông báo đẩy từ PWA đến người dùng.
  • Background Sync: Cho phép thực hiện các tác vụ đồng bộ trong nền khi PWA không hoạt động.
  • Caching: Cung cấp khả năng lưu trữ tài nguyên cục bộ để PWA hoạt động tốt khi không có kết nối mạng.

Và còn một số công nghệ khác để giúp cho PWA hoạt động gần như không khác gì so với một app native trên di động.

Vậy PWA có lợi gì so với app native?


PWA.png
Đơn giản nhất là chi phí và thời gian bỏ ra so với việc phát triển một ứng dụng native. Thứ hai nữa là cài đặt đơn giản hơn so với ứng dụng native, chỉ cần mở trình duyệt và làm theo một số bước thì đã có một ứng dụng web có thể dùng được ngay.

Thứ ba đó là sự đồng bộ, nếu bạn dùng PWA trên iPhone/Android, iPad hay máy tính thì giao diện của nó cũng giống nhau.

Thứ tư là vì sự đồng bộ nên PWA có thể hoạt động được trên mọi trình duyệt và mọi thiết bị. Thứ năm là hiệu năng của những ứng dụng PWA này không khác biệt mấy so với ứng dụng native, ngược lại thì những mẫu máy yếu, máy cũ mà ứng dụng không hỗ trợ nữa thì có thể dùng PWA.

Các ví dụ cho PWA bây giờ thì rất nhiều, Twitter, Pinterest, Starbucks, Flipboard, Spotify….rất rất nhiều mà nếu không nói ra có lẽ bạn cũng không biết đó là PWA.

Có lợi rồi thì PWA có nhược điểm gì so với app native?


Ảnh màn hình 2024-04-20 lúc 00.31.14.png
Có ưu thì cũng phải có nhược, nếu không thì tất cả đã chuyển sang dùng PWA hết rồi đúng không? Nhược điểm lớn và khiến PWA chưa thể thay thế app native chính là khả năng tương tác với phần cứng, một số ứng dụng PWA sẽ không có thể kích hoạt cảm biến vân tay, máy ảnh, microphone…Cũng vì khả năng tương tác hạn chế với phần cứng nên khả năng tương tác với hệ thống cũng bị ảnh hưởng, đặc biệt về khả năng đồng bộ, các tác vụ nền như ứng dụng native.

Quảng cáo



Hiệu suất dù có tốt đến mấy thì cũng khó mà bằng được với app native, nó có thể mượt, nó có thể nhanh nhưng nếu so với một app native thì chưa chắc là nhanh bằng.

Tiếp đến là Dù có thể hoạt động trên mọi trình duyệt nhưng không phải mọi tính năng đều hỗ trợ trên những trình duyệt đó.

Ở phía nhà phát triển, việc quyết định phát triển PWA thì cũng cần chú ý những điểm ở trên nữa, vì nếu muốn có trải nghiệm tốt nhất, ứng dụng native vẫn là sự lựa chọn an toàn và tối ưu nhất.

Vậy AMP là gì, nó khác gì so với PWA?


AMP hay Accelerated Mobile Page được ứng dụng rất nhiều ngày nay và nó giảm đi thời gian load trang web, về cơ bản thì nó có một số khác biệt chính so với PWA như hoạt động dựa trên một phiên bản HTML và CSS đơn giản, hạn chế sử dụng JS (JavaScript) và từ đó thì website sẽ tải nhanh hơn, nhưng giao diện thì vẫn sẽ là giao diện của web. AMP tinh gọn đi những thứ không cần thiết như yếu tố đồ hoạ, các ảnh động, banner…để tập trung vào nội dung website hiển thị.

Bù lại, AMP thì không thể hoạt động offline như PWA, nếu bạn đang làm SEO cho website thì Google sẽ ưu tiên AMP hơn là PWA, nhưng xét về mức độ trải nghiệm thì PWA tốt hơn, nên về lâu dài thì hiệu quả SEO của PWA cũng tương đồng với AMP.

Quảng cáo


Windows 11 dùng PWA như thế nào?


Kể cả bạn dùng trình duyệt gì thì khả năng rất cao là nó sẽ hỗ trợ PWA, vậy với máy tính Windows thì cài đặt PWA như thế nào?

Mình lấy ví dụ trình duyệt Edge nhé, với Edge thì nó đang hỗ trợ rất tốt cho PWA, gần như mọi trang web đều có thể đóng gói nó thành PWA được, ví dụ Tinh tế, YouTube, Instagram…

[​IMG]
Để cài đặt ứng dụng PWA trên Windows, trước tiên bạn hãy mở một website, sau đó chọn vào dấu “…” ở góc phải phía trên của trình duyệt.

Chọn tiếp Apps → chọn Install this site as an app. Sau đó bạn sẽ đặt tên cho ứng dụng PWA đó, một cửa sổ mới hiện ra và đó chính là PWA của website mà bạn vừa tạo.

Screenshot 2024-04-19 234503.png
Bây giờ bạn sẽ đối xử với nó giống như một ứng dụng native trên máy tính, bao gồm cả việc pin nó vào taskbar, tìm kiếm trong Start menu của Windows, tạo shortcut ở Desktop…

Và đối với PWA trên Windows thì có thêm một số tuỳ chỉnh, ví dụ bạn nhấn Ctrl + R thì nó sẽ load lại trang, bạn vẫn có thể sử dụng các extension có sẵn trên trình duyệt, cấp quyền cho PWA truy cập vào các thành phần khác của máy tính….

macOS dùng PWA như thế nào?


Ảnh màn hình 2024-04-19 lúc 23.53.23.png
Cũng tương tự như Windows, trên macOS cũng hỗ trợ PWA với các trình duyệt kể cả Safari, Edge, Chrome, Firefox…

Ảnh màn hình 2024-04-19 lúc 23.52.36.png
Cách làm tương tự trên Windows với trình duyệt Edge, cách quản lý cũng tương tự.

PWA trên iOSAndroid hiện tại thì sao?


IMG-1472.jpg
Với Android, PWA gần như không có giới hạn nào, người dùng sử dụng PWA giống như trên máy tính, ngược lại, với iOS hay iPadOS thì dù đã có nhiều cải thiện như hỗ trợ Dark mode, hỗ trợ API motion sensor nhưng PWA trên nền tảng của Apple vẫn chưa hỗ trợ push notification, không hỗ trợ background sync, giới hạn cache service workers là 50MB. Nhìn chung PWA trên nền tảng di động của Apple vẫn chưa cởi mở như với Android.

Tóm lại có nên dùng PWA hay không?


Khá là khó để trả lời câu hỏi này vì nó mang tính cá nhân, tuỳ vào nhu cầu của mỗi người, ví dụ như mình mình vẫn dùng PWA với một số ứng dụng mà ChatGPT là dùng nhiều nhất, kế đến là Tinh tế, sau nữa là Messenger nhưng mà sau này thì có app native rồi.

PWA là cách nhanh, gọn nhưng hiệu quả để sử dụng một website nào đó, khi Tinh tế chuyển qua dạng PWA thì hiệu suất cuộn trang mượt mà hơn thấy rõ so với việc dùng trên trình duyệt. Hi vọng chút ít này sẽ giúp anh em hiểu rõ hơn về PWA và ứng dụng của nó.
89 bình luận
Chia sẻ

Xu hướng

Pwa trên ios là đại diện cho sự hèn mọn của apple. Mặc dù pwa rất an toàn và hữu ích. Cộng đồng công nghệ đều rất ủng hộ. Nhưng, nó xung đột với mong muốn độc quyền việc phân phối app của apple. Thà đừng hỗ trợ pwa luôn cho xong. Đây nó hỗ trợ nhưng đúng kểu "cho có", "cho đỡ mang tiếng". iOS hạn chế, bót hiệu năng các api của pwa, Việc add 1 pwa lên screen thì khó khăn với hàng tá bước.

Một công ty kiếm tiền bất thủ đoạn nhưng cứ tỏ ra nhân văn.
@tiendatmagic khôn quá, bạn lấy PWA làm cái game đua xe với sensor xoay để quẹo cua hay là ứng dụng scan 3d sử dụng lidar hay là dựng video v.v xem thử có cần phải làm khó PWA để dev ko sử dụng PWA không? Nhìn cái nhỏ mà ko nhìn ra cái to.
@lonemars vl hàng tá bước là Share > Add to home screen đó hả
@Doan Phu Hoa nhưng PWA nó tương thích đa nền tảng ông à. Viết 1 chạy trên nhiều thiết bị, chạy trên web, android, ios đều được. Cần gì code app native chỉ chạy cho mỗi iOS. xu hướng giờ là đa nền tảng rồi ông. Đối với những app mà không cần sử dụng nhiều sensor, hay các API tương tác bên ngoài, thì dùng PWA là nhanh nhất rồi ông
@mrsugarvn Mình không định reply vì có vẻ bạn không phải dân IT nên không rõ. Cộng thêm dấu hiệu "không rõ (khác với không biết) nhưng vẫn phát biểu" khiến cho mình cảm thấy nguy hiểm. Sợ sẽ bị bạn đánh gục bằng kinh nghiệm nếu mình reply.

Nhưng vì ở diễn đàn tinh tế, tỉ lệ những người hiểu biết luôn cao hơn những người thấy mình còn thiếu xót. Nên để tránh có thêm các câu hỏi như của bạn thì mình xin được trả lời cụ thể như sau:

"Hàng tá" là thành ngữ, có nghĩa là khá nhiều và thể hiện thái độ khó chịu. Nhờ bạn đừng hiểu theo nghĩa đen là đúng "12" bước.

Và việc install pwa trên ios thực sự khó chịu. Kịch bản như sau:
1. Một người dùng bình thường truy cập web pwa. Với android: hiển thị khuyến nghị cài đặt. Người dùng nhấn nút cài đặt. Xong! iOS thì không thể, nhấn cài đặt nhưng trang web phải hiển thị hướng dẫn cài đặt thủ công. Người dùng thường thì chỉ thấy lằng nhằng và bất an. Khả năng cao họ sẽ không làm.
2. Trong phần hướng dẫn phải có câu sau "Hãy mở trang web này trên safari để cài đặt": Thật khốn nạn. Nghĩa là người dùng sử dụng trình duyệt khác safari thì thêm n bước để mở lại trang web trên safari. Sẽ có người yêu trang web của tôi đến mức sẽ làm việc này à?!
3, 4: Như bạn nói phía trên. Và đây là 1 quy trình không tự động. Theo CX, end user đều là lũ lười và họ sẽ không thích việc này kể cả chỉ là 2 bước.

Có lẽ bạn vẫn thấy bình thường. Nhưng với dev, cần phải care tất cả các trường hợp thì các bước ngáng chân của thằng apple đúng là bỉ ổi chúa.
Nói tới PWA thì phải nhắc đến Canvas Kit và Web Assembly
Pwa ios như hạch vì bị giới hạn quá nhiều api.
PWA trên iOS không ra cái gì cả.
PWA trên win 11 với android dùng thích vãi. Trên ios thì thôi... vứt mẹ nó đi
Vâng PWA rất hay! Chỉ có Apple là cố ý tẩy chay để ép vô AppStore chống lại xu thế công nghệ hay ho cho các bên.
Càng ngày mình càng ít cài app và chuyển sang chỉ dùng web và PWA dù dùng trên iphone, ipad bị hạn chế.
Mọi người ai cũng chê ios. Thổi bỏ iphone dùng android đi mấy ông ơi
@tiendatmagic Đã bỏ bạn ơi
@tiendatmagic Dùng làm máy phụ 😆)) cài app ngân hàng đc ko, LoL
@tiendatmagic IPhone làm máy phụ tài khoản bank. Máy chính dùng vẫn là Android
@hypous tôi vẫn dùng android làm máy chính + cài app ngân hàng bao năm nay. iPhone chỉ làm máy phụ, cài Youtube Kids cho con nó xem video thôi 😁
Safari như shjt ý, so sánh sao dược mấy cái hdh kia
Việc đóng gói web PWA ngoại trừ 1 vài nhu cầu đặc thù ra thì gần như là có cũng được, ko có cũng xong (xài trình duyệt web luôn cho lẹ), nửa nạc nửa mỡ như Dương Quá vậy, võ công cũng kinh hồn như người lành lặn đấy nhưng vẫn xếp vào hạng tàn phế 😁
TKNRCT
ĐẠI BÀNG
một tháng
@K.M.Huy voz, tinhte cũng dùng 1 phần của pwa đó ông
@K.M.Huy Thôi bỏ đi ông ơi, bớt ảo
Nhắc tới các công nghệ đại chúng thì nhìn sang Apple chỉ có thở dài thôi, tù bỏ mie ra 😆
app chạy thông qua webkit thì sao mà ngon bằng native được mà đi so sánh
@tiendatmagic thằng bá dơ muôn đời ghẻ
@Methylamine nhục, mang nhục cả đời đi
@tiendatmagic thằng dev ghẻ nhục cả dòng họ
@Methylamine xàm 😃
bài này hay xin phép copy dẫn source nha thớt
Ờ thì mềnh mong muốn PWA có thêm các tính năng Bluetooth, local network, haptics touch, gyroscope thì quá ngon. Còn faceid, biometrics thì nên là đặc thù native và bảo mật riêng.
Trên Android cũng có thể làm đc nhiều hơn.
@Bối Lỗ Đặc Google đã thử nghiệm 1 số hardware rồi, bao gồm BLE và cả serial port. Còn Apple thì thôi https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API

Web Bluetooth API - Web APIs | MDN

The Web Bluetooth API provides the ability to connect and interact with Bluetooth Low Energy peripherals.
developer.mozilla.org
@Bối Lỗ Đặc cái đó có rồi, mà google cung cấp cho android. còn ios thì apple hạn chế nhiều
2_Lúa
ĐẠI BÀNG
một tháng
AMP thì google nó bỏ lâu rồi, nên cũng vứt
@2_Lúa không giống nhau thì bạn cmt có liên quan gì đâu? bài viết này đang nói PWA. thế giờ tôi nói mạng xã hội Google+ khai tử, thì cũng đâu liên quan
2_Lúa
ĐẠI BÀNG
một tháng
@tiendatmagic Ông kia cmt nói về amp bạn ơi.
@2_Lúa AMP thì đâu liên quan PWA ?
zbezunz
ĐẠI BÀNG
17 ngày
@2_Lúa Dẫy mà thằng Google Adsense ăn rầu nó cứ bảo cài Plugin AMP trên Wordpress 😁
Mình dùng PWA cho chat zalo & youtube. App zalo native mắc gì mà dùng CPU rất cao, dùng web app mượt hẳn.
@Blitzwaffen Chính xác mình cũng vậy
chikav
ĐẠI BÀNG
một tháng
@Blitzwaffen app zalo cũng có native đâu, vẫn chỉ là 1 dạng khác của webview thôi mà
Stampz
ĐẠI BÀNG
một tháng
@Blitzwaffen Mình xài tablet Android cũng xài FB, Zalo, X... ở dạng PWA hết. App Zalo, FB native trên Android không hỗ trợ giao diện tablet nhìn khá xấu. Không biết các thím xài iPad thì thế nào.
2_Lúa
ĐẠI BÀNG
một tháng
@Stampz Ios bao mượt

Xu hướng

Bài mới









  • Chịu trách nhiệm nội dung: Trần Mạnh Hiệp
  • © 2024 Công ty Cổ phần MXH Tinh Tế
  • Địa chỉ: Số 70 Bà Huyện Thanh Quan, P. Võ Thị Sáu, Quận 3, TPHCM
  • Số điện thoại: 02822460095
  • MST: 0313255119
  • Giấy phép thiết lập MXH số 11/GP-BTTTT, Ký ngày: 08/01/2019