PWA: Chào mừng bạn đến với cuộc cách mạng di động

Cũng giống như thiết kế web đáp ứng đã đóng khoảng cách giữa các trang web dành cho máy tính để bàn và thiết bị di động một vài năm trước, kỹ thuật ứng dụng web tiến bộ hiện đang thu hẹp khoảng cách giữa web và thế giới ứng dụng. Với trải nghiệm người dùng từ máy tính để bàn đến các ứng dụng di động hội tụ nhanh, có vẻ như một internet có hiệu quả hơn, hiệu quả hơn đang phát triển – mặc dù chắc chắn không phải thay đổi đáng kể đối với mã di truyền cơ bản của nó.

Rõ ràng có một số áp lực chọn lọc quan trọng thúc đẩy điều này. Trước hết, việc tạo ứng dụng gốc cho mọi ngách không nhất thiết là sử dụng tài nguyên hiệu quả: người dùng kết thúc với hàng trăm ứng dụng lớn lãng phí băng thông và không gian đĩa có giá trị và các công ty chi tiêu rất nhiều tiền chỉ tạo ứng dụng cho họ sau phiên bản đầu tiên của họ. Và hầu hết các ứng dụng này chỉ được điều khiển bởi nội dung web: thông tin đến từ các dịch vụ web hoặc hệ thống quản lý nội dung.

Định nghĩa của một ứng dụng web tiến bộ không phải là cụ thể. PWA chỉ là một ứng dụng web sử dụng một số API và khả năng mới trong nền tảng web bằng cách sử dụng cải tiến nâng cao để cung cấp trải nghiệm giống như ứng dụng trên mọi nền tảng với cùng cơ sở mã. Đó là một tập hợp các phương pháp hay nhất và sử dụng API để tạo trải nghiệm giống như ứng dụng tuyệt vời cho người dùng của bạn, vì vậy nó không giống như bạn có hoặc không có PWA; nó giống như trang web của bạn là nhiều hơn hoặc ít hơn PWA.

Sự gia tăng của PWA

Ứng dụng web nâng cao: máy tính để bàn

Với PWA trên máy tính để bàn, thiết kế web đáp ứng có ý nghĩa mới vì chúng tôi cần hỗ trợ chế độ xem thực sự nhỏ và cung cấp chế độ xem dựa trên tiện ích của nội dung của chúng tôi

Trong khi tên PWA được đặt ra vào năm 2015 trong bài viết Escaping Tabs Without Losing Soul của chúng tôi bởi Alex Russell làm việc tại Google cho nhóm Chrome, cuộc hành trình của họ đã không thực sự bắt đầu ở đó. Chúng tôi từng có các ứng dụng HTML (HTAs), được tạo bởi Microsoft vào năm 1999, cùng với nhiều nền tảng ứng dụng web khác từ Nokia, BlackBerry và các công ty khác. Sau đó, trong năm 2007, Steve Jobs trình bày những gì đã được tại thời điểm cách duy nhất để tạo ra các ứng dụng cho iPhone gốc: PWAs, mặc dù với một tên khác nhau. Chrome bắt đầu từ đó, cải thiện các API một vài năm sau đó và phát minh ra tên PWA.

Với rất nhiều trải nghiệm thất bại trước đây đang cố gắng mang nội dung web đến với thế giới ứng dụng, tại sao chúng tôi nghĩ rằng nó sẽ hoạt động ngay bây giờ? Chủ yếu là, các công ty hiện đang làm việc và thúc đẩy các công nghệ đằng sau PWA, chẳng hạn như Microsoft, Google, Apple và Mozilla, để đặt tên nhưng một số ít. Ngoài ra, hiệu suất của nền tảng web đạt đến một điểm mà không có sự khác biệt nhận thức khi bạn so sánh một PWA được thiết kế tốt với một ứng dụng gốc. Những điều kiện đó chưa bao giờ tồn tại trước đó và đó là một lý do khiến cộng đồng web đã quyết định rằng đã đến lúc cho PWA.

PWA hành động hôm nay

Ứng dụng web nâng cao: nội dung

Để cung cấp trải nghiệm người dùng tốt cho người dùng iOS của bạn, bạn phải cung cấp nội dung cụ thể cho Apple

