Hướng dẫn hoàn chỉnh về ứng dụng web tiến bộ

Ứng dụng web tiến bộ là một ứng dụng có thể cung cấp các tính năng bổ sung dựa trên sự hỗ trợ của thiết bị, bao gồm khả năng ngoại tuyến, thông báo đẩy, giao diện và tốc độ gần như ứng dụng gốc cũng như bộ nhớ đệm cục bộ của các tài nguyên

Giới thiệu

Ứng dụng web tiến bộ (PWA) là xu hướng mới nhất củaphát triển ứng dụng di độngsử dụng công nghệ web, tại thời điểm viết bài (tháng 3 năm 2018) hoạt động trên các thiết bị Android và iOS chạy iOS 11.3 trở lên và macOS 10.13.4 trở lên.

PWA là một thuật ngữ xác định một nhóm các kỹ thuật có mục tiêu tạo ra trải nghiệm tốt hơn cho các ứng dụng dựa trên web.

Ứng dụng web tiến bộ là gì

Ứng dụng web tiến bộ là một ứng dụngcó thể cung cấp các tính năng bổ sung dựa trên sự hỗ trợ của thiết bị, cung cấp khả năng ngoại tuyến, thông báo đẩy, giao diện và tốc độ ứng dụng gần như nguyên bản, đồng thời lưu trữ tài nguyên cục bộ.

Kỹ thuật này ban đầu được Google giới thiệu vào năm 2015 và được chứng minh là mang lại nhiều lợi thế cho cả nhà phát triển và người dùng.

Các nhà phát triển có quyền truy cập vào tòa nhàgần như hạng nhấtcác ứng dụng sử dụng ngăn xếp web, luôn dễ dàng và rẻ hơn đáng kể so với việc xây dựng các ứng dụng gốc, đặc biệt là khi xem xét ý nghĩa của việc xây dựng và duy trì các ứng dụng đa nền tảng.

Các nhà phát triển có thể hưởng lợi từ mộtgiảm ma sát cài đặt, tại thời điểm mà việc có một ứng dụng trong cửa hàng không thực sự mang lại bất cứ điều gì về khả năng phát hiện cho 99,99% ứng dụng và Google tìm kiếm có thể cung cấp những lợi ích tương tự nếu không muốn nói là nhiều hơn.

Ứng dụng web tiến bộ là một trang web được phát triển với một số công nghệ nhất định làm cho trải nghiệm trên thiết bị di động dễ chịu hơn nhiều so với một trang web được tối ưu hóa cho thiết bị di động thông thường, đến mức nó gần như hoạt động giống như một ứng dụng gốc, vì nó cung cấp các tính năng sau:

  • Hỗ trợ ngoại tuyến
  • Tải nhanh
  • An toàn
  • Có khả năng phát ra thông báo đẩy
  • Có trải nghiệm người dùng toàn màn hình, sống động mà không cần thanh URL

Nền tảng di động (Android tại thời điểm viết bài, nhưng nó không giới hạn về mặt kỹ thuật) cung cấp hỗ trợ ngày càng tăng cho Ứng dụng web tiến bộ đến mức yêu cầu người dùngthêm ứng dụng vào màn hình chínhkhi họ phát hiện một trang web mà người dùng đang truy cập là PWA.

Nhưng trước tiên, hãy làm rõ một chút về tên gọi.Ứng dụng web tiến bộcó thể là mộtthuật ngữ khó hiểu, và một định nghĩa tốt làcác ứng dụng web tận dụng các tính năng của trình duyệt hiện đại (nhưnhân viên webvà tệp kê khai ứng dụng web) để cho phép thiết bị di động của họ "nâng cấp" ứng dụng lên vai trò của ứng dụng công dân hạng nhất.

Các lựa chọn thay thế Ứng dụng web tiến bộ

PWA đứng như thế nào so với các lựa chọn thay thế khi nói đến việc xây dựng trải nghiệm trên thiết bị di động?

Hãy tập trung vào ưu và nhược điểm của từng loại, và hãy xem PWA phù hợp ở đâu.

Ứng dụng di động gốc

Ứng dụng dành cho thiết bị di động gốc là cách rõ ràng nhất để xây dựng một ứng dụng dành cho thiết bị di động. Objective-C hoặc Swift trên iOS, Java / Kotlin trên Android và C # trên Windows Phone.

Mỗi nền tảng có giao diện người dùng và quy ước UX riêng và các widget gốc cung cấp trải nghiệm mà người dùng mong đợi. Chúng có thể được triển khai và phân phối thông qua App Store của nền tảng.

Điểm khó khăn chính với các ứng dụng gốc là phát triển đa nền tảng đòi hỏi phải học hỏi, nắm vững và cập nhật nhiều phương pháp khác nhau và các phương pháp hay nhất, vì vậy, nếu bạn có một nhóm nhỏ hoặc thậm chí bạn là một nhà phát triển đơn lẻ đang xây dựng một ứng dụng, chẳng hạn như trên 3 nền tảng, bạn cần dành nhiều thời gian tìm hiểu công nghệ cũng như môi trường, quản lý các thư viện khác nhau và sử dụng các quy trình làm việc khác nhau (ví dụ: iCloud chỉ hoạt động trên thiết bị iOS, không có phiên bản Android).

Ứng dụng kết hợp

Các ứng dụng kết hợp được xây dựng bằng Công nghệ Web, nhưng được triển khai trên App Store. Ở giữa là một khuôn khổ hoặc một số cách để đóng gói ứng dụng để có thể gửi nó để xem xét đến App Store truyền thống.

Hầu hết các nền tảng phổ biến là Phonegap, Xamarin, Ionic Framework và nhiều nền tảng khác, và thông thường những gì bạn thấy trên trang là một WebView về cơ bản tải một trang web cục bộ.

Khía cạnh quan trọng của Ứng dụng kết hợp làviết một lần, chạy mọi nơikhái niệm, mã nền tảng khác nhau được tạo tại thời điểm xây dựng và bạn đang xây dựng ứng dụng bằng cách sử dụngJavaScript, HTML và CSS, thật tuyệt vời và các khả năng của thiết bị (micrô, máy ảnh, mạng, gps…) được thể hiện thông qua các API JavaScript.

Phần tồi tệ của việc xây dựng các ứng dụng kết hợp là trừ khi bạn hoàn thành xuất sắc công việc, bạn có thể giải quyết việc cung cấp một mẫu số chung, tạo ra một ứng dụng dưới mức tối ưu trên tất cả các nền tảng một cách hiệu quả vì ứng dụng đang bỏ qua các nguyên tắc tương tác giữa người và máy tính dành riêng cho nền tảng .

Ngoài ra, hiệu suất cho các chế độ xem phức tạp có thể bị ảnh hưởng.

Các ứng dụng được xây dựng bằng React Native

React Native hiển thị các điều khiển gốc của thiết bị di động thông qua API JavaScript, nhưng bạn đang tạo một ứng dụng gốc một cách hiệu quả chứ không phải nhúng trang web vào bên trong WebView.

Phương châm của họ, để phân biệt cách tiếp cận này với các ứng dụng kết hợp, làhọc một lần, viết ở bất cứ đâu, nghĩa là cách tiếp cận giống nhau trên các nền tảng, nhưng bạn sẽ tạo các ứng dụng hoàn toàn riêng biệt để cung cấp trải nghiệm tuyệt vời trên mỗi nền tảng.

Hiệu suất có thể so sánh với các ứng dụng gốc, vì những gì bạn xây dựng về cơ bản là một ứng dụng gốc, được phân phối thông qua App Store.

Các tính năng của Ứng dụng web tiến bộ

Trong phần trước, bạn đã thấy chínhđối thủ cạnh tranhứng dụng web tiến bộ. Vậy PWA đứng như thế nào so với chúng, và các tính năng chính của chúng là gì?

Remember, currently Progressive Web Apps are Android-only IOS support was added in March 2019

Đặc trưng

