https://yourstop.info是PWA。当我在上面运行灯塔时,PWA得分为73,性能为60,请参见下图。
互动时间为19.1秒,这是得分较低的原因。启动时发生的情况是,当确定用户的位置时,将在后台下载相关公交车站的列表。的代码是
var firstLocationUpdate = false;
//var firstLocationUpdate = true;
if (navigator.geolocation) {
navigator.geolocation.watchPosition(updatePosition, showError, geoOptions);
}
else {
window.ys.userLocationError = "Geolocation is not supported by this browser";
}
function updatePosition(position) {
if (position != null) {
window.ys.userLat = position.coords.latitude;
window.ys.userLon = position.coords.longitude;
try {
// When google maps was not loaded this was throwing an exception
window.ys.userLocation = new google.maps.LatLng(window.ys.userLat, window.ys.userLon);
}
catch (e) {
console.log("Google maps not loaded when initializing geo.js, userLocation LatLng not set");
}
window.ys.userLocationError = "";
if (window.ys.userLocation != null && window.ys.userLocationTripMarker != null) {
window.ys.userLocationTripMarker.setPosition(window.ys.userLocation);
}
if (window.ys.userLocation != null && window.ys.userLocationSearchMarker != null) {
window.ys.userLocationSearchMarker.setPosition(window.ys.userLocation);
}
if (firstLocationUpdate == false) {
var event = document.createEvent("HTMLEvents");
event.initEvent('firstlocationupdate', true, true);
document.dispatchEvent(event);
firstLocationUpdate = true;
}
}
}
但是,这完全不会影响PWA的就绪性,页面已经完全呈现,并且用户可以在进行后台功能时执行其他任务。如果在上面的代码段中, firstLocationUpdate 初始化为 true ,并且阻止了后台下载,那么灯塔得分会高得多,如此处所示
据我所知,这两种情况都显示出完全相同的用户体验。但是执行后台停止下载的好处是 Locate the Nearest Stops 操作的执行速度更快。
PWA得分较低的问题是Chrome不再自动显示Web应用程序安装横幅。因此,我处于需要做出选择的情况下,当前的偏好是进行后台下载。
所以问题是,有没有一种解决方法可以使我的PWA得分都很高,并且可以进行后台下载?
还是有什么方法可以影响灯塔如何评估PWA,无论如何,在我看来,背景下载导致灯塔延长了互动时间,这是不正确的行为?