PWA 독립 실행 형 모드에서 Bowser 모드로 열기

기존 각도 4 프로젝트에서 Progressive Web App을 구축했습니다. 매니페스트 파일을 추가 할 때까지 모든 것이 잘 작동했습니다. 브라우저에서 응용 프로그램에 액세스하면 홈 화면에 추가하라는 메시지가 나타납니다. 그러나 추가 한 후 홈 화면에서 아이콘을 클릭하면 의 Standalone mode 앞에 열립니다.PWA 독립 실행 형 모드에서 Bowser 모드로 열기

나는 그것이 왜 그렇게 행동하고 있으며 무엇이 문제가 될 수 있는지 알지 못합니다. 벨로우가 내 매니 페스트 야 .Json file 날 도와 줘.

{ 
    "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" 
}

출처

2017-10-02 tony pro

누락 된 쉼표 (,)가 (])와 ("background_color": "# 43a047") 인 .json 파일을 확인 했습니까? –

comas가 추가되었지만 여전히 작동하지 않습니다. 감사합니다. @ StampyCode의 해결책을 찾으려고합니다. –

응용 프로그램의 다른 부분에 문제가있을 수 있습니다.

매니페스트는 서비스 개발자 자바 스크립트 파일과 같은 다른 부분이 올바르게 구성되지 않았거나 서비스 작업자에게 연결되는 자바 스크립트가 올바른 위치를 가리키고 있지 않으면 응용 프로그램 전체 PWA가되기위한 모든 기준을 충족하지 못합니다.

모든 조건을 충족하지 않으면 전체 PWA의 모든 기능을 반드시 제공하지는 않습니다.

응용 프로그램을 확인하기 위해 구글 등의 도구를 사용하여

가 올바르게 구성되어 https://developers.google.com/web/tools/lighthouse/

가 제대로 구성되지 않았 음을 또 다른 좋은 힌트입니다 당신은 크롬 브라우저에서 처음으로 웹 사이트를 탐색 할 때 바탕 화면에 앱을 추가하라는 메시지가 표시되지 않습니다. 또한 바탕 화면에 수동으로 추가하는 경우 데스크톱 아이콘의 내부에 작은 Chrome 아이콘이있는 경우 PWA의 전체 요구 사항을 충족하지 못한다는 표시이기도합니다.

출처

2017-10-03 08:50:20 StampyCode

Lighthouse에서 처리 한 다음과 같은 @StampyCode가이 문제를 해결해 주셔서 대단히 감사합니다. :) –

PWA 독립 실행 형 모드에서 Bowser 모드로 열기

답변

관련 문제