PWAスタンドアロンモードでBowserモードで開く

Question

既存の角度4プロジェクトからProgressive Web Appを構築しました。マニフェストファイルを追加するまではすべてうまくいきました。ブラウザからAppにアクセスすると、それをホーム画面に追加するかどうかを尋ねるメッセージが表示されます。しかし、それを追加した後、ホーム画面からアイコンをクリックすると、のStandalone modeの欄に表示されます。

私はそれがなぜ行動しているのか、何が問題なのか分かりません。ベローは私のマニフェストです.Jsonファイルは私を助けてください。

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

Answer 1

アプリケーションの他の部分でおそらく問題があります。

マニフェストは一部に過ぎません。サービスエンジニアのJavaScriptファイルなどの他の部分が正しく設定されていない場合、またはサービスワーカーに接続するJavaScriptが適切な場所を指していない場合は、完全なPWAであるという基準のすべてを満たしていません。

すべての基準を満たしていない場合は、必ずしも完全なPWAのすべての機能が提供されるとは限りません。

アプリケーションが正しく設定されていることを確認するためにGoogleの灯台ツールを使用します。 https://developers.google.com/web/tools/lighthouse/

それが正しく設定されていないことをもう一つの良いヒントは、あなたがChromeブラウザ上で初めてウェブサイトに移動したときにということですデスクトップにアプリを追加するように促すメッセージは表示されません。 また、デスクトップに手動で追加する場合、デスクトップアイコンの内部に小さなChromeアイコンがある場合は、これもPWAの要件を満たしていないことを示しています。