Bạn quan tâm đến việc học JavaScript? Nhận ebook của tôi tại jshandbook.com
Ứng dụng web tiến bộ (PWA) là xu hướng mới nhất trong phát triển ứng dụng di động sử dụng công nghệ web. Tại thời điểm viết bài (đầu năm 2018), chúng chỉ áp dụng cho các thiết bị Android .
PWA sẽ sớm có trên iOS 11.3 và macOS 10.13.4.
WebKit, công nghệ nền tảng của Safari và Mobile Safari, gần đây (tháng 8 năm 2017) đã tuyên bố rằng họ đã bắt đầu làm việc để giới thiệu Service worker vào trình duyệt. Điều này có nghĩa là chúng sẽ sớm cập bến các thiết bị iOS. Vì vậy, khái niệm Ứng dụng web tiến bộ có thể sẽ được áp dụng cho iPhone và iPad, nếu Apple quyết định khuyến khích cách tiếp cận này.
Đó không phải là một công nghệ mới mang tính đột phá mà là một thuật ngữ mới 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à ứng dụng có thể cung cấp các tính năng bổ sung dựa trên những gì thiết bị hỗ trợ , 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 cũng như bộ nhớ đệm cục bộ của các tài nguyên.
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ất ứng dụng sử dụng ngăn xếp web. Điều này 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 các tác động 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ừ việc giảm ma sát khi lắp đặt và 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, thì Google tìm kiếm có thể mang lại 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 trở nên 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ó gần giống như làm việc trên 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 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ộ. Họ thậm chí còn yêu cầu người dùng thêm ứng dụng vào màn hình chính khi người dùng đó truy cập một trang web như vậy.
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ột thuật ngữ khó hiểu và một định nghĩa hay là:ứng dụng web tận dụng các tính năng của trình duyệt hiện đại (như web worker và 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 dành cho thiết bị 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 luận khác nhau và các phương pháp hay nhất. Ví dụ:nếu bạn có một nhóm nhỏ hoặc bạn là một nhà phát triển đơn lẻ đang xây dựng một ứng dụng 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ệ và môi trường. Bạn cũng sẽ dành nhiều thời gian để quản lý các thư viện khác nhau và sử dụng các quy trình công 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.
Một số nền tảng phổ biến nhất là Phonegap và Ionic Framework, trong số 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ộ.
Ban đầu tôi đưa Xamarin vào danh sách, nhưng Carlos Eduardo Pérez đã chỉ ra một cách chính xác rằng Xamaring tạo ra mã gốc.
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ơi ý tưởng. 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 tạo ứng dụng bằng JavaScript, HTML và CSS, điều này thật tuyệt vời. Các khả năng của thiết bị (micrô, máy ảnh, mạng, gps…) được hiển thị 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ể quyết định đưa ra một mẫu số chung. Điều này có hiệu quả 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 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.
Ứ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 lai, là học một lần, viết ở bất kỳ đâu. Điều này có 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 các đối thủ cạnh tranh chính ứ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ì?
Hãy nhớ - hiện tại, Ứng dụng web tiến bộ chỉ dành cho thiết bị Android.
Tính năng
Ứ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 cho cửa hàng ứng dụng.
Đây là một lợi thế quan trọng. Cửa hàng ứng dụng 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% hàng đầu, bạn sẽ không nhận được nhiều lợi ích từ việc có một vị trí nhỏ trên App Store.
Ứng dụng web tiến bộ có thể khám phá được bằng Công cụ tìm kiếm và khi người dùng truy cập trang web của bạn có khả năng PWA, trình duyệt kết hợp với thiết bị sẽ 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, bởi 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 nhiều vào việc mua lại có trả tiền.
Không ở trong App Store có nghĩa là bạn không cần sự chấp thuận của Apple hoặc Google ở trong túi người dùng. 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 để làm cho một số tính năng chính khả thi. Nếu bạn còn nhớ, iPhone đời đầu không có tùy chọn phát triển các ứng dụng gốc. Các nhà phát triển được yêu cầu phát triển các ứ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ụng nhân viên dịch vụ cho phép ứng dụng luôn có nội dung mới, có thể được tải xuống trong nền và cung cấp hỗ trợ cho thông báo đẩy mang lại cơ hội tương tác lại lớn hơn.
Ngoài ra, khả năng tạo bóng mang lại 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.
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ộ?
- 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.
- Không có mã nền tảng gốc
- Chi phí chuyển đổi thấp hơn (thuyết phục người dùng cài đặt ứng dụng khó hơn nhiều so với việc truy cập trang web để có trải nghiệm lần đầu tiên)
- 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
- Họ 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
- Đáp ứng :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à giống như 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
- Mới :ứng dụng tự cập nhật và nội dung sau khi trực tuyến
- An toàn :nó sử dụng HTTPS
- Tiến bộ :nó sẽ hoạt động trên mọi thiết bị, kể cả thiết bị cũ hơn, ngay cả khi nó có ít tính năng hơn (ví dụ:chỉ như một trang web, không thể cài đặt được)
- Có thể liên kết :thật dễ dàng để trỏ đến nó bằng cách 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ằng Service Worker là một phần bắt buộc của Ứng dụng web tiến bộ .
CẢNH BÁO:Nhân viên Dịch vụ hiện chỉ được hỗ trợ bởi Chrome (Máy tính để bàn và Android), Firefox và Opera. Xem https://caniuse.com/#feat=serviceworkers để biết dữ liệu cập nhật về hỗ trợ.
MẸO:Đừng nhầm lẫn Nhân viên Dịch vụ với Nhân viên Web. 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 dịch vụ bộ nhớ cache, tăng tốc độ hiển thị ứng dụng và 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. Trong lần truy cập đầu tiên, Service worker được cài đặt và sau đó trong các lần truy cập tiếp theo vào các trang riêng biệt của trang web, Service Worker này sẽ được gọi.
Xem hướng dẫn đầy đủ về 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 liên kết đến tệp kê khai trong mọi tiêu đề trên mỗi trang của 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
- Vị trí của các biểu tượng, ở nhiều kích thước khác nhau
- URL bắt đầu, liên quan đến tên miền
- Hướng mặc định
- Màn hình giật gân
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" }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ại https://www.w3.org/TR/appmanifest/
App Shell
App Shell không phải là một công nghệ mà là một khái niệm thiết kế. Nó 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 đó, để tạo cho người dùng một ấn tượng giống như ứng dụng tốt.
Ví dụ:lấy đề xuất của Nguyên tắc giao diện con người của Apple để sử dụng màn hình giật gân giống với giao diện người dùng. Điều này cung cấp một gợi ý tâm lý được tìm thấy để giảm bớt nhận thức rằng ứng dụng mất nhiều thời gian để tải.
Bộ nhớ đệm
App Shell được lưu vào bộ nhớ đệm 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.
Bạn quan tâm đến việc học JavaScript? Nhận ebook của tôi tại jshandbook.com