back-button - PWA 中的后退按钮不会关闭应用程序

Question

我正在开发 PWA，刚刚意识到硬件后退按钮似乎无法正常工作。后退按钮将一页一页地返回，直到到达第一页，然后如果继续按它，则不会发生任何事情。我希望窗口最小化(将应用程序发送到后台)，但这只有在按下“主页”按钮时才会发生。

[编辑]这不仅仅是一个独立的问题。后退按钮->最小化在移动设备上的浏览器中也无法正常工作(适用于我尝试过的其他页面)。

我在两部三星手机 S8 和 Xcover 4 上重现了此行为。

PWA 是使用 Angular (1.5)/Boostrap 构建的

如何调试这样的东西？每当我在手机上浏览网站时，Chrome Inspect 模拟器都会显示空白。似乎只有在检查器模拟器中导航时它才有效。

我是否错过了 list 中的某个设置或其他内容？我已经包括了我的 list 和服务人员。另外，我想澄清的是，我没有尝试操纵应用程序内的后退按钮......据我所知，这甚至是不可能的。

list :

{
  "name": "My app",
  "start_url": "/login?utm_source=web_app_manifest",
  "short_name": "My app",
    "display": "standalone",
    "background_color": "#111",
  "theme_color": "#111",
  "description": "This is a description of My app", 
  "orientation": "portrait",
    "related_applications": [
    {
      "platform": "itunes",
      "url": "http://itunes.apple.com/us/app/myapp/id[removed]"
    }
  ],
  "icons": [
    {
      "src": "gfx\/fg\/favicon-16x16a.png",
      "sizes": "16x16",
      "type": "image\/png",
      "density": "0.75"
    },
    {
      "src": "gfx\/fg\/android-icon-36x36.png",
      "sizes": "36x36",
      "type": "image\/png",
      "density": "0.75"
    },
    {
      "src": "gfx\/fg\/android-icon-48x48.png",
      "sizes": "48x48",
      "type": "image\/png",
      "density": "1.0"
    },
    {
      "src": "gfx\/fg\/android-icon-72x72.png",
      "sizes": "72x72",
      "type": "image\/png",
      "density": "1.5"
    },
    {
      "src": "gfx\/fg\/android-icon-96x96.png",
      "sizes": "96x96",
      "type": "image\/png",
      "density": "2.0"
    },
    {
      "src": "gfx\/fg\/android-icon-144x144.png",
      "sizes": "144x144",
      "type": "image\/png",
      "density": "3.0"
    },
    {
      "src": "gfx\/fg\/android-icon-192x192.png",
      "sizes": "192x192",
      "type": "image\/png",
      "density": "4.0"
    }
  ]
}

Serviceworker(来自 pwabuilder.com)

//Install stage sets up the offline page in the cache and opens a new cache
self.addEventListener('install', function(event) {
  event.waitUntil(preLoad());
});

var preLoad = function(){
  //console.log('[PWA Builder] Install Event processing');
  return caches.open('pwabuilder-offline').then(function(cache) {
    //console.log('[PWA Builder] Cached index and offline page during Install');
    return cache.addAll(['/offline.html', '/index.html']);
  });
}

self.addEventListener('fetch', function(event) {
  //console.log('The service worker is serving the asset.');
  event.respondWith(checkResponse(event.request).catch(function() {
    return returnFromCache(event.request)}
  ));
  event.waitUntil(addToCache(event.request));
});

var checkResponse = function(request){
  return new Promise(function(fulfill, reject) {
    fetch(request).then(function(response){
      if(response.status !== 404) {
        fulfill(response)
      } else {
        reject()
      }
    }, reject)
  });
};

var addToCache = function(request){
  return caches.open('pwabuilder-offline').then(function (cache) {
    return fetch(request).then(function (response) {
      //console.log('[PWA Builder] add page to offline'+response.url)
      return cache.put(request, response);
    });
  });
};

var returnFromCache = function(request){
  return caches.open('pwabuilder-offline').then(function (cache) {
    return cache.match(request).then(function (matching) {
     if(!matching || matching.status == 404) {
       return cache.match('offline.html')
     } else {
       return matching
     }
    });
  });
};

Answer 1

我有完全相同的问题，我在我的案例中找到了原因。我的 PWA 正在对历史记录做几件事，但问题的根源归结为:

Android 上的 Chrome 不允许通过 History.back() 以编程方式关闭全屏 PWA。您可以多次调用history.back()，它永远不会关闭应用程序。即使历史记录为空，以编程方式调用history.back()也不会关闭应用程序。关闭应用程序的唯一方法是物理按后退按钮。当且仅当当前没有返回历史记录时，物理后按才会关闭应用程序。

更新更多详细信息:最终，上述问题导致后退按钮无法关闭应用程序。更深层次的原因在于我们的应用程序对历史所做的事情。我会尽量保持简单。当页面首次加载时，我们的应用程序会将状态推送到历史记录中，并尝试始终将此状态保留在历史记录中。每当发生反向导航时，应用程序都会操纵历史记录并确保重新推送状态。当应用程序检测到用户想要关闭应用程序时，它将停止执行其操作，并将递归调用history.back()，直到页面关闭。这在大多数情况下都可以正常工作，但在全屏 PWA 中不起作用。原因在我原来的回答中有描述。

总而言之，有一些方法可以轻松地破坏后退按钮关闭应用程序的功能。操纵历史记录时必须小心。