Các ứng dụng Web tiến bộ có một điểm khác biệt hoàn toàn với các cách tiếp cận ở trên:chúng không được triển khai vào cửa hàng ứng dụng..

Đây là một lợi thế quan trọng, vì cửa hàng ứng dụng sẽ có lợi nếu bạn có phạm vi tiếp cận và may mắn được giới thiệu, điều này có thể khiến ứng dụng của bạn trở nên lan truyền, nhưng trừ khi bạn nằm trong 0,001%, bạn sẽ không nhận được nhiều lợi ích từ có vị trí nhỏ của bạn trên App Store.

Ứng dụng web tiến bộ làcó thể khám phá bằng Công cụ Tìm kiếmvà khi người dùng truy cập vào trang web của bạn, trang có khả năng PWA,trình duyệt kết hợp với thiết bị hỏi người dùng xem họ có muốn cài đặt ứng dụng vào màn hình chính không. Điều này là rất lớn vì SEO thông thường có thể áp dụng cho PWA của bạn, dẫn đến việc ít phụ thuộc hơn vào việc mua lại có trả tiền.

Không có trong App Store có nghĩa làbạn không cần sự chấp thuận của Apple hoặc Googlephù hợp với túi tiền của người dùng và bạn có thể phát hành các bản cập nhật khi bạn muốn mà không cần phải trải qua quy trình phê duyệt tiêu chuẩn vốn thường thấy của các ứng dụng iOS.

PWA về cơ bản là các ứng dụng HTML5 / trang web đáp ứng trên steroid, với một số công nghệ chính đã được giới thiệu gần đây giúp làm cho một số tính năng chính khả thi. Nếu bạn còn nhớ iPhone ban đầu ra đời không có tùy chọn phát triển ứng dụng gốc và các nhà phát triển được yêu cầu phát triển ứng dụng di động HTML5, có thể được cài đặt vào màn hình chính, nhưng công nghệ hồi đó chưa sẵn sàng cho việc này.

Ứng dụng web tiến bộchạy ngoại tuyến.

Việc sử dụngcông nhân dịch vụcho phép ứng dụng luôn có nội dung mới và tải xuống trong nền và cung cấp hỗ trợ chothông báo đẩyđể cung cấp cơ hội tương tác lại lớn hơn.

Ngoài ra, khả năng chia sẻ tạo ra trải nghiệm tốt hơn nhiều cho những người dùng muốn chia sẻ ứng dụng của bạn, vì họ chỉ cần một URL.

Những lợi ích

Vậy tại sao người dùng và nhà phát triển nên quan tâm đến Ứng dụng web tiến bộ?

  1. PWA nhẹ hơn. Ứng dụng gốc có thể nặng 200MB trở lên, trong khi PWA có thể nằm trong phạm vi KB.
  2. Không có mã nền tảng gốc
  3. Giảm chi phí chuyển đổi (khó hơn nhiều để thuyết phục người dùng cài đặt ứng dụng hơn là truy cập trang web để có trải nghiệm lần đầu tiên)
  4. Cần ít nỗ lực hơn đáng kể để xây dựng và phát hành các bản cập nhật
  5. Hỗ trợ nhiều hơn cho các liên kết sâu so với các ứng dụng cửa hàng ứng dụng thông thường

Khái niệm cốt lõi

  • Phản ứng nhanh nhẹn: giao diện người dùng thích ứng với kích thước màn hình thiết bị
  • Cảm giác giống như ứng dụng: nó không giống như một trang web, mà là một ứng dụng càng nhiều càng tốt
  • Hỗ trợ ngoại tuyến: nó sẽ sử dụng bộ nhớ thiết bị để cung cấp trải nghiệm ngoại tuyến
  • Có thể cài đặt: trình duyệt thiết bị nhắc người dùng cài đặt ứng dụng của bạn
  • Thu hút lại: thông báo đẩy giúp người dùng khám phá lại ứng dụng của bạn sau khi cài đặt
  • Có thể khám phá: công cụ tìm kiếm và tối ưu hóa SEO có thể cung cấp nhiều người dùng hơn so với cửa hàng ứng dụng
  • Tươi: ứng dụng tự cập nhật và nội dung khi trực tuyến
  • An toàn: sử dụng HTTPS
  • Cấp tiến: nó sẽ hoạt động trên bất kỳ thiết bị nào, ngay cả thiết bị cũ hơn, ngay cả khi có ít tính năng hơn (ví dụ: chỉ như một trang web, không thể cài đặt)
  • Có thể liên kết: dễ dàng trỏ đến nó, sử dụng URL

