在独立模式下以Bowser模式打开PWA [英] PWA Openning in Bowser mode while being in Standalone mode

问题描述

我们从现有的angular 4项目构建了Progressive Web App.一切正常，直到我们添加了清单文件.当您从浏览器访问该应用程序时，它会提示您将其添加到主屏幕.但是添加后，当您从主屏幕上单击图标时，它会在Standalone mode的Browser mode接口中打开.

We built a Progressive Web App from an existing angular 4 project. everything worked well till we added the manifest file. When you access the App from the browser it prompt you to add it to the home screen. But after add it, when you clicked on the Icon from the home screen it open in the Browser mode intead of the Standalone mode.

我不知道为什么会这样，可能是什么问题.波纹管是我的manifest.json文件，请帮助我.

I don't know why it is behaving so and what can be the problem. Bellow is my manifest.json file please help me.

{
  "name": "Mobile Application",
  "short_name": "Mobile App",
  "icons": [
    {
      "src": "assets/icons/android-icon-36x36.png",
      "sizes": "36x36",
      "type": "image/png",
      "density": "0.75"
    },
    {
      "src": "assets/icons/android-icon-48x48.png",
      "sizes": "48x48",
      "type": "image/png",
      "density": "1.0"
    },
    {
      "src": "assets/icons/android-icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "density": "1.5"
    },
    {
      "src": "assets/icons/android-icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "density": "2.0"
    },
    {
      "src": "assets/icons/android-icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "density": "3.0"
    },
    {
      "src": "assets/icons/android-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "density": "4.0"
    }
  ]
  "background_color": "#43a047",
  "theme_color": "#43a047",
  "display": "standalone",
  "start_url": "/index.html",
  "orientation": "portrait"
}

推荐答案

应用程序的其他部分可能出了问题.

There's probably something wrong with some other part of your application.

清单仅是一部分-如果其他部分(例如，serviceworker JavaScript文件)配置不正确，或者连接到Service Worker的JavaScript没有指向正确的位置，则该应用程序不会不能满足成为完整PWA的所有条件.

The manifest is just one part - if the other parts, such as the serviceworker JavaScript file aren't configured correctly, or the JavaScript that connects to the service worker aren't pointing in to the right place, then the app doesn't meet all of the criteria to be a full PWA.

如果不满足所有条件，则不一定要具有完整PWA的所有功能.

If it doesn't meet all of the criteria, then it won't necessarily be given all of the functionality of a full PWA.

使用Google Lighthouse工具来验证您的应用程序已正确配置: https://developers.google.com/web/tools/lighthouse/

Use the Google Lighthouse tool to verify your application is configured correctly: https://developers.google.com/web/tools/lighthouse/

另一个未正确配置的好提示是，当您首次在Chrome浏览器上导航到该网站时，它不会提示您将应用程序添加到桌面. 另外，如果您手动将其添加到桌面上，如果桌面图标中有一个小的Chrome图标，则也表明它不满足PWA的全部要求.

Another good hint that it isn't correctly configured, is that when you navigate to the website for the first time on a Chrome browser, it doesn't prompt you to add the app to your desktop. Also, if you manually add it to your desktop, if the desktop icon has a small Chrome icon inside it, then this is also an indication it doesn't meet the full requirements of a PWA.

这篇关于在独立模式下以Bowser模式打开PWA的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！