Flutter: インラインAndroidおよびiOSWebView

このためのユースケースの例を追加します。

一部のレンダリングはWebViewによって処理されますが、ナビゲーションなどのコントロールはネイティブUIウィジェットによって処理されるハイブリッドAndroidアプリケーションがあります。 バージョンをFlutterに移植したいのですが、これを機能させるための要件は次のとおりです。

• レンダリングされたツリーにWebViewを追加して、ナビゲーションボタンなどのネイティブウィジェットと一緒に使用できるようにする方法。
• WebViewでJSとの対話を可能にする方法（このような
• WebViewからのHTTPリクエストをインターセプトする方法。

ここの最後の項目では、PDFファイルのコンテンツをWebViewにストリーミングできます。 現在のAndroid実装は、WebViewからのHTTPリクエストをインターセプトし、リクエストされたPDFファイルのコンテンツをストリーミングバックします。 実装はここで見ることができ

私はFlutterを初めて使用するので、用語の一部が間違っている可能性があります。何か説明が必要な場合はお知らせください。

現在、FlutterViewと組み合わせてネイティブビューをより簡単に使用できるようにするアプローチに移行しています。
https://docs.google.com/document/d/1DOfwpL6VojCAG_zjjcA_z5ekF7rTIohV8dWn2o7_IME/edit

これは、Flutterウィジェットツリー内にWebViewを配置する方法があることに関するものだと思います。 元のコメントでおっしゃるように、サードパーティの非Flutterライブラリによって提供されるビデオやマップを埋め込むために同様のものが必要です。

WebビューとFlutterの統合に関する更新はありますか？

誰かがフルスクリーンのウェブビューを実行するためのプラグインを開始したようです： https ：

アクティビティサブセットを実行することは素晴らしいスタートだと思います。 Webログインからoauthトークンを取得する必要があるアプリタイプのセット全体のロックを解除します。

FWIW：iOSバージョンのwebviewプラグインのPRは次のとおりです： https ：

@toufikzitouniのおかげでIOSにwebviewプラグインが追加されました👍https ： //pub.dartlang.org/packages/flutter_webview_plugin

これは私たちの短期優先リストにはありません。 次のマイルストーンに移動します。

Webビューとそれを操作する方法があれば素晴らしいと思います。 埋め込まれたYouTubeビデオを表示し、プレーヤーを制御したい。 現在、 https：//github.com/dart-flitter/flutter_webview_pluginを使用してい

@csbenjamin特に、WebViewよりもhttps://developers.google.com/youtube/android/player/を制御するYouTubeを探していますか？ または、WebViewも必要でしたか？ YouTube固有のプレーヤーをお探しの場合は、新しいバグを報告してください。これは間違いなく合理的なリクエストです。 :)

はい、YouTubeプレーヤーを探しています。 ウェブビューからは何も必要ありません。YouTubeプレーヤーだけです。 新しい号を開きます。 ありがとう

支払いWebフォームを開く必要があり、この機能は私たちにとってブロッカーです😢

@megatolya webviewプラグインはあなたのために仕事をすることができませんか？

@ lejard-h
残念だけど違う。 ページ上の任意の場所にWebフォームをレンダリングするには、機会が必要です。 他のコンテンツの上や別のページだけではありません。 スクロールを手動で制御する（Webビューの位置を変更する）のは、私たちには複雑すぎるようです。

この問題は設計上の問題であることを理解していますが、私見では、この機能は無視するのが非常に基本的です。

これは間違いなく私たちがやろうとしていることであり、多くのユースケースにとって重要であることに同意します。

悲しいことに、この問題は、 @ jxsonが上記で述べたもの、およびBasecampがここでブログに書いたものと同様のユースケースもあるため、Flutterを検討する上での
https://m.signalvnoise.com/basecamp-3-for-ios-hybrid-architecture-afc071589c25

Flutterを単独で使用して、一度だけ書き込み、両方のモバイルプラットフォームにデプロイすることは、すでに成功しています。 しかし、私たちはさらに一歩進んで、導入する新機能に常に追いつく必要なしに、エクスペリエンス全体を可能な限りネイティブに近づけるのに十分なネイティブコンポーネントを備えたハイブリッドアプリにすべてのWeb機能を導入したいと考えています。私たちのウェブ版で。

