Tất cả công cụ hiện có để phát triển web cũng hữu ích cho việc phát triển ứng dụng web tiến bộ, chẳng hạn như thư viện, khung, trình chỉnh sửa mã, trình tạo, công cụ cho nhà phát triển, trình gỡ lỗi, v.v. Tuy nhiên, khi sử dụng các tính năng dành riêng cho PWA, chẳng hạn như khả năng cài đặt, trình chạy dịch vụ, hỗ trợ ngoại tuyến và nhiều chức năng khác, một số công cụ nhất định dành cho PWA sẽ cực kỳ hữu ích. Hãy xem ví dụ thực tế.
Trình mô phỏng và thiết bị
Như đã đề cập trong chương Nền tảng, bạn nên sử dụng các mẫu thiết kế độc lập để mang lại trải nghiệm tốt nhất cho mọi người dùng trong mọi bối cảnh. Tuy nhiên, bạn nên kiểm thử trải nghiệm trên nhiều thiết bị.
Bạn có thể sẽ không sở hữu nhiều thiết bị thực, bao gồm iPhone, điện thoại Android, máy tính bảng và máy tính để bàn hoặc máy tính xách tay có hệ điều hành khác nhau. Đó là lý do chúng tôi sử dụng các trình mô phỏng và trình mô phỏng.
Trình mô phỏng đơn giản
Hầu hết các công cụ cho nhà phát triển trong các trình duyệt đều cho phép bạn kiểm thử PWA ở nhiều kích thước màn hình hoặc điều kiện mạng khi sử dụng một công cụ trình duyệt dành cho máy tính. Một số công cụ trong số này cũng có thể buộc một tác nhân người dùng khác trong những mô phỏng này.
Một số trình mô phỏng có sẵn là:
- Công cụ của Chromium: Chế độ thiết bị, chế độ điều tiết mạng và một số mô phỏng cảm biến
- Công cụ dành cho nhà phát triển Firefox: Chế độ thiết kế thích ứng
- Trình kiểm tra web Safari: Chế độ thiết kế thích ứng
Một số giải pháp thương mại và miễn phí được tối ưu hoá cho nhà phát triển và nhà thiết kế, chẳng hạn như ứng dụng thích ứng nguồn mở.
Mô phỏng của Apple
Apple cung cấp ứng dụng Trình mô phỏng (trước đây gọi là Trình mô phỏng iOS). Ứng dụng này cho phép bạn kiểm thử ứng dụng web của mình trên nhiều iPhone và iPad ở nhiều phiên bản hệ điều hành.
Ứng dụng Trình mô phỏng chỉ dành cho máy tính macOS và đi kèm với [Xcode, có trong AppStore; mô phỏng iOS và iPadOS với nhiều cấu hình thiết bị. Trong đó có cả ứng dụng Mobile Safari thực và công cụ Web.app được dùng khi cài đặt PWA trên màn hình chính. Vì vậy, trải nghiệm cuối cùng mà bạn thấy thể hiện tương đối giống với một thiết bị thực tế.
Để chạy ứng dụng này, sau khi cài đặt Xcode, bạn có thể mở Trình mô phỏng trong trình đơn Xcode, bằng cách chọn Open Developer Tools rồi chọn Simulator. Khi đã vào trình mô phỏng, bạn có thể mở Safari như đang ở trong một chiếc iPhone hoặc iPad thực. Bạn có thể mở các thiết bị khác bằng cách chọn biểu tượng File rồi chọn trình đơn Open Simulator.
Dưới đây là một số phím tắt hữu ích cho nhà phát triển web khi sử dụng Trình mô phỏng để kiểm tra PWA:
Command-Shift-H: chuyển đến Màn hình chính.Control-Command-Shift-H: truy cập vào App Switcher (Trình chuyển đổi ứng dụng).Command-RightvàCommand-Left: xoay thiết bị.
Trình mô phỏng không phải là máy ảo mà là một ứng dụng chạy trên macOS của bạn trông giống như một chiếc iPhone hoặc iPad, do đó, ứng dụng này không có ngăn xếp TCP riêng. Do đó, nếu bạn sử dụng localhost trong Trình mô phỏng, thì Safari sẽ trỏ đến thiết bị macOS localhost của bạn.
Theo mặc định, Xcode chỉ cài đặt phiên bản iOS mới nhất. Tuy nhiên, bạn có thể truy cập vào Xcode, sử dụng trình đơn Preferences và tải Trình mô phỏng cũ xuống từ thẻ Components.
Bạn nên kiểm tra PWA trên phiên bản iOS mới nhất, phiên bản nhỏ trước đó và ít nhất một phiên bản lớn trước đó.
Trình mô phỏng Android
Hệ sinh thái Android cung cấp nhiều trình mô phỏng khác nhau, nhưng các trình mô phỏng có sẵn trong SDK Android là những trình mô phỏng được sử dụng phổ biến nhất.
Là nhà phát triển PWA, bạn cũng cần các trình duyệt trong trình mô phỏng Android. Điều này sẽ khiến việc kiểm thử trở nên phức tạp hơn, vì AOSP (Dự án nguồn mở Android) không bao gồm Google Chrome hoặc Cửa hàng Play để tải trình duyệt xuống. Do đó, không phải trình mô phỏng Android nào cũng hữu ích cho việc kiểm thử PWA.
SDK Android đi kèm với hai công cụ hữu ích cho việc mô phỏng:
- Trình quản lý SDK: tải xuống và cập nhật các phiên bản và trình bổ trợ hệ điều hành khác nhau.
- Trình quản lý thiết bị ảo Android: thêm, chỉnh sửa và xoá các Thiết bị Android ảo (AVD), mỗi thiết bị đại diện cho một thiết bị đã cài đặt một hệ điều hành Android, tương tự như một thực thể máy ảo.
Bạn chỉ có thể cài đặt SDK Android hoặc Android Studio, một IDE miễn phí bao gồm SDK Android với trình mô phỏng. Với SDK, bạn sẽ phải sử dụng dòng lệnh để mở và thiết lập trình mô phỏng. Với Android Studio, bạn có thể mở các công cụ cần thiết trên trình đơn của màn hình Chào mừng. Sau khi vào Trình quản lý thiết bị ảo Android, bạn có thể tạo bao nhiêu thiết bị tuỳ thích, với nhiều tổ hợp kích thước màn hình, tính năng và phiên bản hệ điều hành Android.
Với trình mô phỏng Android, bạn có thể kiểm tra khả năng hỗ trợ cài đặt PWA, toàn bộ trải nghiệm người dùng và liệu các tính năng mà bạn sử dụng có hoạt động như mong đợi không.