Progressive Web App: web mà vẫn gửi được thông báo, chạy được offline, mượt như app bình thường

Progressive Web App: web mà vẫn gửi được thông báo, chạy được offline, mượt như app bình thường

Discussion in 'Đám mây, Dịch vụ trực tuyến' started by Duy Luân, 19/5/17. Replies: 47. Views: 32,111.

Duy Luân
Theo dõi

Progressive Web App: web mà vẫn gửi được thông báo, chạy được offline, mượt như app bình thường

Thảo luận trong 'Đám mây, Dịch vụ trực tuyến' bắt đầu bởi Duy Luân, 19/5/17. Trả lời: 47, Xem: 32111.

Chia sẻ

  1. Duy Luân

    Duy Luân Không có gì!

    Tham gia:
    16/2/08
    Được thích:
    242,577
    Best Answers:
    3
    Duy Luân
    VIP
    #1 Duy Luân, 19/5/17
    Sửa lần cuối: 21/5/17
    Progressive Web App (PWA) là một dạng ứng dụng nền web đang rất nổi trong thời gian gần đây. Bạn cứ tưởng tượng nó giống một website bình thường nhưng hỗ trợ full cho các thao tác cảm ứng, có tất cả tính năng giống như bạn xài một app bình thường: thông báo, camera, GPS, sync dữ liệu nền, NFC, Bluetooth... Nói cách khác, nó không khác nhiều so với app, nhưng lại không cần cài đặt, không cần chờ download, và chiếm ít dung lượng bộ nhớ hơn. Vậy có phải ngon không?

    Progressive Web App là gì?

    PWA là một ý tưởng được cổ vũ và khuyến khích bởi Google, cụ thể là nhóm phát triển Chrome. Năm 2015, nhà thiết kế Frances Berriman và kĩ sư Chrome Alex Russell lần đầu tiên đề cập tới cụm từ "Progressive Web Apps" để mô tả việc tận dụng các tính năng mới của trình duyệt để cho phép người dùng xài các web app mà xịn như native app.

    Cho anh em nào chưa biết: web app về cơ bản là một website nhưng được thiết kế giống như app, còn native app là các ứng dụng được viết ra bằng những công cụ do Apple, Google cung cấp. Web app tiện ở chỗ anh em có thể xài nó ngay, giao diện có thể tùy biến nhanh ở phía server, và dù có thể chạy trên cả máy tính, phone, tablet với giao diện co dãn tùy màn hình. Bù lại native app phải cài nhưng lại có hiệu năng cao hơn, giao diện được tối ưu tốt hơn và có thể truy cập được nhiều chức năng hơn trong hệ điều hành. Một số app lai giữa native và web app luôn.

    Đây là một vài ví dụ anh em có thể xài ngay:
    • Web app: Evernote.com, Word Online, Excel Online, Google Docs
    • Native app: app đang cài trong điện thoại của anh em
    • PWA (nên mở trên điện thoại Android để có trải nghiệm tốt nhất): NASA Open Source, Polymail, Telegram
    Quay trở lại với Progressive Web Apps, nó cũng là web app nhưng giờ được nâng lên một tầm cao mới. Theo Google, đặc tính của PWA như sau:
    • Progessive: phải dùng được với tất cả mọi người, không quan trọng họ xài trình duyệt gì
    • Responsive: dùng được với mọi máy - desktop, mobile, tablet, hay bất kì thứ nào mới xuất hiện sau này
    • Không phụ thuộc vào mạng: Service Worker cho phép chạy offline hoặc trên các mạng rất chậm
    • App-like: cảm thấy giống như đang xài app, từ cách điều hướng cho đến giao diện, độ mượt, độ phản hồi cũng phải nhanh tương ứng
    • Fresh: luôn cập nhật nhanh nhờ Service Worker
    • Safe: sử dụng HTTPS để tăng tính an toàn, tránh bị đánh cắp thông tin dọc đường
    • Discoverable: khi người dùng duyệt vào PWA, nó sẽ được xác định như là một app, lúc đó trình duyệt sẽ tự ẩn thanh địa chỉ và các yếu tố của browser truyền thống, chỉ để lại một mình app với giao diện của nó. Đây là thứ web app bình thường không làm được.
    • Re-engageable: sử dụng notification và các phương tiện khác để thu hút người dùng quay lại app
    • Installable: có thể "cài" app lên máy và hiện lên home screen để mở app dễ dàng hơn
    • Linkable: có thể chia sẻ nhanh bằng URL (link) mà không đòi hỏi cài đặt phức tạp.
    Đang tải PWA_general.jpg…

    Trong số những đặc tính nói trên, có một cụm từ xuất hiện nhiều: Service Worker. Cái này giống như một tiến trình chạy nền của trình duyệt và tách biệt với website, điều đó cho phép website chạy các chức năng ngay cả khi bạn đang không truy cập vào nó. Đơn giản như thế này: Chrome và Safari trên máy tính cho phép bạn đăng kí nhập thông báo của các trang thương mại điện tử như Tiki, Lazada, Adayroi. Mỗi khi những công ty này có khuyến mãi, họ sẽ đẩy thông báo xuống Chrome / Safari cho bạn xem ngay cả khi bạn đang xem web khác (Facebook, Tinh tế, VnExpress) hay thậm chí lúc bạn không mở trình duyệt. Service Worker là cái chịu trách nhiệm lấy thông báo đó xuống cho bạn.

    Mở rộng ra, Service Worker cho phép PWA thực hiện các tính năng chạy nền như native app, ví dụ như notification, sync dữ liệu mới, download file, chơi nhạc + video, sử dụng dữ liệu địa điểm thời gian thực... Nó cũng là cái đứng ra để giúp PWA có thể chạy offline: khi có mạng, PWA sẽ tải dữ liệu mới nhất từ server, còn nếu không có Internet thì nó lấy dữ liệu, giao diện, tính năng đã từng lưu trong cache để hoạt động.

    Đang tải offline-first-diagram.png…

    So với web app truyền thống, lợi ích của PWA đã quá rõ, nó là cái danh sách mình kể cho anh em nghe ở phía trên. Những thứ đó các trang web truyền thống không thể xài được. Còn so với native app, PWA giúp:
    • Chạy ngay không cần cài đặt, dung lượng download ở lần đầu tiên cũng rất ít (down nhanh hơn)
    • Không cần phải qua App Store, Play Store mà có thể tìm ngay từ Google hoặc các trang web khác (tính discoverable cao hơn, developer dễ phân phối app hơn, người dùng dễ tiếp cận hơn)
    • Hiệu năng tiệm cận với native app cho đa số các tác vụ
    • Khi cần update cũng rất nhanh lẹ, thậm chí không cần update qua store luôn
    • Có thể chia sẻ nhanh chóng tới đúng trang nội dung chỉ bằng cách copy URL
    PWA chạy với Android, iOS ra sao?

    PWA hiện tại được hỗ trợ tốt nhất trên Android, mà cụ thể là nhờ vào Chrome. Chrome trên Android hỗ trợ gần như tất cả những gì PWA vẽ ra, từ truy cập danh bạ, địa điểm, vị trí theo thời gian thực, thông báo... Anh em có thể dùng điện thoại của mình vào web https://whatwebcando.today để biết tính tương thích của trình duyệt anh đang xài với những tính năng của PWA. Bản Chrome mới hơn sẽ support nhiều chức năng hơn. Với những bản Chrome quá cũ, PWA sẽ không thể dùng full tính năng. Ngoài Chrome, Opera và Firefox cũng hỗ trợ nhiều chức năng của PWA trên Android.

    Đang tải PWA_Firefox_Android.jpg…

    Trong khi đó, hỗ trợ với các tính năng của PWA khá hạn chế với Safari của iOS. Đây cũng là một trong những nguyên nhân chính khiến các công ty lớn vẫn chưa di chuyển ứng dụng của họ sang PWA mà vẫn trung thành hoặc với web app truyền thống hoặc làm hẳn native app luôn. Nhưng Apple dạo gần đây đang rất tích cực bổ sung chức năng mới và hàm API mới cho Safari, sẽ không lâu nữa trước khi PWA có thể chạy ngon trên iOS như khi hoạt động trên Android. Thực chất khi mới ra iPhone chính Steve Jobs là người đã cho rằng chỉ cần web app là đủ chơi rồi nhưng khi ấy sức mạnh của phần cứng không cho phép, giờ nếu có điều kiện thì Apple sẽ tận dụng ngay.

    Trên máy tính cũng tương tự, Chrome đã hỗ trợ nhiều chức năng lắm, trong khi Safari trên iOS vẫn còn ít nhưng mọi thứ cũng đang được cải thiện nhờ việc chia sẻ chung phần mã nguồn giữa máy tính với mobile.

    Nhưng ngay cả khi PWA chưa sẵn sàng cho iOS thì các developer cũng bắt đầu làm cho web của họ tương thích với PWA do những cải thiện về hiệu năng, độ mượt cũng như cách mà bạn có thể tương tác với web. Ví dụ, trang Financial Times tuy chưa hẳn di chuyển sang PWA cho iOS (chưa gửi được notification, chưa chạy được offline...) nhưng họ vẫn ghi nhận lượt tương tác với người dùng iOS tăng lên nhờ các trải nghiệm khác trở nên ngon lành hơn.

    PWA và AMP

    AMP (Accelerated Mobile Pages) cũng là một dạng web đặc biệt do Google nghĩ ra. Nó giống Instant Article của Facebook, tức là trang web sẽ hiển thị nội dung theo cách riêng nhằm tập trung nhiều hơn vào nội dung chính, bỏ banner quảng cáo, bỏ đi các yếu tố đồ họa rườm rà, nhấn mạnh chữ và hình ảnh. AMP giúp bạn đọc tin tức nhanh hơn khi đi từ Google vào, băng thông 3G cũng ít hơn. Để thử nghiệm, anh em vào Google gõ từ khóa: "Thử nghiệm đi nhờ Uber tinhte.vn", bấm vào link của Tinh tế là sẽ thấy trang AMP xuất hiện.

    Nhưng ngặt cái AMP lại không thể tương tác nhiều, nó là một trang HTML tĩnh và chủ yếu chỉ dành để đọc nội dung thôi chứ để comment, reply hay những tính năng khác là chuyện không thể (khi đi từ Google vào, còn nếu load riêng thì không tính), bạn buộc phải chuyển về web full mới làm được trò đó.

    Google nhận biết rõ điều đó, và họ có một cách khá thông minh để giải quyết vụ này: lần đầu web load lên sẽ là AMP, nhưng lần sau sẽ chuyển sang dùng PWA với Service Worker. Anh em developer nào quan tâm thì hãy vào link này để xem thêm.

    Vẫn còn phải một thời gian nữa PWA mới có thể được áp dụng rộng rãi, và cũng còn rất lâu nữa PWA mới thay được hoàn toàn cho web app truyền thống hoặc native app. Nhưng khi ngày đó diễn ra, trải nghiệm app của anh em chúng ta sẽ rất đơn giản, dễ dàng, nhanh chóng, thậm chí quên luôn cả App Store cũng được nữa.
     

    File đính kèm:

    Chia sẻ

    achxi, Usa Truong, halh14 người khác thích nội dung này.
    #1 Duy Luân, 19/5/17
    Sửa lần cuối: 21/5/17
  2. ngoanrazo

    Tham gia:
    28/6/09
    Được thích:
    1,235
    Best Answers:
    0
    ngoanrazo
    TÍCH CỰC
    Vậy em sắp thất nghiệp rồi sao ;(
     
  3. xtmg1

    Tham gia:
    17/1/08
    Được thích:
    1,739
    Best Answers:
    0
    xtmg1
    CAO CẤP
    Hiểu chết liền, hjhj
     
  4. huygapro

    Tham gia:
    12/5/09
    Được thích:
    933
    Best Answers:
    0
    huygapro
    TÍCH CỰC
    Vẫn thích app hơn web. Cảm giác vẫn nhanh hơn, mượt hơn. Tuy nhiên những cái ít dùng thì mình vẫn dùng web thay vì cài app

    Dù cái này có ra thì web vẫn không thể nào mượt bằng app được. Đơn giản là các thành phần giao diện của app đã được tải trước rồi, thay vì lúc xài mới tải. Và web muốn hoạt động được phải qua một thứ trung gian là trình duyệt nữa
     
    hoangtuhoahongdxpinkiekingkie thích nội dung này.
    1. huygapro

      Tham gia:
      12/5/09
      Được thích:
      933
      Best Answers:
      0
      huygapro
      TÍCH CỰC
      huygapro @hjhdahjdo Vậy nên vẫn cần có cả hai, cái nào phù hợp hơn thì dùng. Ví dụ mà app sẵn đó thì ưu tiên app hơn. Còn ít dùng hoặc không thể tải app thì dùng ưeb
       
    2. Duy Luân

      Duy Luân Không có gì!

      Tham gia:
      16/2/08
      Được thích:
      242,577
      Best Answers:
      3
      Duy Luân
      VIP
      Duy Luân @huygapro 1. PWA cho phép tải trước khung app, không lo nha.
      2. Trình duyệt thì máy nào cũng có, bạn yên tâm.
      3., Hiệu năng: đồng ý là về lý thuyết không bao giờ hiệu năng cao bằng, nhưng khi bạn làm tốt thì cái hiệu năng mà người dùng cảm nhận được (perception) sẽ như nhau. Vậy là đủ chơi rồi.
       
    3. huygapro

      Tham gia:
      12/5/09
      Được thích:
      933
      Best Answers:
      0
      huygapro
      TÍCH CỰC
      huygapro @Duy Luân 2. Ý mình là qua trình duyệt thì hiệu năng của nó sẽ phụ thuộc vào trình duyệt, chứ không phải lo không có trình duyệt.
       
    4. longtth

      Tham gia:
      11/11/08
      Được thích:
      130
      Best Answers:
      0
      longtth
      ĐẠI BÀNG
      longtth @huygapro vấn đề cách xử lý data thôi bác, bây giờ người ta còn nén hết tất tần tật cái khung của web sẵn trên local, khi mở ra chỉ cần check server không có update thì tải thông tin về và hiển thị lên thôi í :)
      khi
       
  5. Phụng Sồ

    Tham gia:
    1/12/11
    Được thích:
    173
    Best Answers:
    0
    Phụng Sồ
    ĐẠI BÀNG
    hay lắm, đợi các bên mở thêm api của trình duyệt thì càng tốt, ko cần phải cài app mà UX/UI vẫn như xài app
     
  6. doccoc

    Tham gia:
    27/1/10
    Được thích:
    1,147
    Best Answers:
    0
    doccoc
    TÍCH CỰC
    đủ hàm API để nó làm đc sao?
    Tương tác và trải nghiệm k biết thế nào nhỉ
     
  7. Apple Haters 2.01

    Tham gia:
    13/5/14
    Được thích:
    8,493
    Best Answers:
    0
    Apple Haters 2.01
    VIP
    :D google đẻ nhiều quá mà chả biết thằng nào sẽ lớn tiếp, thằng nào sẽ bị dẹo.
     
  8. adagioleonard

    Tham gia:
    1/3/12
    Được thích:
    3,754
    Best Answers:
    0
    adagioleonard
    VIP
    App nào cũng nhẹ nhanh mượt như Lite messenger thì tốt
     
    1. drcongII

      Tham gia:
      27/9/09
      Được thích:
      62
      Best Answers:
      0
      drcongII
      ĐẠI BÀNG
      drcongII @adagioleonard Lite Messenger ko cho đt như bản full, đt cùi mà đang cài bản full vì có nhu cầu đt qua messenger nhiều. hic hic
       
  9. luanth

    Tham gia:
    17/11/10
    Được thích:
    7,412
    Best Answers:
    0
    luanth
    VIP
    Chrome đi con đường quá tốt giờ có bị một chỗ là nó bán quảng cáo nên ko chủ độgn cho trình duyệt chặn quảng cáo được. Trên máy tính phải cài abp, còn mobile vô phương
     
  10. thanhphat95

    Tham gia:
    6/8/13
    Được thích:
    964
    Best Answers:
    0
    thanhphat95
    TÍCH CỰC
    Mình ko thích web app kiểu này chút nào hết vì nó load quá chậm, phụ thuộc nhiều vào trình duyệt. Cái AMP thấy trên facebook có rồi đấy.
     
    1. Duy Luân

      Duy Luân Không có gì!

      Tham gia:
      16/2/08
      Được thích:
      242,577
      Best Answers:
      3
      Duy Luân
      VIP
      Duy Luân @thanhphat95 Facebook là Instant Article nha :D idea giống với Google nhưng nhờ độ phủ của Facebook nên nhiều người xài hơn nhiều
       
  11. ngo Nhut Truong

    Tham gia:
    16/5/13
    Được thích:
    1,250
    Best Answers:
    0
    ngo Nhut Truong
    TÍCH CỰC
    nói chung vẫn thấy không ổn cho lắm, gồ làm cai extensions bao lâu rùi nhưng sài chơi ổn chứ chuyên nghiệp thì thua xa native
     
  12. zerglingno3

    Tham gia:
    4/3/15
    Được thích:
    47
    Best Answers:
    0
    zerglingno3
    ĐẠI BÀNG
    nói nhiều nhưng công nghệ này làm được rất ít . Hiệu năng quan trọng thì chẳng cải thiện duoc . Nói chung chỉ để làm web nhỏ và có thể chạy dc trên điện thoại ngay cả khi nó offline => hết
     
    1. kaoxofuto

      Tham gia:
      29/3/10
      Được thích:
      63
      Best Answers:
      0
      kaoxofuto
      ĐẠI BÀNG
      kaoxofuto @zerglingno3 Bạn có xài https://mobile.twitter.com thử chưa?
       
      helizus thích nội dung này.
    2. zerglingno3

      Tham gia:
      4/3/15
      Được thích:
      47
      Best Answers:
      0
      zerglingno3
      ĐẠI BÀNG
      zerglingno3 @kaoxofuto mới thử link của bạn gửi . Nhưng vấn đề là không có cải thiện về hiệu năng vẫn là webview , nhiều công nghệ như thế này rồi
       
  13. kaoxofuto

    Tham gia:
    29/3/10
    Được thích:
    63
    Best Answers:
    0
    kaoxofuto
    ĐẠI BÀNG
    Bài rất hay, mình cũng đang tìm hiểu PWA cho cty trong tương lai :)
     
  14. dinhdoong

    Tham gia:
    7/6/11
    Được thích:
    148
    Best Answers:
    0
    dinhdoong
    ĐẠI BÀNG
    công nghệ tiến bộ kinh thật
     
  15. boyugly01

    Tham gia:
    28/5/12
    Được thích:
    40
    Best Answers:
    0
    boyugly01
    ĐẠI BÀNG
    T đang làm cordova hybrid app, cái này phụ thuộc nhiều vào plugins, nhưng ko ổn định lắm, cụ tỉ là IOS build thẳng bằng xcode vào máy thì plugin chạy, build bằng command line thì ko chạy :oops:. Không biết cái này có khá hơn k ?
     
    1. Duy Luân

      Duy Luân Không có gì!

      Tham gia:
      16/2/08
      Được thích:
      242,577
      Best Answers:
      3
      Duy Luân
      VIP
      Duy Luân @boyugly01 Hiện tại build app dạng cross platform mình vẫn thích React Native hơn. RN quen thuộc, dễ chịu, dễ tích hợp với native, lại có back bởi Facebook và Airbnb thì không thằng nào là không cân được :D

      iOS hỗ trợ cho PWA chán phèo. Bữa cũng tính làm PWA cho 1 project của mình, nhưng đọc xong tính tương thích là từ bỏ luôn
       
      boyugly01 thích nội dung này.
    2. kaoxofuto

      Tham gia:
      29/3/10
      Được thích:
      63
      Best Answers:
      0
      kaoxofuto
      ĐẠI BÀNG
      kaoxofuto @Duy Luân Chuẩn luôn, code RN rất là thích luôn :D
       
    3. up209d

      Tham gia:
      4/5/10
      Được thích:
      193
      Best Answers:
      0
      up209d
      ĐẠI BÀNG
      up209d @boyugly01 Mình nghĩ bạn nên qua React Native, giờ này Hybrid app cordova ngáp ngáp rùi
       
    4. boyugly01

      Tham gia:
      28/5/12
      Được thích:
      40
      Best Answers:
      0
      boyugly01
      ĐẠI BÀNG
      boyugly01 @up209d Khách yêu cầu làm thì vẫn phải vùng vẫy thôi, hơn nữa lại là khách nhật :rolleyes:
       
      up209d thích nội dung này.
    5. Duy Luân

      Duy Luân Không có gì!

      Tham gia:
      16/2/08
      Được thích:
      242,577
      Best Answers:
      3
      Duy Luân
      VIP
      Duy Luân @up209d Mình làm RN nè hihi. Hồi đó cân nhắc Cordova nhưng không thơm nên nhảy
       
      up209d thích nội dung này.
  16. superboyvc

    Tham gia:
    19/4/11
    Được thích:
    789
    Best Answers:
    0
    superboyvc
    TÍCH CỰC
    Tuy không bằng được native nhưng nếu app lấy dữ liệu từ cache nhiều thì thì việc lần đầu load chậm những lần sau load nhanh là chuyện hoàn toàn khả thi, tuy nhiên việc quản lý cache phải được tăng cường lên nhiều chứ không thể để cái chrome thành 1 cục nặng nề vài GB được -_-
     
    1. Duy Luân

      Duy Luân Không có gì!

      Tham gia:
      16/2/08
      Được thích:
      242,577
      Best Answers:
      3
      Duy Luân
      VIP
      Duy Luân @superboyvc Đây cũng là cái mình lo ngại :D nhưng nó cũng chỉ cache cái khung app thôi, chắc không cache data đâu hihi
       
  17. Lol #₫_&-+()/

    Tham gia:
    26/12/16
    Được thích:
    46
    Best Answers:
    0
    Lol #₫_&-+()/
    ĐẠI BÀNG
    Cần web app cho messenger
     
    1. Duy Luân

      Duy Luân Không có gì!

      Tham gia:
      16/2/08
      Được thích:
      242,577
      Best Answers:
      3
      Duy Luân
      VIP
      Duy Luân @Lol #₫_&-+()/ Giờ nó đã là web app rồi mà :D
       
    2. haiaune

      Tham gia:
      23/6/09
      Được thích:
      631
      Best Answers:
      0
      haiaune
      TÍCH CỰC
      haiaune @Duy Luân Không hiểu lắm nhưng mình vào trang web https://www.clubxiangqi.com/vi/ bằng điện thoại hay ipad đánh cờ tướng touch ngon lành
       
  18. hoangphithanh

    Tham gia:
    15/12/13
    Được thích:
    869
    Best Answers:
    0

Chia sẻ

Đang tải...