この問題に関連してロードマップについて共有できるものはすべて、本当に役に立ちます。

現在、いくつかのコード変更に取り組んでおり、iOS上のFlutterでインラインWebViewが機能する可能性があります。 AndroidのFlutterViewsのインラインWebViewは、少し離れています。 申し訳ありませんが、それ以上の詳細はありません。 ：/

これは間違いなく私たちのリストのトップに近づいています。

更新していただきありがとうございます。

この時点で、これがベータ版か1.0リリースのブロッカーかを判断できますか？

Beta 1がリリースされてから、WebViewウィジェットのサポートに関するニュースはありますか？

ありがとう

@eseidelGoogle <<バンプ>>

https://github.com/flutter/flutter/issues/73をフォローすることをお勧めします。これらの両方に必要な作業は類似しています。 ステータスは、17日前に報告したものと非常によく似ています。申し訳ありません。 WebViewの状況は、ここで説明されているマップとほぼ同じです： https ：

FlutterでWebviewを作成することを検討している間、文字列からhtmlをロードできるようにし、WebビューにベースURL（htmlで参照されるリソース（.css、.js、imagesなど）をロードする）も指定すると便利です。 、iOS（以下に表示）およびAndroidで実行できるように。
webView.loadHTMLString(htmlString, baseURL: locationWhereResourcesAreLocated);

私にとっても、Flutterは完全に機能するWebViewコントロールがないオプションではありません。これは、HTML、ローカルおよびリモートURLをロードし、JavaScriptを実行し、WebViewでFlutterコードとJavaScript間の通信を可能にします。

Webビューとフラッターの統合に関する更新はありますか？

ええ、これも私にとって非常に役に立ちます。

agreenshに同意します-文字列からのロードはケーキのアイシングになります。 たぶんローカルファイルからも（少なくともAndroidでは？）？ ファイル：URLはそのために機能しますか？ Assetsフォルダーから直接ロードする方法はありますか？ ありがとう

@IanDarwin https://github.com/dart-flitter/flutter_webview_plugin/issues/23#issuecomment -367618709には、ここでも機能するはずのいくつかの提案が含まれています

アプリケーションにフラッターを使用する予定ですが、上記のように、現在のSDKは他のフラッターウィジェットでWebビューをサポートしていません。これは、モバイルアプリケーション開発SDKとしてフラッターを使用する上での大きな障害です。

これがIMOに追加されるまで、フラッターは安定してヒットしないはずです。

インラインWebViewに関する更新はありますか？

@jaiminmehtadxredおそらく、

@eseidelGoogle何か進展はありますか？ flutter_webview_pluginは素晴らしいですが、webviewはインラインではありません。 私たちを助けてください:)

スクロール可能な領域内（コレクションビューセルとして）のWKWebViewとMKMapViewに大きく依存するメッセージングアプリ（www.touchmoon.com）があります。 私たちのAndroidアプリは遅れを取っているため、ReactNativeを使用してゼロから書き直すという強力なイニシアチブがあります（Skype、Discord、Instagramなど）。
私はFlutterが好きですが、この機能がないことは、議論が残っていないという限界点です。
何か予測はありますか、これがフラッターの第一級市民になる可能性はありますか？

Webviewが実装されるまで、私たちが考えているアプリを構築することはできません...ステータスはどうですか？ これは多くの設計にとって非常に重要なようです。

インラインWebビューがない場合、アプリは次のようになります...

https://gfycat.com/LawfulZanyGecko

@ eseidelGoogle 、@ mit-mit、私はここでたくさんのことを求めていることを知っていますが、これが以前のマイルストーンに移行できる可能性は

私たちはWebViewチームとさまざまなソリューションに取り組んでいます。 ただし、これにはしばらく時間がかかる場合があります。 現在、時間の見積もりはありませんが、現在取り組んでいます。 ：/

Flutterがプレビューバージョンを公開していることに気づきました。 これは、最初のリリースにインラインWebViewが含まれないことを意味しますか？

この機能のないプレビューは私には少し異例のようです：失望：

1.0ビルドではこの機能がない可能性があります。 私たちは積極的に取り組んでおり、品質基準を満たす方法で利用できるようになり次第、利用できるようにします。

それまでの間、これが必要な場合は、OEM Webビューを作成し、Flutterのビューの上に重ねることで、Java / KotlinまたはObjectiveC / Swiftから実行できます。 残念ながら、これは他のFlutterウィジェットと適切に合成されないため、これを解決策として推奨していません。

予測するのは非常に難しいです。

私たちが取り組んでいる1つの質問は、サポートするAndroidのバージョンです。 サポートするバージョンが多いほど、優れたソリューションを得るのに時間がかかる可能性があります。 Webビュープラグインが実行可能であるためにサポートする必要があるAndroidのバージョンについて意見がありますか？

私たちのユースケースでは、Android6以降で十分です。

私にとって、Android5以降は大丈夫だと思います。

私たちの場合も5+。 4.xをサポートする開発速度を急速に遅くしています
最初のビルドで遊びたがっています！

Leven。 6時27分à22 JUIN 2018、心純血[email protected] Aécrit：

私にとって、Android5以降は大丈夫だと思います。

—
このスレッドにサブスクライブしているため、これを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/flutter/flutter/issues/730#issuecomment-399317053 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AEFUX3nMYsc0KSQerrYlMd0vAkTPlUT4ks5t_HI9gaJpZM4GvC9x
。

私たちのためのAndroid5 +

Android 5.xの市場シェアは約20％で、減少傾向が強いです。
したがって、5.0（5％未満）で開発するのに6か月かかる場合、テストする電話は残りません。
:-)
簡単な場合は、フラッグシップモデル（7以降）用に開発してリリースし（試してみることができるように）、古いAndroidのサポートを拡張していきませんか？

@iostriz残念ながら、ターゲットとするバージョンによっては、バージョンごとに異なるAPIが導入されているため、まったく異なるアプローチを取る必要があります。 したがって、バージョンXの実行にNか月、バージョンX-1の実行にN + 5か月かかる場合、バージョンX、バージョンX-1の実行に2N + 5か月かかりますが、バージョンの実行にはN +5か月しかかかりません。 X-1とXを同時に。 それが理にかなっている場合。

5以上は市場の大部分をカバーしているので素晴らしいでしょう。 インラインウェブビューは多くのアプリにとって重要な要件です。この機能の優先順位を再検討してください。

2018年6月21日木曜日10:09:44 PM -0700に、IanHicksonは次のように書いています。

@iostriz残念ながら、ターゲットにしているバージョンによっては、
APIが異なるため、まったく異なるアプローチを取る
各バージョンで導入されました。 したがって、バージョンXを実行するのにNか月かかる場合、およびN + 5
バージョンX-1を実行するには数か月かかり、バージョンXを実行するには2N +5か月かかります
次にバージョンX-1ですが、バージョンX-1とXを同時に実行するにはN +5か月しかかかりません
時間。 それが理にかなっている場合。

それなら私は6歳以上に投票します

私たちの側から5以上

5以上は私にとって素晴らしいでしょう

5+は素晴らしいでしょう！

5+は問題ないはずです

私の意見では、5 +が進むべき道であるはずです。

WKWebViewのように、本当に素晴らしいソリューションが欲しいので、待つか貢献する準備ができています。

@minikin WKWebViewで発生している問題について、より具体的に教えてください。

Flutterバイナリの一部としてhtmlエンジンを埋め込むのは合理的ではないと思います。 したがって、プラットフォームで利用可能なhtmlエンジンに委任するソリューションが完成することになると思います（iOSではこれはおそらくWKWebViewになります）。

android 5+

@amirh
たとえば、現時点では、適切な方法でCookieを設定することはできません（iOS11、12beta）。 WKWebViewはそれを無視します。 したがって、回避策を使用する必要があります。

Flutterである種のWebViewを見たい理由は
d3jsのようなライブラリを使用して、静的なHTMLページをレンダリングします。

すべてのウィジェットの純粋なFlutter実装が理想的ですが。
いくつかのケースで例外を作る必要があると思います。Webビューもその1つです。

純粋なFlutterWebビューの実装（たとえば、すべてがDartで実装されている）は、可能であれば（アプリストアのポリシーが制限要因になる可能性があると思います）、巨大なプロジェクトになると思います。フラッター自体。

＃7053が解決されると、Webブラウザコード（ cefなど）を埋め込むプラグインが可能になる場合があります。 このようなアプローチは、依然としていくつかのアプリストアポリシーの課題に直面し、バイナリサイズを大幅に増加させると思います。

Webビューに採用すべき合理的かつ実用的なアプローチは、プラットフォームのWebビューをFlutterに埋め込むことだと思います。 私たちが取り組んでいることを行うには、重要な技術的課題がいくつかあります。 この特定の問題を使用して、Webビューをインライン化するための進行状況を追跡する必要があると思います。 インライン化の問題を解決することで、Webビューのユースケースの大部分が解き放たれると思いますが、徐々に取り組むWebビューの問題（サポートプラットフォームのWebビュー機能X）のリストはまだたくさんあると思います。別の問題で追跡する方が実用的です。

@amirhご

WebビューとFlutterの統合に関する更新はありますか？

更新？

私たちは積極的に取り組んでいます。＃19030の進捗状況を確認できます。

@amirh ：イェーイ！ ：+1：
@Hixie ：Hey Hixie :)アプリにも必要です。 多くの古いデバイスがそれに固執しているので、Android4.4は私にとっての要件です。

FWIW、アプリに特定のWebレンダリングエンジンを同梱して、デバイスに同梱されているさまざまなWebView実装と、その結果生じるデバイス依存のバグから自分自身を切り離すことができれば幸いです。 新しいWebView / Chromiumを使用するか、GeckoViewを使用することをお勧めします。 それはまた、依存関係の問題のほとんどを解決するはずだと思いますか？

Webエンジンを組み込むプラグインを思い付くことができるかもしれませんが、最初のブロッカーは＃7053だと思います。 これを行うと、リリースのバイナリサイズに重要な影響を与える可能性があります（一部のアプリでは問題ない場合があります）。
私が現在取り組んでいるのは、プラットフォームのWebビューをFlutterに埋め込むことです。

はい、プラットフォームWebViewは妥当な最初のステップであり、多くのアプリケーションにとって十分です。

関連するメモとして、フラッターアプリでJavaScriptコードを実行する別の方法があります。 現在、私はwebviewプラグインを作成して使用することに依存しています。 問題は、プラットフォームチャネルを使用しており、jsを非同期で実行する必要があることです。 同期関数で実行したいので、将来のビルダーを経由する必要はありません。

何か案は？

@manujbahl他に方法はありません。

良い一日、皆さんがやっている素晴らしい仕事。 Flutter webViewプラグインでのsetJavaScriptCanOpenWindowsAutomaticallyのサポートはありますか？

このリストにぶら下がっています:)
html / cssを表示し、APIを介してjs、uriを操作するだけの目に見えるコントロールのないシンプルなインラインWebビューが必要です-フリーサイズなどのWebビューウィジェット：+1：

実際のWebビューは私には面白くありませんが、インラインhtml / css + jsと拡張コンテンツ（googleやjs libsのフォントなど）をロードする機能

誰かが＃19030 AndroidView for Web Viewを試してみませんか？

@MisterJimsonここにいくつかのWIPがあります： https ：

せいぜい今のところプレビューとして扱う必要があります。いくつかの既知のバグがあり、iOSサポートが欠落しており、APIサーフェスは非常に最小限です（iOSのストーリーを理解するまで、この時点で意図的に）。

やあみんな、私はAndroidとiOSシステムの両方で動作する「InAppBrowser」プラグインをリリースしました： https ：

この最初のリリースは、Flutter APIで動作させるために、人気のあるcordova-plugin-inappbrowserを移植したものです。

@pichillilorenzoプラグインはインラインではなく、このチャネルはブラウザをインラインにすることについてです

@MichaelSowahええ、私はそれを知っています、AndroidViewがリリースされるときにも使用して作業します

編集：なぜここに「イマイチ」の絵文字があるのですか？ 少なくとも説明してください

iOSのアップデートはありますか？

