PWA - 매니페스트 속성 "display": "standalone"이 안드로이드에서 작동하지 않습니다.

Question

나는 PWA의 정말 이상한 행동을 발견했습니다. Windows에서 "독립 실행 형"모드로 시작할 수 있지만 Android 기기에서 동일한 작업을 수행하려고 할 때 "독립형"값을 무시하고 Chrome (Android 7.0, Chrome-Android v62.x)에서 URL을 엽니 다. . 또한 Chrome-Android 베타 v63.x (relating to this post what refers to a bug in chrome 62.x)에서는 작동하지 않습니다. Manifest Validator 및 등대로 매니페스트 파일을 확인했습니다. 두 도구 모두 파일의 유효성을 검사하고 오류/문제점을 표시하지 않습니다. "Add to Homescreen"대화 상자가 (처음 시작할 때마다) 직접 표시되며 PWA를 홈 화면에 추가 할 수 있습니다. 서비스 근로자가 예상대로 작동하며 오프라인으로 앱을 실행하는 데 문제가 없습니다 (Windows 및 Android).

내 노트북의 프록시를 사용하여 Android 기기에서 테스트하고 있습니다 (관련성이있는 경우에 한함). 나는 또한 다른 안드로이드 장치를 시도했지만 같은 문제가 발생합니다.

참고 : 다른 PWA는 예상대로 작동합니다. 매니페스트 파일이 추가 모바일 내 index.html을의 헤더에 연결되어

{ 
    "icons": [ 
    { 
     "src": "assets/android-chrome-36x36.png", 
     "sizes": "36x36", 
     "type": "image\/png" 
    }, 
    { 
     "src": "assets/android-chrome-48x48.png", 
     "sizes": "48x48", 
     "type": "image\/png" 
    }, 
    { 
     "src": "assets/android-chrome-72x72.png", 
     "sizes": "72x72", 
     "type": "image\/png" 
    }, 
    { 
     "src": "assets/android-chrome-96x96.png", 
     "sizes": "96x96", 
     "type": "image\/png" 
    }, 
    { 
     "src": "assets/android-chrome-144x144.png", 
     "sizes": "144x144", 
     "type": "image\/png" 
    }, 
    { 
     "src": "assets/android-chrome-192x192.png", 
     "sizes": "192x192", 
     "type": "image\/png" 
    }, 
    { 
     "src": "assets/android-chrome-512x512.png", 
     "sizes": "512x512", 
     "type": "image\/png" 
    } 
    ], 
    "short_name": "My short name", 
    "name": "My not sooooo short name", 
    "theme_color": "#337ab7", 
    "start_url": "/index.html", 
    "background_color": "#ffffff", 
    "display": "standalone", 
    "orientation": "portrait" 
} 

: 여기

2048 as PWA 내의 manifest.json입니다

<meta name="mobile-web-app-capable" content="yes"> 
<meta name="theme-color" content="#337ab7"> 
<link rel="manifest" href="manifest.json"> 

웹 응용 프로그램은 angular2 빌드입니다 (앵귤러 씨앗), 누군가가 비슷한 문제에 직면했을 때를 대비해 ..

시간과 의견에 감사드립니다!

UPDATE 1 :

내가 내 모바일 장치에서 내 PWA에 액세스하기 위해 프록시를 사용하는 대신 내 로컬 네트워크에서 열린 포트를 통해 접속하고 있지 않다, 독립 기능이 잘 작동합니다 (그러나 서비스 - 작업자 등록이 실패합니다 ..). 나는 아직도이 "버그"가 프록시에서 왜 발생하는지 확신하지 못한다.

업데이트 2 :

내 진짜 질문은 왜 이런 일입니까? 그리고 다른 하나는, 내가 찾은 모든 솔루션이 타협점을 가졌다면 실제 모바일 장치에서 PWA의 동작과 느낌을 어떻게 테스트 할 수 있습니까? 안드로이드 장치에 대한 테스트

내 방법 개발 환경 ...에 관하여 :

• 내 노트북의 IP 주소를 통해 내 로컬 네트워크에 안에 내 노트북 ​​및 액세스 포트를 열 (서비스 작업자 아니다 작업부터하지 HTTPS없이 로컬 호스트,하지만 PWA는
• 는 (서비스 작업자가 작동하는 독립 실행 형 모드 실패)

Answer 1

위의 절충안없이 모바일 장치에서 PWA 테스트 솔루션을 발견했습니다. 지금 ngrok을 사용하고 있습니다. 내 로컬 호스트에 대한 터널을 만들어서 어디서든 https를 통해 액세스 할 수있게 해줍니다. 따라서 모든 스마트 폰, 태블릿 또는 에뮬레이터에서 테스트 할 수 있습니다. ngrok는 here을 다운로드 할 수 있으며 설치가 매우 쉽습니다. 단일 명령으로 특정 포트에 대한 터널을 만들 수 있습니다 (예 :8080) :

ngrok http 8080 

그럼에도 불구하고, 나는 여전히 내 안드로이드 장치에 프록시를 설정할 때 전체 화면 옵션이 작동하지 않은 이유를 모르겠어요.

Answer 2

{ 
    "name": "name", 
    "short_name": "name", 
    "icons": [{ 
    "src": "images/icons/icon-128x128.png", 
     "sizes": "128x128", 
     "type": "image/png" 
    }, { 
     "src": "images/icons/icon-144x144.png", 
     "sizes": "144x144", 
     "type": "image/png" 
    }, { 
     "src": "images/icons/icon-152x152.png", 
     "sizes": "152x152", 
     "type": "image/png" 
    }, { 
     "src": "images/icons/icon-192x192.png", 
     "sizes": "192x192", 
     "type": "image/png" 
    }, { 
     "src": "images/icons/icon-256x256.png", 
     "sizes": "256x256", 
     "type": "image/png" 
    }, { 
     "src": "images/icons/icon.png", 
     "sizes": "512x512", 
     "type": "image/png" 
    }], 
    "start_url": "./index.html", 
    "background_color": "#3E4EB8", 
    "theme_color": "#2F3BA2", 
    "display": "standalone" 
} 

내 노트북의 IP로 안드로이드 장치에 프록시 설정) 독립형 모드 -.-에서 시작