VI
EN
JPTạo Progressive Web App từ Website trong một nốt nhạc
Các ứng dụng web lũy tiến (Progressive web apps) cho phép các trang web hoạt động giống như các ứng dụng di động gốc để hoạt động linh hoạt hơn. Bạn có được chức năng như ứng dụng di động gốc (hoặc gần với nó) mà không cần tốn nhiều chi phí phê duyệt của cửa hàng ứng dụng và hàng tấn mã gốc dành riêng cho nền tảng này.
Các ứng dụng web lũy tiến (Progressive web apps) cho phép các trang web hoạt động giống như các ứng dụng di động gốc để hoạt động linh hoạt hơn. Bạn có được chức năng như ứng dụng di động gốc (hoặc gần với nó) mà không cần tốn nhiều chi phí phê duyệt của cửa hàng ứng dụng và hàng tấn mã gốc dành riêng cho nền tảng này. Người dùng có thể cài đặt một ứng dụng web lũy tiến vào màn hình chính của họ và khởi chạy nó giống như một ứng dụng gốc. Tuy nhiên, ứng dụng được đưa vào khung giả ứng dụng có một số hạn chế và chỉ cho phép truy cập vào các trang là đường dẫn phụ của đường dẫn ban đầu của Progressive web apps. Chúng phải được biến đổi qua HTTPS.
Cốt lõi của một Progressive web apps là thực hiện dịch vụ, đây thực sự là một trình nền JavaScript phía máy khách. Nhân viên phục vụ có thể lắng nghe một vài loại sự kiện và phản ứng với chúng. Một trong những sự kiện được hỗ trợ phổ biến nhất là sự kiện tìm nạp, có thể được sử dụng để lưu trữ nội dung web ngoại tuyến như được giải thích bên dưới.
Nhiều trang web chỉ phù hợp với các quy tắc và hạn chế của các ứng dụng web tiến bộ. Thay vì chờ Apple hoặc Google phê duyệt và đưa ra các bản cập nhật ứng dụng gốc, các bản cập nhật ứng dụng web lũy tiến được nhân viên dịch vụ tìm nạp theo các quy tắc bộ đệm HTTP tiêu chuẩn. Ngoài ra, các ứng dụng web lũy tiến hiện có thể sử dụng nhiều API gốc như định vị địa lý, camera và API cảm biến mà chỉ các ứng dụng di động gốc được sử dụng mới có thể tận dụng.
Trong bài đăng này, chúng tôi sẽ chỉ cho bạn cách chuyển đổi trang web hiện tại của bạn thành một ứng dụng web tiến bộ. Nó khá đơn giản, chỉ thực sự cần các bước sau:
- Tạo một bảng kê khai ứng dụng
- Thêm nó vào mẫu HTML cơ sở của bạn
- Tạo nhân viên phục vụ
- Phục vụ nhân viên dịch vụ trên thư mục gốc của phạm vi bạn đã sử dụng trong tệp kê khai
- Thêm khối <script> vào mẫu HTML cơ sở của bạn để tải nhân viên dịch vụ
- Triển khai Progressive web apps
- Sử dụng Progressive web apps
Nếu bạn muốn có một phiên bản được hướng dẫn nhiều hơn của bài đăng này, những người tại https://pwabuilder.com đã tạo ra một giao diện trực tuyến để thực hiện hầu hết các bước dưới đây một cách tự động.
Tạo Bản kê khai ứng dụng
Tệp kê khai ứng dụng là tệp JSON chứa thông tin sau:
- Tên chính tắc của trang web
- Một phiên bản ngắn của tên đó (cho các biểu tượng)
- Màu chủ đề của trang web để tích hợp hệ điều hành
- Màu nền của trang web để tích hợp hệ điều hành
- Phạm vi URL mà Progressive web apps bị giới hạn
- URL ban đầu mà các phiên bản mới của Progressive web apps sẽ tải
- Một mô tả trạng thái dễ đọc của con người, hạn chế định hướng
- Biểu tượng cho trang web của bạn sẽ được sử dụng trên màn hình chính
- Thông tin này sẽ được sử dụng làm siêu dữ liệu cấp hệ điều hành cho ứng dụng web lũy tiến của bạn khi được cài đặt.
Dưới đây là một ví dụ về bảng kê khai ứng dụng web từ trang web danh mục đầu tư:
Thêm Bản kê khai vào mẫu HTML cơ sở của bạn
Nên thêm liên kết HTML cho tệp kê khai vào mẫu HTML cấp thấp nhất của ứng dụng của bạn, hoặc, trong trường hợp là client-side web app, tệp index.html chính của nó, trình duyệt cần phải hiển thị khách hàng đang cố gắng cài đặt ứng dụng. Thêm mục này là đơn giản. Giả sử bạn đang lưu trữ bảng kê khai này tại đường dẫn /static/manifest.json, chỉ cần thêm nó vào phần <head>:
Tạo offline.html dưới dạng bí danh cho index.html
Theo mặc định, service worker code bên dưới sẽ hiển thị /offline.html thay vì các tài nguyên mà nó không thể tìm nạp khi ngoại tuyến. Tạo một tệp tại <your-scope> /offline.html để cung cấp cho người dùng của bạn một thông báo lỗi hữu ích hơn, giải thích rằng dữ liệu này không được lưu trong bộ nhớ cache và người dùng đang ngoại tuyến.
Nếu bạn đang điều chỉnh một ứng dụng web, bạn có thể muốn tạo cho offline.html một một liên kết tượng trưng đến tệp index.html của mình và để 404 ngoại tuyến được xử lý bên trong đó. Nếu người dùng không thể thoát ra khỏi trang ngoại tuyến, nó có thể gây nhầm lẫn hoặc mắc kẹt ở màn hình “ngoại tuyến” một cách vô ích. Điều này sẽ làm Progressive web apps mất điểm ngay từ đầu. Hãy chắc chắn có một số nút “quay lại” trên tất cả các trang lỗi.
Trong macOS và Linux, bạn có thể liên kết tượng trưng offline.html với index.html như sau: ln -s index.html offline.html
Tạo Service worker
Khi service worker được sử dụng với sự kiện tìm nạp, bạn có thể thiết lập bộ nhớ đệm của tài sản và trang khi người dùng duyệt. Điều này làm nội dung có sẵn thành dạng ngoại tuyến và việc tải xuống nhanh hơn đáng kể. Chúng ta sẽ tập trung vào các tính năng bộ đệm ẩn ngoại tuyến của service worker ngày hôm nay thay vì đồng bộ hóa nền tự động, vì iOS chưa hỗ trợ đồng bộ hóa nền (mặc dù mọi thứ đang đi theo hướng tốt).
Ở cấp độ cao, hãy xem xét những tài sản và trang nào bạn muốn người dùng của mình luôn có thể truy cập dạng bản sao. Các trang này cũng sẽ được lưu vào bộ nhớ cache cho mọi người dùng đến trang web với trình duyệt hỗ trợ service worker. Hãy lưu lại các thứ như dưới đây: Bất kỳ tệp CSS, JavaScript hoặc tệp hình ảnh cốt lõi nào cho các hoạt động của trang web mà starting route của bạn không tải Thông tin liên hệ cho người, công ty hoặc dịch vụ chạy Progressive web apps.
Bất kỳ trang hoặc thông tin nào khác bạn có thể thấy hữu ích cho người dùng trang web của bạn
Tải Service Worker
Để tải Service Worker, chúng tôi chỉ cần thêm phần sau vào mẫu HTML cơ sở của bạn ở cuối thẻ <body> :
Và sau đó, triển khai những thay đổi này – bạn sẽ thấy Service Worker đăng nhật ký trong bảng điều khiển của trình duyệt của bạn. Nếu bạn đang thử nghiệm điều này từ điện thoại, hãy xem hướng dẫn dành riêng cho nền tảng tại đây cho iOS + Safari và tại đây cho Chrome + Android.
Triển khai Progressive web apps của bạn
Việc triển khai ứng dụng web của bạn sẽ được cụ thể theo cách ứng dụng của bạn được phát triển. Nếu bạn chưa có nơi để đặt nó, Heroku cung cấp một cách đơn giản và tốt đẹp để lưu trữ các ứng dụng web tiến bộ. Sử dụng gói xây dựng tĩnh là cách nhanh nhất để triển khai một ứng dụng tĩnh (nghĩa là chỉ có HTML, JavaScript và CSS). Bạn có thể nhìn vào nhánh của GraphvizOnline của tôi để biết ví dụ về ứng dụng web lũy tiến tương thích Heroku. Lưu ý rằng nếu bạn triển khai điều này, bạn sẽ cần chỉnh sửa URL bắt đầu trong tệp kê khai thành URL sẽ truy cập trang web đã triển khai – ví dụ: sand-beach-3033.herokuapp.com.
Sử dụng ứng dụng web lũy tiến của bạn
Đối với iOS Safari, hãy truy cập trang web bạn muốn thêm dưới dạng một ứng dụng, sau đó nhấp vào nút chia sẻ. Nhấn vào nút “Thêm vào màn hình chính trên màn hình chia sẻ. Hộp thoại tiếp theo sẽ cho phép bạn đặt tên và thay đổi trang bắt đầu URL của ứng dụng web lũy tiến trước khi được thêm vào màn hình chính. Sau đó, bạn có thể khởi chạy, quản lý và xóa nó. như bất kỳ ứng dụng nào khác
Đối với Android có Chrome, hãy nhấn vào menu hamburger ở góc trên bên phải của cửa sổ trình duyệt và sau đó nhấn “Thêm vào màn hình chính. Điều này có thể nhắc bạn xác nhận, sau đó nó sẽ đặt biểu tượng trên màn hình chính của bạn và bạn có thể khởi chạy, đa nhiệm hoặc xóa nó như bất kỳ ứng dụng nào khác. Không giống như iOS, bạn không thể chỉnh sửa URL bắt đầu hoặc tên của một ứng dụng web tiến bộ với Android.
Sau tất cả các bước này, bạn sẽ có một ứng dụng web tiến bộ. Bất kỳ trang hoặc tài sản nào mà người dùng tải sẽ được lưu trữ liên tục để truy cập ngoại tuyến trong tương lai. Sẽ rất thú vị khi thấy nhân viên phục vụ phát triển như thế nào trong tương lai.
LOGIN WITH G-SUITE ACCOUNT