PWA ngày nay có đầy đủ chức năng và có thể cài đặt trên:

  • Android với hầu hết các trình duyệt, với Chrome mang lại trải nghiệm tốt nhất
  • iOS với Safari
  • Chromebook
  • Windows 10 từ Cửa hàng Microsoft
  • Tính năng điện thoại với KaiOS – một ngã ba từ hệ điều hành Firefox – hiện có sẵn cho hàng triệu người dùng chủ yếu ở Ấn Độ

Hỗ trợ cũng đến với MacOS, Windows và Linux thông qua Chrome vào cuối năm nay. Hôm nay nó có sẵn như một cờ thử nghiệm 'Desktop PWA' nếu bạn muốn thử nó ngay bây giờ. Cài đặt trên Windows trên Edge mà không cần sử dụng của cửa hàng đang đến sau là tốt, mặc dù không có khung thời gian cụ thể được xác định.

Nếu bạn đọc lại danh sách, bạn có thể thấy mọi nền tảng có hoặc sắp có hỗ trợ cho PWA có thể cài đặt đầy đủ trong những tháng tiếp theo. Và bởi vì PWA chỉ là một trang web có các tính năng trên đầu sẽ chỉ được kích hoạt trên các trình duyệt tương thích, chúng tôi thậm chí có thể nói rằng nó tương thích với tất cả các trình duyệt từ chức năng cơ bản của nó.

Ngoài ra, PWA hiện đang được tạo ra từ hầu hết các CLI cho các khuôn khổ khác nhau, bao gồm Angular 6+ CLI, React Create App, PWA Starter Kit từ Polymer và Preact CLI. Cuối cùng, nhóm Ionic Framework đã đưa ra ý tưởng về Tụ điện, một sự thay thế Cordova nguồn mở làm cho PWA có thể có trên mọi cửa hàng ứng dụng.

Cài đặt

Ứng dụng web nâng cao: cài đặt

Trên các trình duyệt khác nhau, tùy chọn thủ công để cài đặt biểu tượng PWA là khác nhau; trên Windows 10, nó chỉ là một ứng dụng trong cửa hàng

Một trong những khía cạnh quan trọng của PWA là cài đặt ứng dụng. Quá trình này được thực hiện theo hai bước tùy chọn: tải xuống và lưu trữ ngoại tuyến các tệp của ứng dụng và cài đặt biểu tượng trong Hệ điều hành. Vì cả hai bước đều là tùy chọn, bạn có thể cung cấp trải nghiệm ngoại tuyến trong trình duyệt hoặc bạn có thể cung cấp biểu tượng mà không cần cài đặt ngoại tuyến. Nhưng một PWA thực sự nên bao gồm cả hai: nó phải được phục vụ với TLS dưới HTTPS và người dùng sẽ quyết định xem họ sẽ sử dụng nó trong trình duyệt hay trong biểu tượng được cài đặt riêng của nó.

Phát hành ngoại tuyến và ngay lập tức

Bộ não của PWA là nhân viên dịch vụ, một tệp JavaScript được cài đặt trên thiết bị của người dùng chịu trách nhiệm tải xuống tệp của ứng dụng, lưu trữ chúng vào bộ nhớ cache và sau đó phục vụ chúng khi cần. Khi nhân viên dịch vụ được cài đặt, nó hoạt động như một proxy mạng cho mọi tài nguyên mà ứng dụng web cần: nó có thể quyết định tìm nạp nó từ mạng hoặc phân phối nó từ bộ nhớ cache cục bộ, làm cho ứng dụng khả dụng ngoại tuyến và cũng có sẵn chỉ trong một vài phần nghìn giây ngay cả khi người dùng có kết nối, mô phỏng khởi chạy ứng dụng gốc.

Để cài đặt một nhân viên dịch vụ, tài liệu HTML của bạn sẽ cần phải bao gồm một cái gì đó như:

if ('serviceWorker' trong navigator) navigator.serviceWorker.register ("sw.js");

Điều đó sẽ cài đặt tệp "sw.js" vào thiết bị của người dùng cho thư mục hiện tại trong miền hiện tại – một khái niệm được gọi là phạm vi. Sau khi nó được cài đặt, các lần truy cập tiếp theo tới bất kỳ URL nào trong phạm vi của nó sẽ được quản lý bởi nhân viên dịch vụ đó.

