渐进式Web应用程序的灯塔评分

时间:2019-03-13 11:50:27

标签: progressive-web-apps lighthouse

https://yourstop.info是PWA。当我在上面运行灯塔时,PWA得分为73,性能为60,请参见下图。

enter image description here

互动时间为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 ,并且阻止了后台下载,那么灯塔得分会高得多,如此处所示

enter image description here

据我所知,这两种情况都显示出完全相同的用户体验。但是执行后台停止下载的好处是 Locate the Nearest Stops 操作的执行速度更快。

PWA得分较低的问题是Chrome不再自动显示Web应用程序安装横幅。因此,我处于需要做出选择的情况下,当前的偏好是进行后台下载。

所以问题是,有没有一种解决方法可以使我的PWA得分都很高,并且可以进行后台下载?

还是有什么方法可以影响灯塔如何评估PWA,无论如何,在我看来,背景下载导致灯塔延长了互动时间,这是不正确的行为?

0 个答案:

没有答案