何年も発行されているのに、フラッター自体にwebviewがない理由を説明できますか？ HTML 、 CSS 、 JSを表示することだけが、_NCSA Mosaic_のリリース以来最大のテクノロジーの進化ではありませんか？ _ウェブビュー_のない、_アプリ開発の未来と呼ばれる_テクノロジー（またはフレームワーク）とは何ですか？ _Google_ the webすべてではありませんか？ ：ウィンク：

これは私が理解していない点です：question：

例えば、_inline webview_手段は、電源との_UI_持っているHTML 、 CSSとうまくいけば、 JS 、_gitter webapp_でのメッセージに_code_のように、ウェブのような表示のものにしています_slack App_には対応しておらず、_syntaxhighlighting_用のJSライブラリなどが含まれています。

他のwidgetsとwebviewの違いは、すべてのWebといわゆるリッチテキストボックスの違いに似ています...

_hybrids_で行われていることすべてと、フラッターのようなフレームワークとの間にギャップがありますが、Webビューの力は、ブラウザー、_electron _、_ atom_および_VSCode_の力に他なりません。 _毎日_。

：混乱している：

@flddr重要な機能であるからといって、簡単かつ迅速に追加できるとは限りません。 むしろ反対です。
Googleには無制限のリソースがあり、チームに十分な数の開発者を追加するだけですぐに結果を得ることができると想定しているようです。 悲しいことに、それは世界がどのように機能するかではありません。

Flutterチームはこの機能の重要性を認識しており、 https：//github.com/flutter/plugins/tree/master/packages/webview_flutterで進捗状況を確認できますのでご安心

@zoechi ups、ありがとう、私はこれを言いたくありませんでした：confused：

私の推測では、フラッターUI自体が非常に強力でクリーンであるのに対し、_hybrids_と_natives_の間にギャップを保つために、開発中はさらに削除されましたが、_Webビューで何かを行う可能性_は低品質で終わる可能性があります（たとえば、_materialの欠落） design_またはそれらのポイント）。 webviewはすべてのものに誤用されることが多いため（_quick ndirty_）

リンクをありがとう

@flddrほとんどの場合、Dartでブラウザーを書き直したくなく（正当な理由で）、代わりにFlutterの追加機能を実装するために必要なネイティブ機能を利用できるようにしたいと思います。
この機能は最近利用可能になり、それ以来、webviewの実装が進行中です。

https://pub.dartlang.org/packages/flutter_webview_plugin （コミュニティの取り組み）はかなり前から利用可能ですが、Flutterウィジェットの上に常に表示されるという欠点がありました。 たとえば、ドロワーメニューを開くと、オーバーラップがある場合にWebビューの背後でメニューが開きます。
新しいプラグインは他のFlutterウィジェットでうまく機能します。

@zoechiあなたは正しいです-私は_dartの書き換え_を完全に監督しました。 私の意見では、フラッターがアプリ開発の未来であることを知っています。ツールは素晴らしいです。ダーツは素晴らしいです。しかし、実際にバックエンドを開発しているので、深く掘り下げることはできませんでした。 私は毎日flutter.ioを見て、1.0を待っています-そして時々、この希望に満ちた待機が何かについての話を引き起こします、主なことは何かが起こっていることです。

webviewについてのミストークでごめんなさい

ところで：申し訳ありませんが、私はあなたたちすべてが_google_をどのようにビーイングしているのか、そしてあなたのすべてのハードワークについて知っていますが、はい、あなたは_google_です。 他には何もありません。 _google_との最初の接触は、_altavista_を使用した最後の日でした。

だから、もし私がレースに勝つ会社に賭けることができれば、私は_google_に賭けるでしょう。

情報をありがとう:)私はこの問題についてこれ以上言うことはありません:)

FlutterはSkiaを使用してレンダリングし、ChromeはSkiaを使用してレンダリングするため、簡単に変換できるようです。 ただし、Flutterアプリはアップルストアでの実行が禁止されるため、この方法でブラウザをFlutterに追加することはできません。 クロスプラットフォーム機能がなければ、Flutterは放棄されます。 Googleはこの問題に時間をかける権利があります。