Giả sử chúng ta có PWA với bốn tệp: index.html, app.js, app.css và logo.png. Điều đầu tiên là cài đặt các tệp đó vào bộ đệm trong tệp sw.js.

const resources = ["index.html", "app.js", "app.css", "logo.png"]; tự. addEventListener ("install", event => {event. waitUntil (caches.open ("myPWAcache") .then (cache => cache.addAll (tài nguyên)));});

Sau đó, để PWA luôn được phục vụ từ bộ nhớ cache, chúng tôi cần lắng nghe sự kiện tìm nạp trong nhân viên dịch vụ và quyết định chính sách bộ nhớ cache để sử dụng, chẳng hạn như bộ nhớ cache đầu tiên với đoạn mã sau.

self.addEventListener ("fetch", e => {e.respondWith (caches.match (e.request). sau đó (res => res || fetch (e.request)));});

Trong trường hợp này, mỗi khi người dùng truy cập PWA (cả từ trình duyệt hoặc từ một biểu tượng đã cài đặt), công cụ sẽ nhận các tệp từ bộ nhớ cache. Lợi thế của PWA so với ứng dụng gốc là các thiết bị không cần phải tải xuống lại tất cả các tệp khi có thay đổi, chỉ có tệp đã thay đổi với quy trình minh bạch. Ngoài ra, chúng tôi vẫn có thể tải xuống các phần của ứng dụng theo yêu cầu.

Nhưng thách thức là làm thế nào để bạn biết những tập tin đã được cập nhật trên máy chủ để bạn có thể thay thế chúng trong bộ nhớ cache? Nếu bạn không muốn viết một nhân viên dịch vụ cấp thấp để quản lý việc này, bạn có thể sử dụng thư viện mã nguồn mở Workbox, nó sẽ giúp bạn tạo ra nhân viên dịch vụ và các tệp kê khai tài nguyên để cập nhật gói đã cài đặt.

Lưu ý rằng các tệp PWA của bạn sẽ bị xóa nếu có áp lực lưu trữ trên thiết bị, trừ khi bạn yêu cầu Bộ nhớ ổn định nếu có:

if ('lưu trữ' trong navigator && 'persist' trong navigator.storage) navigator.storage.persist ();

Trên Chrome và hầu hết các trình duyệt Android, ứng dụng của bạn không thể sử dụng hơn 5% không gian có sẵn; trên iOS là 50MiB (gần 50MB) cho mỗi máy chủ; trong Edge nó thay đổi theo tổng kích thước bộ nhớ và trong Windows Store, nó không giới hạn.

Trải nghiệm hạng nhất

Ứng dụng web nâng cao: kỹ thuật cài đặt

Các cách khác nhau mà trình duyệt phải mời người dùng cài đặt PWA; trên iOS, bạn phải thực hiện thủ công

Chúng tôi có bộ não và bây giờ là lúc dành cho trái tim: bản kê khai ứng dụng web. Mục đích của việc biến một trang web thành PWA không chỉ để đảm bảo nó có sẵn một cách nhanh chóng hoặc trong khi ngoại tuyến mà còn cho phép nó có biểu tượng riêng trong hệ điều hành và cung cấp một trải nghiệm độc lập hoàn toàn giống như bất kỳ ứng dụng được cài đặt nào khác.

Tệp kê khai là tệp JSON định nghĩa siêu dữ liệu cho PWA được trình duyệt hoặc cửa hàng ứng dụng sử dụng để xác định hành vi cài đặt.

Tệp này định nghĩa một số thuộc tính làm siêu dữ liệu cho PWA của bạn. Mỗi hệ điều hành sẽ đọc các thuộc tính này và cố gắng hết sức để phù hợp với trải nghiệm bạn thích. Ví dụ: Android sẽ đọc 'hiển thị: độc lập' và tạo trải nghiệm ứng dụng thông thường. Với 'display: minimal-ui', nó sẽ tạo ra một trải nghiệm với một URL hiển thị và chứng chỉ TLS – hữu ích cho các ứng dụng nhạy cảm với bảo mật. Với 'display: fullscreen' nó tạo ra các ứng dụng hoàn toàn nhập vai mà không có thanh trạng thái hoặc nút quay lại nhìn thấy được. Một tập hợp các biểu tượng và màu sắc xác định cách màn hình giật gân hoặc thanh tiêu đề sẽ tìm cửa sổ ứng dụng của bạn.

