NộI Dung
- Sự đi lên của PWA
- PWA đang hoạt động hôm nay
- Cài đặt
- Khởi chạy ngoại tuyến và ngay lập tức
- Kinh nghiệm hạng nhất
- Cửa hàng ứng dụng
- Tích hợp nền tảng
- Những thách thức về thiết kế và trải nghiệm người dùng
- Năm của PWA
Giống như thiết kế web đáp ứng đã thu hẹp khoảng cách giữa các trang web trên máy tính để bàn và thiết bị di động vài năm trước, cá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 ứng dụng di động hội tụ nhanh chóng, có vẻ như một internet đẹp hơn, hiệu quả hơn đang phát triển - mặc dù chắc chắn không phải không có một số thay đổi đáng kể đối với mã di truyền cơ bản của nó.
- Cách tạo một ứng dụng web tiến bộ
Rõ ràng là có một số áp lực chọn lọc đáng kể thúc đẩy điều này. Trước hết, việc tạo các ứng dụng gốc cho mọi thị trường 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à dung lượng ổ đĩa có giá trị và các công ty chi rất nhiều tiền để tạo ứng dụng chỉ để chúng bị bỏ rơi 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 thúc đẩy 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 tính năng nâng cao liên tục để 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 một cơ sở mã. Đó là một tập hợp các phương pháp hay nhất và cách sử dụng API tạo ra 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, không giống như bạn có hoặc không có PWA; nó giống như trang web của bạn ít nhiều có PWA.
Bạn sắp bắt đầu xây dựng một trang web mới? Hãy thử sử dụng một trình xây dựng trang web. Và hãy đảm bảo rằng bạn cũng nhận được sự hỗ trợ cần thiết từ một dịch vụ lưu trữ web tốt. Hoặc đối với một cái gì đó hơi khác, hãy xem hướng dẫn của chúng tôi để lưu trữ đám mây tốt nhất.
Sự đi lên của PWA
Mặc dù cái tên PWA được đặt ra vào năm 2015 trong bài viết Thoát khỏi tab không đánh mất linh hồn của Alex Russell đang 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 từ đó. Chúng ta đã từng có Ứng dụng HTML (HTA), đượ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 của Nokia, BlackBerry và các công ty khác. Sau đó, vào năm 2007, Steve Jobs đã trình bày cách duy nhất vào thời điểm đó để tạo ứng dụng cho iPhone ban đầu: PWA, mặc dù với một cái tên khác. Chrome bắt đầu từ đó, cải tiến các API 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 khi cố gắng đưa nội dung web vào 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ờ? Về cơ bản, nó phụ thuộc vào các công ty hiện đang làm việc và quảng bá các công nghệ đằng sau PWA, chẳng hạn như Microsoft, Google, Apple và Mozilla, chỉ có một vài công ty. Ngoài ra, hiệu suất của nền tảng web đã đạt đến mức không có sự khác biệt nào 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 từng tồn tại trước đây và đó là một lý do khiến cộng đồng web quyết định rằng đã đến lúc PWA.
PWA đang hoạt động hôm nay
Ngày nay PWA 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 cung cấp trải nghiệm tốt nhất
- iOS với Safari
- Chromebook
- Windows 10 từ Microsoft Store
- Điện thoại phổ thông với KaiOS - một nhánh từ Firefox OS - hiện có sẵn cho hàng triệu người dùng chủ yếu ở Ấn Độ
Hỗ trợ cũng sẽ đế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 dưới dạng cờ thử nghiệm 'PWA dành cho máy tính để bàn' nếu bạn muốn dùng thử ngay bây giờ. Cài đặt trên Windows trên Edge mà không cần sử dụng cửa hàng cũng sẽ đến muộn hơn, mặc dù không có khung thời gian cụ thể nào đượ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 đã hoặc sắp có hỗ trợ cho các 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 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 từ hầu hết các CLI cho các khung công tác 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ề Capacitor, một sự thay thế Cordova mã nguồn mở giúp cho PWA gốc có thể thực hiện được trên mọi cửa hàng ứng dụng.
Cài đặt
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 cung cấp cùng với TLS trong 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 của chính nó.
Khởi chạy ngoại tuyến và ngay lập tức
Bộ não của PWA là service worker, một tệp JavaScript được cài đặt trên thiết bị của người dùng có nhiệm vụ tải xuống các tệp của ứng dụng, lưu trữ chúng vào bộ nhớ cache và sau đó sẽ phân phát chúng khi cần thiết. Sau khi cài đặt service worker, nó hoạt động giố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ộ, điều này làm cho ứng dụng khả dụng ngoại tuyến và cũng có sẵn trong một vài mili giây ngay cả khi người dùng có kết nối, mô phỏng một lần khởi chạy ứng dụng gốc.
Để cài đặt service worker, tài liệu HTML của bạn sẽ cần bao gồm một số thứ 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 vào 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 tôi 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ộ nhớ đệm trong tệp sw.js.
const resources = ["index.html", "app.js", "app.css", "logo.png"]; bản thân. addEventListener ("install", event => {event. waitUntil (caches.open ("myPWAcache") .then (cache => cache.addAll (resources)));});
Sau đó, để PWA luôn được phân phát từ bộ nhớ cache, chúng ta cần lắng nghe sự kiện tìm nạp bên trong service worker và quyết định chính sách bộ nhớ cache sẽ sử dụng, chẳng hạn như bộ nhớ cache trước với đoạn mã sau.
self.addEventListener ("tìm nạp", e => e.respondWith (caches.match (e.request). then (res => res);
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ừ biểu tượng đã cài đặt), công cụ sẽ lấy các tệp từ bộ nhớ cache. Một lợi thế của PWA so với ứng dụng gốc là thiết bị không cần tải lại tất cả các tệp khi có thay đổi, chỉ tệp đã thay đổi với một 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 sao bạn biết tệp nào đã đượ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 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 Hộp làm việc thư viện mã nguồn mở, sẽ giúp bạn tạo service worker và 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 trong 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ớ liên tục nếu có:
if (‘storage’ in navigationgator && ’stay’ in navigationgator.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% dung lượng có sẵn; trên iOS chỉ là 50MiB (gần 50MB) trên mỗi máy chủ; trong Edge, nó có thể thay đổi theo tổng dung lượng bộ nhớ và trong Windows Store, nó là không giới hạn.
Kinh nghiệm hạng nhất
Chúng ta có bộ não và giờ là lúc dành cho trái tim: tệp 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 trang web đó khả dụng nhanh chóng hoặc 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 trải nghiệm hoàn toàn độc lập như bất kỳ ứng dụng được cài đặt nào khác.
Tệp kê khai là tệp JSON xác định 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 xác định 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 'display: standalone' và tạo trải nghiệm ứng dụng bình thường. Với 'display: minimal-ui', nó sẽ tạo ra trải nghiệm với 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 sống động mà không cần thanh trạng thái hoặc nút quay lại có thể nhìn thấy. Một tập hợp các biểu tượng và màu sắc xác định cách hiển thị của màn hình giật gân hoặc thanh tiêu đề cho cửa sổ ứng dụng của bạn.
Có một số trình tạo tệp kê khai, chẳng hạn như Trình tạo tệp kê khai ứ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 độ 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 thông tin bằng 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 nắm bắt các 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 ranh giới của ứng dụng chứ không phải trong trình duyệt, bất kể URL đó xuất hiện trong trình duyệt hay các ứng dụng khác như WhatsApp, Facebook hoặc một 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 huy hiệu môi trường xung quanh (một biểu tượng nhỏ thường có trong thanh URL chỉ định rằng web có thể cài đặt được) hoặc biểu ngữ ứng dụng web. Nếu muốn, 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", function (e) {e.prompt (); // sẽ hiển thị dấu nhắc cài đặt gốc})
Nếu PWA được cài đặt, sự kiện 'ứng dụng được cài đặt' 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 nó.
Cửa hàng ứng dụng
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 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ửa hàng.
Nhưng một số công ty muốn có mặt trong cửa hàng. Tính đến ngày hôm nay, các cửa hàng duy nhất chính thức chấp nhận PWA là Windows Store và kaiOS Store. May mắn thay, với các công cụ như Capacitor (hiện đang ở phiên bản Alpha) hoặc PWA Builder, chúng ta 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) với 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 tạo gói APPX Windows 10. Bằng cách 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 cực kỳ cẩn thận về các quy tắc của cửa hàng.
Tích hợp nền tảng
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ô, định vị địa lý, cảm biến, thanh toán, hộp thoại chia sẻ và lưu trữ 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 quyền.
Chúng tôi cũng có thể giao tiếp với các ứng dụng khác thông qua các lược đồ 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 chúng, chẳng hạn như whatsapp: //.
Cuối cùng, khi tạo PWA gốc được xuất bản tới cửa hàng bằng Tụ điện hoặc 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ư bất kỳ mã gốc nào. Sự tích hợp đó với Windows 10 bao gồm quyền 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ụ: Twitter PWA 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 mình.
Những thách thức về thiết kế và trải nghiệm người dùng
Thiết kế PWA có những thách thức riêng, vì vậy điều quan trọng là phải dành 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:
- 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 cố gắng giải thích cách cài đặt ứng dụng.
- Việc 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à điều tuyệt vời nhưng nó cũng thêm một số thách thức đối với trải nghiệm người dùng.
- 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ác cửa sổ PWA có thể rất nhỏ, nhỏ hơn nhiều so với một khung nhìn 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 ngày nay.
- Thông báo đẩy chỉ nên tăng giá trị cho người dùng, vì vậy hãy học cách hỏi đúng lúc và đừng lãng phí cơ hội gửi những thông báo không hữu ích hoặc không 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 của PWA
Với việc bổ sung iOS và máy tính để bàn trong năm nay, PWA đã có mặt ở khắp mọi nơi ngày nay. Nhưng chúng ta cần 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 luôn cập nhật các kỹ thuật và ý tưởng mới nhất để mang lại trải nghiệm người dùng tuyệt vời trong khi nền tảng phát triển.
Bài báo này ban đầu được xuất bản trong số 308 của mạng lưới, tạp chí bán chạy nhất thế giới dành cho các nhà thiết kế và nhà phát triển web. Mua số báo danh 308 tại đây hoặc là Đăng ký tại đây.
