7

PWA の非常に奇妙な動作に気付きました。Windows では「スタンドアロン」モードで起動できますが、Android デバイスで同じことをしようとすると、「スタンドアロン」の値が無視され、Chrome で URL が開きます (Android 7.0、Chrome-Android v62.x)。 . また、Chrome-Android Beta v63.x でも機能しません (この投稿に関連して、chrome 62.x のバグを参照しています)。マニフェスト バリデーターとライトハウスでマニフェスト ファイルを確認しました。どちらのツールもファイルを検証し、エラーや問題は表示されません。「ホームスクリーンに追加」ダイアログが (最初の起動ごとに) 直接表示され、PWA をホームスクリーンに追加できます。Service-worker は期待どおりに動作し、アプリをオフラインで (Windows と Android で) 実行しても問題はありません。

ノートブックにプロキシを使用して Android デバイスでテストしています (これが関連する場合に備えて)。別の Android デバイスも試しましたが、同じ問題が発生します。

注: さまざまな PWA が期待どおりに機能します。たとえば、2048 は PWA として機能します。

これが私の manifest.json です:

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

マニフェスト ファイルは、私の index.html のヘッダーにリンクされており、モバイルが追加されています。

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

Web アプリは、誰かが同様の問題に直面した場合に備えて、angular2 (angular-seeds) でビルドされています..

お時間とコメントありがとうございます！

更新 1:

モバイル デバイスから PWA にアクセスするためにプロキシを使用せず、代わりにローカル ネットワークから開いているポートを介してアクセスする場合、スタンドアロン機能は問題なく動作します (ただし、サービス ワーカーの登録は失敗します..)。この「バグ」がプロキシで発生する理由はまだわかりません。

更新 2:

私の本当の質問は、なぜこれが起こっているのですか？もう 1 つは、見つけたすべてのソリューションに妥協点がある場合、実際のモバイル デバイスで PWA の動作とフィーリングを実際にテストするにはどうすればよいかということです。開発環境について・・・

Android デバイスでの私のテスト方法:

  • ノートブックのポートを開き、ノートブックの IP アドレスを介してローカル ネットワーク内にアクセスします (サービス ワーカーは、https ではなく、localhost がないため機能していませんが、pwa はスタンドアロン モードで起動します -.-)
  • Android デバイスのプロキシをノートブックの IP に設定します (Service Worker は機能しますが、スタンドアロン モードは失敗します)
4

1 に答える 1

5

リストされた妥協なしに、任意のモバイル デバイスで PWA をテストするソリューションを見つけました。現在、ngrokを使用して、localhost へのトンネルを作成し、どこからでも https 経由でアクセスできるようにしています。これにより、スマートフォン、タブレット、またはエミュレーターでテストできます。ngrok はここからダウンロードでき、セットアップは非常に簡単です。単一のコマンドで、特定のポート (例: 8080) へのトンネルを作成できます。

ngrok http 8080

それにもかかわらず、Android デバイスにプロキシを設定するときに全画面表示オプションが機能しなかった理由はまだわかりません。

于 2017-12-04T11:49:26.423 に答える