Native Apps thất thủ, Progressive Web App lên ngôi?

Có xu hướng mới nổi trên thị trường là có nên chuyển từ native apps qua làm progressive web apps? Progressive web app là ứng dụng web chạy “mượt” trên thiết bị di động, có thể còn hơn cả native mobile apps.

Sao gọi là ‘mượt’ hơn? Sự thật là  mọi người không dành nhiều thời gian tìm kiếm ứng dụng mới trên cửa hàng ứng dụng, mà họ dành rất nhiều thời gian trên web – nơi họ tìm thấy và cài đặt ứng dụng mới. Progressive web apps (PWA) khởi nguyên như mọi web app khác, điểm khác biệt khi người dùng liên tục quay lại sử dụng một ứng dụng thì trình duyệt sẽ mời họ cài đặt ứng dụng đó vào trang chủ. PWA cũng có push notification như native app.

Điều thú vị là, giống như native apps, PWA có icon của riêng nó ở trang chủ, khi bạn click vào, ứng dụng sẽ mở mà không cần đến trình duyệt web. Nghĩa là không cần có thanh URL hay giao diện điều hướng trên web. Chỉ cần thanh trạng thái thường thấy trên di động, và thế là ứng dụng hiển thị rực rỡ gần như full-screen.

Để có PWA như hôm nay thì đã mất cả thời gian dài dù công nghệ không hoàn toàn mới – ngoại trừ nền tảng cross-platform đáng chú ý gần đây.

Vài cột mốc quá khứ

Những ngày đầu của iPhone không hề có cửa hàng ứng dụng. Steve Jobs muốn các lập trình viên làm ứng dụng cho iPhone bằng các nền tảng công nghệ web.

Đôi khi những nhà chiến lược đi trước thời đại của họ tới 10 năm. Nhìn lại 2 năm trước, việc Steve Jobs khuyến khích làm web app cho iPhone được Forbes gọi là ‘sai lầm lớn nhất’ của Steve, vì native apps đã có thành công vang dội.

Tuy nhiên nhìn vào thời điểm hiện tại, dường như ông đã phỏng đoán được điều gì rồi – một phỏng đoán tiến bộ trước cả những gì nền tảng web thời kì đó có thể làm được. Một thập kỉ sau, nền tảng mobile web hỗ trợ rất nhiều tính năng mà các lập trình viên tìm kiếm ở native apps, và thế là tầm nhìn ban đầu của Steve Job cho mobile web app đang được cả thế giới theo đuổi.

Apple ngay từ đầu đã khuyến khích xu hướng “apple-mobile-web-capable’ web apps mà bạn có thể cài vào trang chủ bằng cách dùng meta tags. Các nhà di động khác cũng bắt chước, tạo ra loạt meta tag của riêng họ để hỗ trợ các tính năng mobile web app. Tuy nhiên chỉ mới gần đây khi cross-platform xuất hiện thì cross-platform mobile web apps mới thật sự trở thành một hiện tượng.

Để phân biệt với những thuật ngữ như progressive enhancement hay responsive apps, PWA được định nghĩa bằng cách thỏa mãn những tiêu chuẩn nhất định.

Progressive Web App là gì?

PWA đơn giản là web app thân thiện với mobile. Khi trình duyệt thấy người dùng liên tục dùng một ứng dụng, nó sẽ khuyến khích họ cài đặt nó vào màn hình chủ, hoặc dock v.v. Để trở thành một PWA đúng nghĩa, ứng dụng phải đáp ứng những yếu tố sau:

  • Phải là HTTPS (xem Let’s encrypt)
  • Valid manifest với đủ thuộc tính cần thiết (Web Manifest Validator)
  • Có service worker
  • Manifest   start_url  phải luôn load, cả khi offline (dùng service worker)
  • Phải có điều hướng của riêng nó
  • Phải thích ứng với kích thước màn hình và hướng xoay màn hình khác nhau.

HTTPS và service worker cho người dùng offline hẳn nhiên là cái mà mọi ứng dụng hiện đại nào cũng cần phải có.

Cái mà người làm app thường hay quên là nếu bạn đã làm PWA thì bạn phải điều hướng được trong ứng dụng mà không cần tới trình duyệt. Thiết bị di động luôn mặc định là bạn đã tích hợp điều hướng vào bản thân ứng dụng rồi.

Ví dụ, nếu bạn có một trang ‘About’ thì trang đó phải liên kết ngược trở lại giao diện ứng dụng, không thì người dùng phải đóng và mở lại ứng dụng thì mới quay được trở lại giao diện chính.

Cách làm Progressive Web Apps

Có rất nhiều thông tin về cách làm PWA trên mạng, nhưng một lượng lớn thông tin đã lỗi thời và một lượng lớn khác chỉ đề cập một phần của vấn đề. Phần bên dưới sẽ giải quyết tất tần tật những công đoạn cần thiết để làm PWA:

Kích hoạt HTTPS

Để kích hoạt HTTPS, bạn sẽ cần:

Manifest

Tệp Manifest được gọi là   manifest.json  và nó khá đơn giản. Nó bao gồm tên (short_name     cho icon trên trang chủ, và một  name  tùy chọn để thể hiện tên đầy đủ), một url bắt đầu, một danh sách icon với kích thước khác nhau để phù hợp với nền tảng khác nhau. Cho Android và iOS, bạn sẽ cần:

  • 36×36
  • 48×48
  • 60×60 (Apple touch icon iPhone)
  • 72×72
  • 76×76 (Apple touch icon iPad)
  • 96×96
  • 120×120 (Apple touch icon iPhone retina)
  • 152×152 (Apple touch icon iPad retina)
  • 180×180 (Apple touch icon for iOS 8+)
  • 192×192
  • 512×512

Lọc ra một ví dụ về một cái tên phổ biến cho một Apple touch icons:

Apple-touch-icon-180×180.png

Bạn có thể thay 180×180 bằng kích thước khác. Mặc dù việc dùng tên phổ biếnkhông bắt buộc nhưng trong trường hợp bạn quên đính tag, iOS vẫn có thể tìm ra icon bằng các tìm kiếm nó trong root directory của web app nếu bạn đặt cho icon tên phổ biến.

iOS icon không hỗ trợ transparency.

Mẫu manifest.json:

XXXXX

Có một số tính năng bạn cần biết.  theme_color  dùng để đặt màu cho thanh trạng thái và thanh window header dùng khi chuyển qua lại giữa các app trên Android.

background_colors để đặt màu cho splash screen. Trên Android, một splash screen sẽ bao gồm thuộc tính name (tên đầy đủ) và một icon lớn phía trên cùng của background_color.

Manifest không hoạt động ở mọi nơi

Khi mới làm PWA lần đầu, bạn có thể rất phấn khích khi thấy nó chạy được như ý muốn trên Chrome (Android), nhưng khi nhìn sang Safari (iOS) thì hỡi ôi. Lý do là Safari, mặc dù hỗ trợ các tính năng dùng custom tags cả chục năm về trước, vẫn chưa hỗ trợ web manifest spec.

Do đó, bên cạnh file manifest cho broswers, bạn cũng sẽ cần những meta tag đặc biệt cho iOS, bắt đầu từ cái bên dưới – giúp launch app không cần browser chrome:

Mặc dù có rất nhiều tags bạn cần nhớ, nhưng cũng có một cách khác. Web manifest polyfill sẽ đọc file manifest.json của bạn và thêm vendor-specific tags cho browsers di động, iOS đời cũ, thậm chí cả Windows phone và Firefox OS.

Service Worker

Service Worker là một web platform specification cho phép bạn lưu trữ cache trên máy người dùng, nhờ đó app của bạn vẫn hoạt động cả khi người dùng không kết nối với internet.

Để bắt đầu, tác giả khuyến khích sử dụng một khái niệm trừu tượng cấp cao khá đơn giản gọi là UpUp. Bên dưới là một ví dụ từ UpUp docs:

XXXXX

content-url là URL để load khi người dùng offline. Trong trường hợp này, Root URL của app vẫn dùng tốt.