Nhân viên dịch vụ

Một phần của định nghĩa Ứng dụng web tiến bộ là nó phải hoạt động ngoại tuyến.

Vì thứ cho phép ứng dụng web hoạt động ngoại tuyến là Service Worker, điều này ngụ ý rằngNhân viên dịch vụ là một phần bắt buộc của Ứng dụng web tiến bộ.

Xemhttp://caniuse.com/#feat=serviceworkerscho dữ liệu cập nhật về hỗ trợ trình duyệt.

MẸO: Đừng nhầm lẫn Service worker với Web worker. Chúng là một thứ hoàn toàn khác.

Service Worker là một tệp JavaScript hoạt động như một người trung gian giữa ứng dụng web và mạng. Vì điều này, nó có thể cung cấp các dịch vụ bộ nhớ cache và tăng tốc độ hiển thị ứng dụng cũng như cải thiện trải nghiệm người dùng.

Vì lý do bảo mật, chỉ các trang HTTPS mới có thể sử dụng Nhân viên dịch vụ và đây là một phần lý do tại sao Ứng dụng web tiến bộ phải được cung cấp thông qua HTTPS.

Nhân viên dịch vụ không khả dụng trên thiết bị vào lần đầu tiên người dùng truy cập ứng dụng. Điều gì sẽ xảy ra là lần truy cập đầu tiên, trình nhân viên web được cài đặt, và sau đó trong những lần truy cập tiếp theo vào các trang riêng biệt của trang web sẽ gọi Trình làm việc dịch vụ này.

Kiểm trahướng dẫn đầy đủ cho Nhân viên dịch vụ

Tệp kê khai ứng dụng

Tệp kê khai ứng dụng là tệp JSON mà bạn có thể sử dụng để cung cấp thông tin thiết bị về Ứng dụng web tiến bộ của mình.

Bạn thêm một liên kết đến tệp kê khai trongtất cảtiêu đề trang web của bạn:

<link rel="manifest" href="/manifest.webmanifest">

Tệp này sẽ cho thiết bị biết cách thiết lập:

  • Tên và tên viết tắt của ứng dụng
  • Các vị trí biểu tượng, với nhiều kích cỡ khác nhau
  • URL bắt đầu, liên quan đến miền
  • Hướng mặc định
  • Màn hình giật gân

Thí 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"
}

Tệp kê khai ứng dụng là Bản nháp làm việc của W3C, có thể truy cập tạihttps://www.w3.org/TR/appmanifest/

Vỏ ứng dụng

App Shell không phải là một công nghệ mà là mộtý tưởng thiết kếnhằm mục đích tải và hiển thị vùng chứa ứng dụng web trước tiên và nội dung thực tế ngay sau đó, để mang lại cho người dùng ấn tượng giống như ứng dụng tốt.

Điều này tương đương với đề xuất HIG của Apple (Nguyên tắc về giao diện con người) để sử dụng màn hình giật gân giống với giao diện người dùng, để đưa ra một gợi ý tâm lý được cho là làm giảm nhận thức về ứng dụng mất nhiều thời gian tải.

Bộ nhớ đệm

App Shell được lưu trong bộ nhớ cache riêng biệt với nội dung và nó được thiết lập để truy xuất các khối xây dựng shell từ bộ nhớ cache sẽ mất rất ít thời gian.

Tìm hiểu thêm về App Shell tạihttps://developers.google.com/web/updates/2015/11/app-shell

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn khác về trình duyệt: