PWA中的“后退”按钮不会关闭应用程序。

Question

我正在做一个PWA，刚刚意识到硬件后退按钮似乎不能正常工作。“后退”按钮将逐页返回，直到到达第一页为止，如果您继续按它，则不会发生任何事情。我希望窗口最小化(将应用程序发送到后台)，但只有在按下"home“按钮时才会发生这种情况。

编辑它不仅仅是一个独立的问题。Backbutton>minimize也不适用于移动浏览器中的这个页面(对我尝试过的其他页面也有效)。

我在三星的两款手机S8和Xcover 4上复制了这种行为。

PWA是用角(1.5) /助力带构建的。

你怎么能调试这样的东西？每当我在手机上浏览一个网站时，Chrome检测模拟器就会变成空白。它似乎只有在检查器模拟器中导航时才能工作。

我是不是错过了舱单上的设置什么的？我已经包括了我的舱单和服务人员。另外，我想表明，我没有尝试过操纵应用程序中的后退按钮.afaik那是不可能的。

宣言：

{
  "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中不起作用。原因已在我原来的答覆中加以说明。

总之，有一些方法可以轻松打破back按钮关闭应用程序的能力。你在操纵历史的时候要小心。