Assets là file được cache trên máy người dùng để app chạy bình thường. Nhớ bao gồm mọi hình ảnh, icons, CSS, thậm chí cả AJAX request responses mặc định. Và con nữa, mọi định dạng tệp đều phải chạy được.

Cuối cùng, sẽ có ngày bạn sẽ muốn nhiều quyền điều khiển tài nguyên offline hơn những quyền UpUp cho phép. Khi ngày đó đến, đây sẽ là những nguồn tham khảo để bạn học hỏi

Free Google Udacity course

Service Worker Cookbook for in-depth coverage

Testing

Debug thiết bị bằng Chrome inspect

Cắm thiết bị của bạn vào một cáp USB. Bật USB debugging trên thiết bị Android của bạn. Xem hướng dẫn debug từ xa. Bạn sẽ cần Google một chút để biết cách đặt điện thoại Android của bạn vào chế độ dành cho lập trình viên để có thể bật tính năng debug từ xa.

Khi bạn đã bật được chế độ dành cho lập trình viên, bạn sẽ thấy các lựa chọn trong cài đặt. Mở ra, nhớ là vẫn giữ USB debug mở.

Vào chrome://inspect#devicess. Bấm nút inspect và bạn sẽ thấy trọn bộ công cụ lập trình cho ứng dụng của bạn.

Verify service worker

Vào chrome://inspect/#service-workers để kiểm định service worker của bạn làm việc đúng.

Verify install to homepage

Nếu bạn muốn bỏ qua user engagement checks và luôn có lựa chọn install to homepage, hãy bật “Bypass user engagement checks” trong Chrome flags:

chrome://flags/

Để test trên desktop, bạn cũng cần phải bật “Enable add to shelf”.

Native Apps vẫn chưa chết đâu nhé

Progressive Web Apps hiện đã có hầu hết chức năng của native apps, tỉ lệ ăn chia lợi nhuận hứa hẹn sẽ giảm thiểu so với native apps. Bạn sẽ không lo lắng phải vào được app store, phải trả thuế 30% trên mỗi app sale.

Mặc dù vậy, native apps vẫn có một số khả năng mà mobile web apps sẽ còn cần nhiều thời gian mới có được.

Đáng kể đến là hầu như mọi sensor và hardware integration specs không hỗ trợ hoặc hỗ trợ rất ít trên browser, thậm chí những chức năng cơ bản như device orientation API đã có nhiều sự thay đổi, spec có nhiều loại phiên bản trong các browser khác nhau, đòi hỏi logic phức tạp hoặc polyfills để có thể dùng chúng đúng cách.

Một điều trớ trêu là mặc dù Apple tiên phong trong công nghệ progressive web app, iOS dường như là rào cản chính trong việc ứng dụng PWA. iOS không hỗ trợ service workers, và chỉ đang tham khảo xem có nên thêm hỗ trợ này không.

Thật may mắn là  Cordova plugin cho phép thêm hỗ trợ service worker vào hybrid apps trên iOS.

Điều này cho thấy không phải web browser nào cũng có cách gợi ý người dùng install app một cách thân thiện. Nếu bạn dụng spec hiện nay, người dùng có hoặc không được gợi ý install app của bạn, và nếu họ lên app store gõ tìm tên app của bạn thì họ sẽ không thấy gì trừ phi bạn đã phải làm một hybrid app và đăng lên app store theo quy trình như thường lệ.

Trong ngắn hạn, bạn có thể bị mắc kẹt với Cordova hoặc công cụ tương tự để đối phó với thiết bị iOS, bạn đã có spec hỗ trợ tốt trên thiết bị Android. Và nhớ là Android chiếm 86% nền tảng di động trên thị trường hiện nay. Vậy là có thể rất đáng công sức để làm một PWA thậm chí khi bạn phải polyfill iOS với Cordova để có thể tận dụng tỉ lệ lợi nhuận cao hơn đối với 86% thế giới cài đặt app.

Bạn muốn thử vài PWA, khám phá pwa.rocks