Quan tâm học JavaScript? Tải ebook tại jshandbook.com
Progressive Web Apps (PWA) là xu hướng mới nhất trong phát triển ứng dụng di động dùng công nghệ web. Thời điểm viết (đầu 2018), chúng chỉ áp dụng cho thiết bị Android.
PWA sắp đến iOS 11.3 và macOS 10.13.4, rất sớm.
WebKit, công nghệ nền tảng Safari và Mobile Safari, gần đây (Tháng 8/2017) tuyên bố bắt đầu đưa Service Workers vào trình duyệt. Nghĩa là sớm sẽ có trên iOS. Vậy khái niệm PWA có thể áp dụng cho iPhone/iPad, nếu Apple quyết định khuyến khích cách tiếp cận này.
Đây không phải công nghệ đột phá mới, mà thuật ngữ mới xác định gói kỹ thuật nhằm tạo trải nghiệm tốt hơn cho web-based app.
Progressive Web App là gì
Progressive Web App là app có thể cung cấp tính năng bổ sung dựa trên hỗ trợ của thiết bị, cung cấp khả năng offline, push notifications, giao diện và tốc độ gần như native app, và cache tài nguyên cục bộ.
Kỹ thuật này Google giới thiệu 2015, chứng minh mang lại lợi ích lớn cho cả developer và user.
Developer truy cập xây dựng ứng dụng gần như first-class dùng web stack. Luôn dễ và rẻ hơn xây dựng native app, nhất là xét cross-platform.
Dev hưởng lợi từ giảm ma cài đặt (reduced installation friction), và lúc có app trên store không thực sự mang lại discoverability cho 99,99% app, Google search cung cấp lợi ích ngang ngửa hay hơn.
PWA là website phát triển với công nghệ nhất định làm trải nghiệm mobilepleasant hơn mobile-optimized website thường. Cảm giác gần như native app, vì cung cấp:
- Hỗ trợ offline
- Tải nhanh
- An toàn
- Khả năng push notifications
- Trải nghiệm immersive, full-screen không thanh URL
Nền tảng mobile (Android lúc viết, nhưng không giới hạn kỹ thuật) hỗ trợ ngày càng nhiều PWA. Chúng thậm chí hỏi user có muốn thêm app vào home screen khi truy cập site có PWA.
Trước hết, làm rõ tên. Progressive Web App có thể gây nhầm lẫn, định nghĩa tốt: web app tận dụng tính năng trình duyệt hiện đại (web workers, web app manifest) để thiết bị mobile "nâng cấp" app thành first-class citizen app.
Các phương án thay thế Progressive Web Apps
PWA so với phương án khác khi xây dựng trải nghiệm mobile như thế nào?
Tập trung ưu/nhược điểm từng cái, xem PWA phù hợp đâu.
Native Mobile Apps
Native app là cách rõ ràng nhất xây dựng mobile app. Objective-C/Swift trên iOS, Java/Kotlin trên Android, C# trên Windows Phone.
Mỗi platform có UI/UX convention riêng, native widget cung cấp trải nghiệm user mong đợi. Triển khai và phân phối qua App Store platform.
Điểm đau chính native app: cross-platform dev yêu cầu học, master, cập nhật nhiều methodology và best practice khác nhau. Ví dụ: team nhỏ hoặc solo dev xây app 3 platform, mất nhiều thời gian học tech/môi trường. Quản lý thư viện khác nhau, workflow khác nhau (ví dụ iCloud chỉ iOS — không có Android).
Hybrid Apps
Hybrid app xây bằng Web Technologies, nhưng deploy lên App Store. Ở giữa có framework/package app để gửi review App Store truyền thống.
Platform phổ biến: Phonegap, Ionic Framework, và nhiều khác. Thường thấy trên trang là WebView load local website.
Ban đầu tôi đưa Xamarin vào danh sách, nhưng Carlos Eduardo Pérez chỉ ra đúng: Xamarin generate native code.
Khía cạnh then chốt Hybrid Apps: write once, run anywhere. Code platform khác generate tại build time, xây app bằng JavaScript, HTML, CSS — tuyệt vời. Khả năng thiết bị (mic, camera, network, gps…) expose qua JavaScript APIs.
Phần xấu hybrid app: trừ khi làm rất tốt, có thể settle trên common denominator. Tạo app sub-optimal mọi platform vì bỏ qua human-computer interaction guidelines riêng platform.
Cũng, performance view phức tạp có thể bị ảnh hưởng.
Apps built with React Native
React Native expose native control thiết bị mobile qua JavaScript API, nhưng thực tế tạo native app, không nhúng website vào WebView.
Slogan phân biệt với hybrid: learn once, write anywhere. Nghĩa là approach giống nhau cross-platform, nhưng tạo app hoàn toàn riêng cho trải nghiệm tốt mỗi platform.
Performance ngang native app, vì build về cơ bản là native app phân phối qua App Store.
Đặc điểm Progressive Web Apps
Phần trước thấy competitors chính của PWA. Vậy PWA đứng ra sao so với chúng, đặc điểm chính là gì?
Nhớ — hiện PWA chỉ cho Android.
Đặc điểm (Features)
PWA có một điều tách biệt hoàn toàn so với cách tiếp cận trên: không deploy lên app store.
Đây là lợi thế then chốt. App store tốt nếu có reach và may mắn được featured, làm app viral. Nhưng trừ top 0.001%, không lợi ích gì từ chỗ nhỏ trên App Store.
PWA có thể khám phá qua Search Engines, và khi user vào site có PWA, trình duyệt kết hợp thiết bị hỏi user có muốn cài app lên home screen không. Khổng lồ, vì SEO thường áp dụng cho PWA, ít phụ thuộc paid acquisition hơn.
Không trên App Store nghĩa là không cần duyệt Apple/Google để vào túi user. Release update khi muốn, không qua quy trình duyệt chuẩn của iOS app.
PWA về cơ bản là HTML5 application/responsive website trên steroid, với công nghệ then chốt gần đây làm các feature chính trở nên khả thi. Nhớ iPhone gốc ra mắt không cho dev native app. Dev được bảo làm HTML5 mobile app cài home screen, nhưng tech lúc đó chưa sẵn sàng.
Progressive Web Apps chạy offline.
Việc dùng service workers cho phép app luôn có nội dung tươi, tải background, hỗ trợ push notifications tạo cơ hội re-engagement lớn hơn.
Cũng, khả năng chia sẻ (sharability) tạo trải nghiệm tốt hơn cho user muốn share app — chỉ cần URL.
Lợi ích (Benefits)
Tại sao user và dev quan tâm PWA?
- PWA nhẹ hơn. Native App 200MB+, PWA có thể vài KB.
- Không code native platform
- Chi phí acquisition thấp (khó convince user cài app hơn truy cập web first-time experience)
- Ít effort hơn build và release update
- Hỗ trợ deep links tốt hơn app-store app thường
Khái niệm cốt lõi (Core concepts)
- Responsive: UI thích ứng kích thước màn hình thiết bị
- App-like feel: không cảm giác như website mà như app (tối đa có thể)
- Offline support: dùng storage thiết bị cung cấp trải nghiệm offline
- Installable: trình duyệt thiết bị nhắc user cài app
- Re-engaging: push notifications giúp user rediscover app sau cài
- Discoverable: search engine và SEO optimization mang user nhiều hơn app store
- Fresh: app tự cập nhật nội dung khi online
- Safe: dùng HTTPS
- Progressive: chạy trên mọi thiết bị, kể cả cũ, dù ít feature hơn (ví dụ chỉ như website, không cài được)
- Linkable: dễ trỏ đến bằng URL
Service Workers
Phần định nghĩa PWA là phải hoạt động offline.
Vì thứ cho phép web app offline là Service Worker, ngụ ý Service Workers là bắt buộc cho PWA.
CẢNH BÁO: Service Workers hiện chỉ hỗ trợ Chrome (Desktop và Android), Firefox, Opera. Xem https://caniuse.com/#feat=serviceworkers dữ liệu hỗ trợ cập nhật.
MẸO: Đừng nhầm Service Workers với Web Workers. Hoàn toàn khác.
Service Worker là file JavaScript đóng vai trung gian giữa web app và network. Vì vậy cung cấp cache service, tăng tốc render app, cải thiện UX.
Lý do bảo mật: chỉ site HTTPS dùng được Service Workers, đây là một phần lý do PWA phải serve qua HTTPS.
Service Workers không có trên thiết bị lần đầu user truy cập app. Lần đầu service worker được cài, từ lần truy cập sau các trang riêng biệt, Service Worker này được gọi.
Xem hướng dẫn hoàn chỉnh Service Workers
App Manifest
App Manifest là file JSON cung cấp thông tin thiết bị về PWA.
Thêm link manifest trong mọi header mỗi trang web:
<link rel="manifest" href="/manifest.webmanifest">File này nói cho thiết bị cách thiết lập:
- Tên và tên ngắn app
- Vị trí icons, các kích thước
- URL khởi đầu, relative to domain
- Orientation mặc định
- Splash screen
Ví dụ
{ "name": "The Weather App", "short_name": "Weather", "description": "Progressive Web App Example", "icons": [{ "src": "images/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "images/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" }, { "src": "images/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png" }, { "src": "images/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "images/icons/icon-256x256.png", "sizes": "256x256", "type": "image/png" }], "start_url": "/index.html?utm_source=app_manifest", "orientation": "portrait", "display": "standalone", "background_color": "#3E4EB8", "theme_color": "#2F3BA2" }App Manifest là W3C Working Draft, tại https://www.w3.org/TR/appmanifest/
App Shell
App Shell không phải công nghệ mà design concept (khái niệm thiết kế). Nhắm load và render container web app trước, nội dung thực sau, tạo ấn tượng app-like cho user.
Ví dụ: Apple Human Interface Guidelines gợi ý splash screen giống UI. Cung cấp gợi ý tâm lý giảm cảm giác app load lâu.
Caching
App Shell cache riêng biệt với content, thiết lập truy xuất building block shell từ cache mất rất ít thời gian.
Quan tâm học JavaScript? Tải ebook tại jshandbook.com