Kể từ khi Hoạt động đáng tin cậy trên web được giới thiệu vào năm ngoái, nhóm Chrome sẽ tiếp tục nghiên cứu sản phẩm, giúp sử dụng dễ dàng hơn với Bubblewrap, thêm các tính năng mới như Google Play sắp ra mắt Tích hợp thanh toán và giúp tính năng này hoạt động trên nhiều nền tảng hơn, chẳng hạn như ChromeOS. Bài viết này sẽ tóm tắt thông tin cập nhật mới nhất và sắp tới về Hoạt động đáng tin cậy trên web.
Các tính năng mới như Bubblewrap và Hoạt động đáng tin cậy trên web
Bubblewrap giúp bạn tạo các ứng dụng chạy PWA của mình bên trong Hoạt động đáng tin cậy trên web mà không cần yêu cầu kiến thức về công cụ dành riêng cho nền tảng.
Quy trình thiết lập đơn giản
Trước đây, việc sử dụng Bubblewrap, bạn phải thiết lập thủ công Bộ phát triển Java và Android SDK, cả hai đều dễ gặp lỗi. Công cụ này hiện có thể tự động tải các phần phụ thuộc khi chạy lần đầu tiên.
Bạn vẫn có thể chọn sử dụng bản cài đặt hiện có của các phần phụ thuộc (nếu muốn),
còn lệnh doctor mới giúp tìm vấn đề và đề xuất cách khắc phục cho cấu hình, việc này có thể
hiện đã được cập nhật từ dòng lệnh bằng lệnh updateConfig.
Trình hướng dẫn được cải tiến
Khi tạo dự án bằng init, Bubblewrap cần thông tin để tạo ứng dụng Android. Chiến lược phát hành đĩa đơn
trích xuất các giá trị từ Tệp kê khai ứng dụng web và cung cấp các giá trị mặc định nếu có thể.
Bạn có thể thay đổi các giá trị đó khi tạo dự án mới, nhưng trước đây ý nghĩa của mỗi trường thì không rõ ràng. Hộp thoại khởi chạy được xây dựng lại với thông tin mô tả và xác thực tốt hơn cho mỗi trường nhập dữ liệu.
display: hỗ trợ toàn màn hình và hướng
Trong một số trường hợp, bạn có thể muốn ứng dụng của mình sử dụng nhiều màn hình nhất có thể và khi
tạo PWA. Việc này được triển khai bằng cách đặt trường display trong Tệp kê khai ứng dụng web thành
fullscreen
Khi Bubblewrap phát hiện tuỳ chọn toàn màn hình trong Tệp kê khai ứng dụng web, ứng dụng này sẽ định cấu hình Android để khởi chạy ở chế độ toàn màn hình hay chế độ chìm theo các thuật ngữ dành riêng cho Android.
Trường orientation trong Tệp kê khai ứng dụng web xác định xem có nên khởi động ứng dụng trong
chế độ dọc, chế độ ngang hoặc theo hướng mà thiết bị đang sử dụng. Bây giờ, hãy gói bong bóng
đọc trường Tệp kê khai ứng dụng web và sử dụng trường này làm mặc định khi tạo ứng dụng Android.
Bạn có thể tuỳ chỉnh cả hai cấu hình trong quy trình bubblewrap init.
Kết quả AppBundle
Gói ứng dụng là định dạng xuất bản dành cho những ứng dụng uỷ quyền quy trình tạo tệp APK cuối cùng và đang đăng nhập vào Play. Trong thực tế, điều này cho phép phân phối các tệp nhỏ hơn cho người dùng khi tải xuống từ cửa hàng.
Bubblewrap hiện đóng gói ứng dụng dưới dạng App Bundle, trong một tệp có tên là
app-release-bundle.aab. Bạn nên ưu tiên định dạng này khi xuất bản ứng dụng lên Cửa hàng Play
vì cửa hàng sẽ yêu cầu kể từ nửa cuối năm 2021.
Uỷ quyền vị trí địa lý
Người dùng mong muốn các ứng dụng được cài đặt trên thiết bị của họ hoạt động nhất quán, bất kể công nghệ. Khi được sử dụng bên trong một Hoạt động đáng tin cậy trên web, quyền GeoLocation hiện có thể là được uỷ quyền cho Hệ điều hành. Khi được bật, người dùng sẽ thấy các hộp thoại tương tự như các ứng dụng bằng Kotlin hoặc Java, cũng như tìm các chế độ điều khiển để quản lý quyền ở cùng một nơi.
Bạn có thể thêm tính năng này thông qua Bubblewrap và vì tính năng này thêm các phần phụ thuộc bổ sung vào Android dự án của mình, bạn chỉ nên bật tính năng này khi ứng dụng web đang sử dụng quyền Định vị vị trí.
Tệp nhị phân được tối ưu hóa
Các thiết bị có bộ nhớ hạn chế phổ biến ở một số khu vực trên thế giới và chủ sở hữu của những thiết bị đó thường thích các ứng dụng nhỏ hơn. Các ứng dụng dùng Hoạt động đáng tin cậy trên web sẽ tạo ra các ứng dụng nhỏ tệp nhị phân, giúp loại bỏ một số lo lắng cho người dùng.
Bubblewrap đã được tối ưu hoá bằng cách giảm danh sách các thư viện Android cần thiết, giúp: các tệp nhị phân được tạo có kích thước nhỏ hơn 800 nghìn. Trong thực tế, kích thước này nhỏ hơn một nửa kích thước trung bình tạo bởi các phiên bản trước đó. Để tận dụng các tệp nhị phân nhỏ hơn, bạn chỉ cần cập nhật ứng dụng của bạn bằng phiên bản Bubblewrap mới nhất.
Cách cập nhật ứng dụng hiện có
Ứng dụng do Bubblewrap tạo ra bao gồm một ứng dụng web và một Android nhẹ trình bao bọc mở PWA. Mặc dù PWA mở trong một Hoạt động đáng tin cậy trên web vẫn tuân theo cùng chu kỳ cập nhật như bất kỳ ứng dụng web nào, thì trình bao bọc gốc có thể và cần được cập nhật.
Bạn nên cập nhật ứng dụng của mình để đảm bảo ứng dụng đang sử dụng phiên bản trình bao bọc mới nhất cùng với phiên bản mới nhất
các tính năng và bản sửa lỗi. Khi cài đặt phiên bản Bubblewrap mới nhất, lệnh update sẽ
áp dụng phiên bản mới nhất của trình bao bọc cho một dự án hiện có:
npm update -g @bubblewrap/cli
bubblewrap update
bubblewrap build
Một lý do khác để cập nhật các ứng dụng đó là đảm bảo rằng những thay đổi đối với Tệp kê khai web
được áp dụng cho ứng dụng. Hãy sử dụng lệnh merge mới để làm việc này:
bubblewrap merge
bubblewrap update
bubblewrap build
Nội dung cập nhật đối với Tiêu chí chất lượng
Chrome 86 đã áp dụng các thay đổi đối với Tiêu chí về chất lượng hoạt động đáng tin cậy trên web. Tiêu chí này được giải thích trong đầy đủ trong bài viết Thay đổi về tiêu chí chất lượng đối với PWA sử dụng Hoạt động đáng tin cậy trên web.
Tóm lại, bạn cần đảm bảo ứng dụng của mình xử lý các tình huống sau để để ngăn chúng gặp sự cố:
- Không xác minh được các đường liên kết đến tài sản kỹ thuật số khi khởi chạy ứng dụng
- Không thể trả về HTTP 200 cho yêu cầu tài nguyên mạng ngoại tuyến
- Trả về lỗi HTTP 404 hoặc 5xx trong ứng dụng.
Ngoài việc đảm bảo rằng ứng dụng vượt qua quy trình xác thực Đường liên kết đến tài sản kỹ thuật số, các bước còn lại các tình huống có thể do một trình chạy dịch vụ xử lý:
self.addEventListener('fetch', event => {
event.respondWith((async () => {
try {
return await fetchAndHandleError(event.request);
} catch {
// Failed to load from the network. User is offline or the response
// has a status code that triggers the Quality Criteria.
// Try loading from cache.
const cachedResponse = await caches.match(event.request);
if (cachedResponse) {
return cachedResponse;
}
// Response was not found on the cache. Send the error / offline
// page. OFFLINE_PAGE should be pre-cached when the service worker
// is activated.
return await caches.match(OFFLINE_PAGE);
}
})());
});
async function fetchAndHandleError(request) {
const cache = await caches.open(RUNTIME_CACHE);
const response = await fetch(request);
// Throw an error if the response returns one of the status
// that trigger the Quality Criteria.
if (response.status === 404 ||
response.status >= 500 && response.status < 600) {
throw new Error(`Server responded with status: ${response.status}`);
}
// Cache the response if the request is successful.
cache.put(request, response.clone());
return response;
}
Hộp công việc tích hợp theo các phương pháp hay nhất và xoá bản mẫu khi sử dụng trình chạy dịch vụ. Ngoài ra, hãy cân nhắc sử dụng trình bổ trợ Workbox để xử lý các trường hợp đó:
export class FallbackOnErrorPlugin {
constructor(offlineFallbackUrl, notFoundFallbackUrl, serverErrorFallbackUrl) {
this.notFoundFallbackUrl = notFoundFallbackUrl;
this.offlineFallbackUrl = offlineFallbackUrl;
this.serverErrorFallbackUrl = serverErrorFallbackUrl;
}
checkTrustedWebActivityCrash(response) {
if (response.status === 404 || response.status >= 500 && response.status <= 600) {
const type = response.status === 404 ? 'E_NOT_FOUND' : 'E_SERVER_ERROR';
const error = new Error(`Invalid response status (${response.status})`);
error.type = type;
throw error;
}
}
// This is called whenever there's a network response,
// but we want special behavior for 404 and 5**.
fetchDidSucceed({response}) {
// Cause a crash if this is a Trusted Web Activity crash.
this.checkTrustedWebActivityCrash(response);
// If it's a good response, it can be used as-is.
return response;
}
// This callback is new in Workbox v6, and is triggered whenever
// an error (including a NetworkError) is thrown when a handler runs.
handlerDidError(details) {
let fallbackURL;
switch (details.error.details.error.type) {
case 'E_NOT_FOUND': fallbackURL = this.notFoundFallbackUrl; break;
case 'E_SERVER_ERROR': fallbackURL = this.serverErrorFallbackUrl; break;
default: fallbackURL = this.offlineFallbackUrl;
}
return caches.match(fallbackURL, {
// Use ignoreSearch as a shortcut to work with precached URLs
// that have _WB_REVISION parameters.
ignoreSearch: true,
});
}
}
Google Play Billing
Bên cạnh việc cho phép ứng dụng của bạn bán hàng hoá kỹ thuật số và gói thuê bao trên Cửa hàng Play, Google Play Billing cung cấp các công cụ hữu ích giúp bạn quản lý danh mục, giá và gói thuê bao báo cáo và quy trình thanh toán do Cửa hàng Play hỗ trợ vốn đã quen thuộc với người dùng của bạn. Nó cũng là một yêu cầu đối với các ứng dụng được xuất bản trên Cửa hàng Play có bán hàng hoá kỹ thuật số.
Chrome 88 sẽ khởi chạy cùng với bản dùng thử theo nguyên gốc trên Android, cho phép tích hợp Hoạt động đáng tin cậy trên web, API yêu cầu thanh toán và API Hàng hóa kỹ thuật số để triển khai quy trình mua hàng qua Google Play Billing. Chúng tôi dự kiến cũng sẽ có Bản dùng thử theo nguyên gốc này cho ChromeOS phiên bản 89.
Lưu ý quan trọng: API Google Play Billing có thuật ngữ riêng, bao gồm cả ứng dụng và các thành phần phụ trợ. Phần này chỉ đề cập đến một phần nhỏ của API dành riêng cho việc sử dụng Digital Merchandise API (API Hàng hoá kỹ thuật số) và Hoạt động đáng tin cậy trên web. Hãy nhớ đọc hướng dẫn Tài liệu về Google Play Billing và tìm hiểu các khái niệm của tài liệu này trước khi tích hợp vào một ứng dụng chính thức.
Quy trình cơ bản
Để cung cấp hàng hoá kỹ thuật số qua Cửa hàng Play, bạn cần định cấu hình danh mục của mình trên Cửa hàng Play Cửa hàng, cũng như kết nối Cửa hàng Play làm phương thức thanh toán từ PWA của bạn.
Khi bạn đã sẵn sàng thiết lập danh mục của mình, hãy bắt đầu bằng cách tìm phần Sản phẩm ở bên trái trình đơn bên trên Play Console:
Tại đây, bạn sẽ tìm thấy tuỳ chọn để xem các gói thuê bao và sản phẩm trong ứng dụng hiện có. Ngoài ra, bạn có thể hãy tìm nút tạo để thêm quảng cáo mới.
Để tạo một sản phẩm mới trong ứng dụng, bạn cần có mã sản phẩm, tên, nội dung mô tả và giá sản phẩm. Bây giờ là rất quan trọng để tạo mã sản phẩm có ý nghĩa và dễ nhớ, bạn sẽ cần sử dụng chúng sau này và mã không thể thay đổi sau khi tạo.
Khi tạo gói thuê bao, bạn cũng sẽ phải chỉ định kỳ thanh toán. Bạn có thể chọn liệt kê các lợi ích của gói thuê bao và thêm các tính năng như liệu bạn có bản dùng thử miễn phí hay không, giá ưu đãi, thời gian gia hạn và lựa chọn đăng ký lại.
Sau khi tạo từng sản phẩm, hãy kích hoạt sản phẩm để có thể sử dụng trong ứng dụng của bạn.
Nếu muốn, bạn có thể thêm sản phẩm qua API Nhà phát triển Play.
Sau khi thiết lập danh mục của bạn, bước tiếp theo là thiết lập quy trình thanh toán từ PWA. Bạn sẽ sử dụng kết hợp API Hàng kỹ thuật số và API Yêu cầu thanh toán để đạt được này.
Tìm nạp giá sản phẩm bằng Digital Merchandise API (API Hàng hoá kỹ thuật số)
Khi sử dụng Google Play Billing, bạn cần đảm bảo rằng giá mà người dùng nhìn thấy khớp với nhau giá tại trang thông tin trên Cửa hàng Play. Việc đồng bộ hoá giá theo cách thủ công là điều không thể, vì vậy, API Hàng hoá kỹ thuật số cung cấp một cách để ứng dụng web truy vấn khoản thanh toán cơ bản về giá:
// The SKU for the product, as defined in the Play Store interface
async function populatePrice(sku) {
try {
// Check if the Digital Goods API is supported by the browser.
if (window.getDigitalGoodsService) {
// The Digital Goods API can be supported by other Payments provider.
// In this case, we're retrieving the Google Play Billing provider.
const service =
await window.getDigitalGoodsService("https://play.google.com/billing");
// Fetch product details using the `getDetails()` method.
const details = await service.getDetails([sku]);
if (details.length === 0) {
console.log(`Could not get SKU: "${sku}".`);
return false;
}
// The details will contain both the price and the currenncy.
item = details[0];
const value = item.price.value;
const currency = item.price.currency;
const formattedPrice = new Intl.NumberFormat(navigator.language, {
style: 'currency', currency: currency }).format(value);
// Display the price to the user.
document.getElementById("price").innerHTML = formattedPrice;
} else {
console.error("Could not get price for SKU \"" + sku + "\".");
}
} catch (error) {
console.log(error);
}
return false;
}
Bạn có thể phát hiện dịch vụ hỗ trợ cho Digital Merchandise API (API Hàng hoá kỹ thuật số) bằng cách kiểm tra xem getDigitalGoodsService() có phải là
có sẵn trên đối tượng window.
Sau đó, hãy gọi window.getDigitalGoodsService() bằng tham số giá trị nhận dạng Google Play Billing.
Thao tác này sẽ trả về một phiên bản dịch vụ cho Google Play Billing và các nhà cung cấp khác có thể triển khai dịch vụ hỗ trợ
cho API Hàng hóa kỹ thuật số và sẽ có các giá trị nhận dạng khác nhau.
Cuối cùng, hãy gọi getDetails() trên tham chiếu đến đối tượng Google Play Billing truyền SKU cho
mặt hàng dưới dạng thông số. Phương thức này sẽ trả về một đối tượng chi tiết chứa cả giá và
đơn vị tiền tệ của mặt hàng mà người dùng có thể nhìn thấy.
Bắt đầu quy trình mua
API yêu cầu thanh toán cho phép quy trình mua hàng trên web và cũng được dùng cho Google Play Tích hợp thanh toán. Xem Cách hoạt động của API yêu cầu thanh toán này để tìm hiểu thêm nếu bạn mới sử dụng phương thức Thanh toán API yêu cầu.
Để sử dụng API này với Google Play Billing, bạn sẽ phải thêm một phương thức thanh toán
có một thước đo được hỗ trợ có tên là https://play.google.com/billing và thêm SKU làm một phần của dữ liệu
cho công cụ:
const supportedInstruments = [{
supportedMethods: "https://play.google.com/billing",
data: {
sku: sku
}
}];
Sau đó, hãy tạo một đối tượng PaymentRequest như bình thường và sử dụng API như bình thường
const request = new PaymentRequest(supportedInstruments, details);
Xác nhận giao dịch mua
Sau khi giao dịch hoàn tất, bạn cần phải sử dụng Digital hàng API (API Hàng hoá kỹ thuật số) để xác nhận
thanh toán. Đối tượng phản hồi từ PaymentRequest sẽ chứa một mã thông báo mà bạn sẽ dùng để
xác nhận giao dịch:
const response = await request.show();
const token = response.details.token;
const service =
await window.getDigitalGoodsService("https://play.google.com/billing");
await service.acknowledge(token, 'onetime');
API Hàng hoá kỹ thuật số và Payment Request API không có thông tin về danh tính của người dùng. Là một kết quả là bạn có quyền liên kết giao dịch mua đó với người dùng trong phần phụ trợ của bạn và đảm bảo họ đã quyền truy cập vào các mặt hàng đã mua. Khi liên kết giao dịch mua hàng với người dùng, hãy nhớ lưu mã thông báo giao dịch mua, vì bạn có thể cần mã này để xác minh xem giao dịch mua đã bị huỷ hay được hoàn tiền hay chưa hoặc một gói thuê bao vẫn đang hoạt động. Hãy xem API Thông báo theo thời gian thực dành cho nhà phát triển và API Nhà phát triển Google Play vì chúng cung cấp các điểm cuối để xử lý những trường hợp đó trong phần phụ trợ của bạn.
Kiểm tra các quyền hiện có
Người dùng có thể đã sử dụng mã khuyến mãi hoặc có thể đang sử dụng gói thuê bao sản phẩm của bạn. Ngang bằng
để xác thực rằng người dùng có các quyền thích hợp, bạn có thể gọi
Lệnh listPurchases() đối với dịch vụ hàng hoá kỹ thuật số. Thao tác này sẽ trả về tất cả giao dịch mua mà
khách hàng đã thực hiện trong ứng dụng của bạn hay không. Đây cũng sẽ là nơi để thừa nhận mọi điều chưa được ghi nhận
giao dịch mua để đảm bảo người dùng sử dụng đúng các quyền của họ.
const purchases = await itemService.listPurchases();
for (p of purchases) {
if (!p.acknowledged) {
await itemService.acknowledge(p.purchaseToken, 'onetime');
}
}
Tải lên Cửa hàng Play ChromeOS
Hoạt động đáng tin cậy trên web cũng hoạt động kể từ Chrome 85 trong Cửa hàng Play ChromeOS. Quy trình để đưa ứng dụng của bạn lên cửa hàng cũng giống như cho ChromeOS và Android.
Sau khi bạn tạo gói ứng dụng, Play Console sẽ hướng dẫn bạn thực hiện các bước bắt buộc để đưa ứng dụng lên Cửa hàng Play. Trong tài liệu Play Console, bạn có thể tìm thấy sự trợ giúp để tạo danh sách ứng dụng của bạn, quản lý tệp APK và các cài đặt khác cũng như hướng dẫn để kiểm thử và phát hành ứng dụng một cách an toàn.
Để hạn chế ứng dụng của bạn chỉ dùng cho Chromebook, hãy thêm cờ --chromeosonly khi khởi chạy
ứng dụng trong Bubblewrap:
bubblewrap init --manifest="https://example.com/manifest.json" --chromeosonly
Khi xây dựng ứng dụng theo cách thủ công mà không sử dụng Bubblewrap, hãy thêm một cờ uses-feature vào
Tệp kê khai Android:
<uses-feature android:name="org.chromium.arc" android:required="true"/>
Nếu trang thông tin của bạn được chia sẻ với một ứng dụng Android, thì phiên bản gói chỉ dành cho ChromeOS sẽ luôn có cao hơn phiên bản gói ứng dụng Android. Bạn có thể thiết lập phiên bản gói ChromeOS thành cao hơn phiên bản Android, nên bạn không phải cập nhật cả hai phiên bản bản phát hành.