Question

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

[编辑]这不仅仅是一个独立的问题。 Backbutton-＆gt;最小化也不适用于此页面的移动浏览器（适用于我尝试过的其他页面）。

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

PWA使用Angular（1.5）/ Boostrap构建

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

我是否错过了清单中的某个设置？我已经包含了我的清单和服务工作者。另外我想明确表示我没有试图操纵应用程序中的后退按钮... 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"
    }
  ]
}

服务人员（来自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中则无法使用。原因在我的原始答案中有所描述。

总而言之，有多种方法可以轻松打破后退按钮关闭应用程序的功能。处理历史记录时必须小心。

PWA中的后退按钮不会关闭应用

1 个答案: