Ngày xuất bản: 3 tháng 6 năm 2026
Ứng dụng web tiến bộ (PWA) đã cách mạng hoá web bằng cách mang lại trải nghiệm giống như ứng dụng. Tuy nhiên, một trong những điểm mạnh nhất của PWA cũng là một thách thức dai dẳng: danh tính ứng dụng được liên kết chặt chẽ với nguồn gốc trang web.
Để đổi mới thương hiệu hoặc tái cấu trúc kiến trúc (ví dụ: chuyển từ www.example.com/social sang social.example.com), bạn phải đối mặt với một tình huống khó xử.
Không có cách nào để "di chuyển" một PWA đã cài đặt. Người dùng buộc phải gỡ cài đặt ứng dụng cũ theo cách thủ công và tìm nút cài đặt cho ứng dụng mới.
Nhóm PWA rất vui mừng được giới thiệu Tính năng di chuyển nguồn gốc PWA trong Chrome 150. Tính năng mới này của nền tảng cho phép bạn chuyển đổi liền mạch các PWA đã cài đặt sang một nguồn gốc mới trên cùng trang web mà không làm gián đoạn người dùng, đồng thời vẫn cung cấp đủ thông tin cho người dùng.
Những điều mà tính năng di chuyển nguồn gốc cho phép
Bạn có thể sửa đổi kiến trúc trang web mà không làm ảnh hưởng đến trải nghiệm người dùng:
- Tự do về kiến trúc kỹ thuật: Thay đổi miền con hoặc đường dẫn của ứng dụng.
- Khắc phục trạng thái ứng dụng bị tách: Giải quyết vấn đề khi thay đổi
start_urlmà không có mã nhận dạng ổn định, vô tình tạo ra các bản cài đặt ứng dụng trùng lặp trùng lặp.
Người dùng có thể di chuyển ứng dụng của họ bằng một hộp thoại cập nhật đơn giản. Họ được thông báo về quá trình di chuyển theo cách tương tự như bản cập nhật ứng dụng tiêu chuẩn. Chỉ với một cú nhấp chuột, ứng dụng cũ sẽ bị gỡ cài đặt, còn ứng dụng mới sẽ được cài đặt và khởi chạy.
Cách di chuyển PWA
Để di chuyển PWA, hãy làm theo các bước sau. Phần còn lại của bài đăng sẽ đi vào chi tiết hơn:
- Triển khai bắt tay:
- Thêm
migrate_fromvào ứng dụng mới. - Thêm trường
allow_migrationvào tệp/.well-known/web-app-origin-associationtrên nguồn gốc cũ.
- Thêm
- Chọn hành vi:
suggest(hoặc để trống) tránh làm gián đoạn người dùng, có thể hữu ích trong quá trình triển khai ban đầu.forcechặn người dùng và yêu cầu di chuyển nếu người dùng không thể tiếp tục sử dụng URL cũ. - Luôn cập nhật ứng dụng cũ: Nếu trang web cũ chuyển hướng đến trang web mới, hãy sử dụng thuộc tính
install_urltrong khốimigrate_fromđể đảm bảo trình duyệt vẫn có thể tìm thấy tệp kê khai cũ cho các bản cập nhật tiềm năng. - Triển khai
idtrong tệp kê khai đích: Chrome yêu cầu tệp kê khai ứng dụng đích phải có trườngid. Điều này đảm bảo ứng dụng không thể mắc phải lỗi thường gặp là tạo ứng dụng bị tách bằng cách thay đổistart_urlmà không đặtid.
Bắt tay hai chiều: Cách hoạt động
Để đảm bảo an ninh và ngăn chặn việc tiếp quản thù địch, quá trình di chuyển yêu cầu bắt tay an toàn giữa nguồn gốc cũ và mới. Việc bắt tay này đảm bảo rằng cả hai trang web đều được kiểm soát bởi cùng một thực thể.
Bước 1: Ứng dụng mới khai báo ứng dụng tiền nhiệm (bắt buộc)
Thêm trường migrate_from vào tệp kê khai ứng dụng web của ứng dụng mới.
// Manifest at https://fileman.google.com/manifest.json
{
"name": "File Manager",
"id": "/files/",
"start_url": "/files/index.html",
....
"migrate_from": [
"https://drive.google.com/"
]
}
Bước 2: Nguồn gốc cũ xác nhận quá trình di chuyển (bắt buộc)
Để ngăn trang web mới tự ý chiếm đoạt ứng dụng cũ, nguồn gốc cũ phải cho phép quá trình di chuyển một cách rõ ràng. Nguồn gốc cũ thực hiện việc này bằng tệp cấu hình .well-known.
// File at https://drive.google.com/.well-known/web-app-origin-association
{
"https://fileman.google.com/files/": {
"allow_migration": true
}
}
Bước 3: Gửi tín hiệu chủ động (không bắt buộc)
Để kích hoạt bản cập nhật mà không cần đợi người dùng truy cập vào trang web mới, hãy cập nhật tệp kê khai của ứng dụng cũ để trỏ đến ứng dụng mới.
// Manifest at https://drive.google.com/manifest.json
{
"name": "Drive",
"start_url": "/",
"migrate_to": {
"id": "https://fileman.google.com/files/",
"install_url": "https://fileman.google.com/drive/installwebapp?usp=migrate"
}
}
Bước 4: Xử lý chuyển hướng (không bắt buộc)
Ngoài việc sử dụng trường migrate_to, bạn có thể báo hiệu quá trình di chuyển
bằng cách chuyển hướng URL ứng dụng cũ đến ứng dụng mới và dựa vào
scope_extensions
để biểu ngữ
ngoài phạm vi không xuất hiện trong ứng dụng cũ.
Điều này có nghĩa là tệp kê khai của ứng dụng cũ sẽ không bao giờ được nhìn thấy và do đó, không bao giờ có thể được
cập nhật. Để cho phép ứng dụng cũ tiếp tục cập nhật trước khi quá trình di chuyển ứng dụng diễn ra, hãy đặt install_url bên trong migrate_from để thông báo cho trình duyệt về một URL cần tìm nạp vẫn có tệp kê khai cũ được đính kèm mà không cần chuyển hướng.
// Manifest at https://fileman.google.com/manifest.json
{
"name": "File Manager",
"id": "/files/",
"start_url": "/files/index.html",
....
"migrate_from": [
{
"id": "https://drive.google.com/",
"install_url": "https://drive.google.com/drive/installwebapp?usp=migrate"
}
]
}
Vậy là xong! Trải nghiệm người dùng tương tự như trải nghiệm dùng để cập nhật ứng dụng, trong đó người dùng được thông báo ở góc trên cùng bên phải của cửa sổ ứng dụng:
Khi nhấp vào Xem lại bản cập nhật ứng dụng, bạn sẽ thấy trải nghiệm người dùng sau (tuỳ thuộc vào những thay đổi trong tệp kê khai):
Kiểm soát trải nghiệm người dùng
Bạn có thể chọn mức độ quyết liệt của quá trình di chuyển bằng cách sử dụng cờ behavior:
- Đề xuất (mặc định): Người dùng nhận được thông báo thụ động (ví dụ: trong trình đơn ứng dụng). Họ có thể chọn cập nhật, gỡ cài đặt ứng dụng hoặc bỏ qua quá trình di chuyển bằng cách khởi chạy hộp thoại.
- Bắt buộc: Ở lần khởi chạy ứng dụng tiếp theo, người dùng sẽ thấy một hộp thoại chặn. Họ phải cập nhật lên nguồn gốc mới hoặc gỡ cài đặt ứng dụng (vui lòng xem ảnh chụp màn hình sau).
Ví dụ sau đây cho thấy cách đặt lựa chọn này,
"migrate_from": [
{
"id": "https://example.com/social/",
"behavior": "force" // or suggest
}
]
Kết luận
Tính năng Di chuyển PWA giúp nhà phát triển tiếp tục xây dựng các kiến trúc web hiện đại và linh hoạt mà không bỏ rơi người dùng.