https://www.howtogeek.com/184283/why-third-party-browsers-will-always-be-inferior-to-safari-on-iphone-and-ipad/

@Rockvole非常に興味深い👍

最後に、インラインWebView （ InAppWebViewクラス）の初期サポートがあるflutter_inappbrowserの新しいバージョン（v0.5.1）をリリースしました！ 明らかに、このウィジェットは現時点ではAndroidでのみ利用可能であり、 AndroidViewは十分に安定していないため、いくつかの制限があります。

しかし、あなたはすでにそれで少し遊ぶことができます。 テストして使用できる関数やイベントはたくさんあります。 インラインWebViewの例は、プラグインリポジトリのREADME.mdファイルにあります。

編集1 ： AndroidとiOSの両方のインラインWebビューウィジェットをサポートする新しいバージョン（ 1.0.1 ）をリリースしました！ 🎉

編集2 ： flutter_inappwebviewに名前が変更され2.0.1です！ 新しいイベント、オプション、メソッドがたくさんあります。

私はただ興味があります：公式のWebViewプラグインは開発者プレビュー2でリリースされるべきであるとGoogle Developer Days China（先月）で言及されています。しかし、このプラグインwebview_flutterはまだ開発中です： https：// github .com / flutter / plugins / tree / master / packages / webview_flutter

@imWildCatGDDチャイナにご参加いただきありがとうございます。 明確にするために、GDDでWebViewウィジェットの_プレビュー_をデモしました。 GDD基調講演のビデオ録画（55:12）をチェックして、リリースされたとは言わなかったことを確認しました。 それでも、このプラグインがリリースされたという印象を受けたことをお詫び申し上げます。

@InMatrix誤解してすみません。 ご説明ありがとうございました。本当に感謝しています。 公式WebViewプラグインのリリースを楽しみにしています。

flutter / plugins＃890は、webview_flutterプラグインにiOSサポートを追加しました。
インラインWebビューのベースとなっているプラ​​ットフォームビューの埋め込みサポートは、まだ初期プレビュー段階です（https://github.com/flutter/flutter/issues/19030#issuecomment-437534853を参照）。

未解決の問題は、ウェブビューのラベルでタグ付けされてい関心のある問題に

iOSで試してみたい場合は、プレビューフラグを有効にする必要があることに注意してください。詳細については、以下を参照してください。
https://github.com/flutter/flutter/issues/19030#issuecomment -437534853

使用可能なWebViewがないことは、個人的には本当に大きな問題です。
flutter_inappbrowserは、完全なユーザビリティに非常に近い優れたパッケージですが、キーボードのサポートはまだありません。 残念ながら、私はコードエディタアプリを作成しようとしていました........

史上最高のモバイルフレームワークの1.0おめでとうございます：tada：

今ウェブビューを待ってい

明確にするために： webview_flutterプラグインはAndroidとiOSに埋め込まれたWebViewを提供し、現在開発者プレビュー中です。

Webviewタグを使用して問題と不足している機能を追跡しています。特定の問題に関心がある場合は、まだ問題がない場合は問題を提出するか、既存の問題に賛成することで解決できます。 PRももちろん大歓迎です😄

@amirh質問で

@danielRi https://pub.dartlang.org/packages/webview_flutter

私の問題にとって非常に興味深いトピックです。フラッターに適したWebビューを見つけるのに苦労した後、このトピックに出くわしました。 残念ながら、この新しいプラグイン（まだ開発者向けプレビュー）は、キーボードを開こうとしたときにAndroidで大きな問題が発生します。 リリースに関しては修正されますか？

私は、外部関数インターフェース+ Webkitが最良の方法だと思います。 インラインandroidwebviewまたはioswkwebviewは良い考えではありません

私は、外部関数インターフェース+ Webkitが最良の方法だと思います。 インラインandroidwebviewまたはioswkwebviewは良い考えではありません

長所と短所があります（明らかなものはバイナリサイズです）。
特定のユースケースでは、Webエンジンをバンドルすることがどのように推奨されるかを確実に理解しています。
プラットフォームインターフェイスを実装することにより、これを代替のwebview_flutter実装として追加できる場合があります。 誰かがそれにショットを与えるならば、私はそれについて傾くことに興味があります！