Có một số trình tạo biểu hiện, chẳng hạn như Trình tạo tệp ứng dụng Web hoặc Trình tạo PWA cũng sẽ thay đổi kích thước biểu tượng cho bạn ở các độ phân giải khác nhau nếu bạn cung cấp một độ phân giải cao (tối thiểu 512 pixel).

Khi bạn có tệp kê khai được liên kết trong tài liệu HTML của mình, người dùng sẽ có thể cài đặt ứng dụng bằng các kỹ thuật khác nhau tùy thuộc vào trình duyệt, thường được gọi là Thêm vào Màn hình chính, Cài đặt hoặc chỉ Thêm. Nếu PWA của bạn có thể thu thập dữ liệu bởi Bing, Microsoft sẽ tự động thêm nó vào Microsoft Store để người dùng Windows 10 có thể cài đặt nó từ đó.

Trên một số hệ điều hành, PWA của bạn sẽ có khả năng chụp liên kết. Điều này có nghĩa là sau khi người dùng đã cài đặt ứng dụng, bất kỳ URL nào trong phạm vi tệp kê khai của bạn sẽ được mở trong phạm vi ứng dụng của bạn chứ không phải trong trình duyệt, bất kể nó xuất hiện trong trình duyệt hay các ứng dụng khác như WhatsApp, Facebook hoặc email.

Nếu bạn vượt qua các yêu cầu PWA mà chúng tôi đang xác định ở đây, một số nền tảng sẽ cung cấp badging xung quanh (một biểu tượng nhỏ thường trong thanh URL chỉ định rằng web có thể cài đặt) hoặc biểu ngữ ứng dụng web. Nếu bạn thích, bạn cũng có thể thêm nút Cài đặt tùy chỉnh của riêng mình bằng cách sử dụng đoạn mã sau:

window.addEventListener ("beforeinstallpr ompt", hàm (e) {e.prompt (); // sẽ hiển thị lời nhắc gốc cài đặt})

Nếu PWA được cài đặt, sự kiện 'appinstalled' sẽ được kích hoạt trên đối tượng cửa sổ để bạn có thể theo dõi số liệu thống kê đang lắng nghe.

Cửa hàng ứng dụng

Ứng dụng web nâng cao: PWA Builder

PWA Builder là một công cụ miễn phí có sẵn từ Microsoft sẽ giúp bạn trong việc tạo ra hoặc xuất bản PWA của bạn cho các nền tảng khác nhau trực tuyến hoặc trong dòng lệnh

Một trong những lợi ích chính của việc cài đặt từ trình duyệt là có thể tránh được quá trình phê duyệt cửa hàng ứng dụng hoặc phải trả tiền để trở thành nhà xuất bản. Điều đó đi kèm với những lợi thế rõ ràng, chẳng hạn như xuất bản tức thì, tạo ứng dụng riêng tư cho các công ty hoặc ứng dụng không được chấp nhận trong các cửa hàng.

Nhưng một số công ty muốn ở trong cửa hàng. Tính đến hôm nay, các cửa hàng duy nhất chính thức chấp nhận PWA là Cửa hàng Windows và Cửa hàng kaiOS. May mắn thay, với các công cụ như Tụ (hiện tại trong Alpha) hoặc PWA Builder, chúng tôi cũng có thể tạo và ký các gói gốc cho các nền tảng khác.

Có một số PWA đã được xuất bản trong Cửa hàng Google Play, chẳng hạn như Twitter Lite và Google Maps Go, hiện đang được triển khai tùy chỉnh. Chrome sẽ cung cấp giải pháp từ Chrome 68 thông qua các hoạt động web đáng tin cậy. Từ thời điểm đó, chúng tôi sẽ có thể tạo gói Android (APK) bằng trình khởi chạy cho PWA của chúng tôi và tải nó lên cửa hàng. Đối với Microsoft Store trên Windows 10, trang web PWA Builder hiện đang giúp với việc tạo ra một gói phần mềm Windows 10 của APPX. Sử dụng chế độ xem web, bạn có thể tạo ứng dụng iOS cho App Store theo cách thủ công nhưng phải hết sức cẩn thận về các quy tắc của cửa hàng.

Tích hợp nền tảng

Ứng dụng web nâng cao: PWA cơ bản

PWA cơ bản hoạt động trên các nền tảng khác nhau; trên macoS, nó vẫn là một thử nghiệm trên Google Chrome

Bằng cách triển khai các kỹ thuật nâng cao tiến bộ, bạn sẽ có thể sử dụng nhiều tính năng, bao gồm thông báo đẩy, truy cập máy ảnh và micrô, vị trí địa lý, cảm biến, thanh toán, hộp thoại chia sẻ và bộ nhớ ngoại tuyến. Tất cả các tính năng này chạy trực tiếp trong mô hình bảo mật của trình duyệt, bao gồm cả hộp thoại cho phép.

Chúng tôi cũng có thể liên lạc với các ứng dụng khác thông qua các chương trình URI, chẳng hạn như mở Twitter, YouTube hoặc WhatsApp thông qua URL hoặc URI tùy chỉnh của họ, chẳng hạn như whatsapp: //.

Cuối cùng, khi tạo PWA bản địa được xuất bản tới cửa hàng bằng cách sử dụng Tụ hoặc đến Microsoft Store, chúng tôi sẽ có thể kết nối với các API gốc để cho phép chúng tôi thực thi hầu như mọi mã gốc. Việc tích hợp với Windows 10 bao gồm truy cập phần cứng nhưng cũng tích hợp với hệ điều hành, cung cấp các tùy chọn như Pin to Start. Ví dụ, PWA Twitter cho phép bạn ghim bất kỳ người dùng nào vào màn hình bắt đầu của bạn.

Thách thức về thiết kế và UX

Ứng dụng web nâng cao: Ngọn hải đăng

Ngọn hải đăng sẽ cung cấp cho bạn một số điểm cho biết cách giải pháp của PWA dựa trên một loạt các thử nghiệm trên một công cụ Chromium

Thiết kế PWA có những thách thức độc đáo, vì vậy điều quan trọng là dành một chút thời gian nghiên cứu, thử nghiệm càng nhiều càng tốt và xem xét những điều sau đây:

  • Người dùng sẽ mong đợi trải nghiệm giống như ứng dụng.
  • Quá trình cài đặt vẫn còn mới, vì vậy chúng tôi cần nỗ lực thêm để giải thích cách cài đặt ứng dụng.
  • Cập nhật ứng dụng trong nền mà không có sự tương tác của người dùng là tuyệt vời nhưng nó cũng thêm một số thách thức cho UX.
  • Trên máy tính để bàn, thiết kế web đáp ứng có một biên giới mới vì cửa sổ PWA có thể nhỏ bé, nhỏ hơn nhiều so với chế độ xem di động. Điều này có nghĩa là chúng tôi cần tạo các chế độ xem cụ thể hoặc các tiện ích nhỏ cho định dạng này, như đã thấy trong Chrome OS hiện nay.
  • Thông báo đẩy sẽ chỉ thêm giá trị cho người dùng, vì vậy hãy tìm hiểu để hỏi vào đúng thời điểm và không lãng phí cơ hội gửi tin nhắn không hữu ích hoặc thú vị.
  • Chúng tôi cần thiết kế cho hiệu suất web và để truy cập ngoại tuyến.

Năm PWA

Với việc bổ sung iOS và máy tính để bàn trong năm nay, PWA ở khắp mọi nơi ngày nay. Nhưng chúng ta cần phải nhớ rằng hành trình của họ chỉ mới bắt đầu, vì vậy hãy mong đợi những thay đổi thường xuyên và đảm bảo cập nhật những kỹ thuật và ý tưởng mới nhất để mang đến trải nghiệm người dùng tuyệt vời trong khi nền tảng phát triển.

Bài viết này đã được xuất bản lần đầu trong ấn bản 308 của mạng lưới, tạp chí bán chạy nhất thế giới dành cho nhà thiết kế và nhà phát triển web. Mua số phát hành 308 tại đây hoặc là Đăng ký tại đây.

Những bài viết liên quan:

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *