6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

MonacaからCustom Schemeプラグインがリリースされてた

Last updated at Posted at 2020-04-01

2021/3/16追記
Cordova 10からCustom Schemeプラグインは削除されました。
https://docs.monaca.io/ja/release_notes/20201119_cordova10/

Monacaより「Custom Schemeプラグイン」がリリースされていました。
https://ja.monaca.io/headline/#entry_5e835238e78885e357efb480

これは何?

以下記事の通り、WKWebViewでは、file://スキームのローカルリソース(wwwディレクトリ配下のファイル)にXHRでアクセスすることができません。それを解決するためのプラグインの様です。
https://qiita.com/kishisuke/items/d201790aeae2129ff2e3#file%E3%82%B9%E3%82%AD%E3%83%BC%E3%83%A0%E3%81%B8%E3%81%AE%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B920200323%E8%BF%BD%E8%A8%98

「このプラグインを利用することで、WKWebView上においても、ローカルに配置されているリソースへのAjaxアクセスが可能となります。」とあります。実際にインストールしてみると、確かにローカルリソース(wwwディレクトリ配下のファイル)にXHRでアクセスできました。

動きを見てみる

デバッグしてみたところ、cordova-plugin-wkwebview-file-xhrの様にXHRをフックしているわけではなく、wwwディレクトリ配下のファイル全体をカスタムスキームを通じてアクセスする手法を取っているようです。
例えば、index.htmlは以下の様なURLになっています。

monaca-app://monaca.io/www/index.html

カスタムスキームではXHRのアクセス制限がないためローカルリソースにアクセスできる様になるわけです。cordova-plugin-wkwebview-file-xhrと異なり、プラグインの初期化を待たずにローカルリソースにアクセスできるため、よりベターな手法です。

なお、カスタムスキームを使ってローカルリソースにアクセスしているということは、WKURLSchemeHandlerを使っているはずです。このAPIはiOS11以降で追加されたため、このプラグインはiOS11以降でしか使用できないものと思われます。(実際に、iOS10ではアプリを起動することができませんでした)

なお、残念ながらこのプラグインはpublicなnpmレジストリで公開されていません。(2020/4/1時点)
Monaca LocalKitMonaca CLIで開発を行っている場合は、ローカル環境でnpm installを実行する際に一度package.jsonのdependenciesからmonaca-plugin-customschemeを削除する必要があります。

2020/4/6追記
publicなnpmレジストリで公開されていました!これで、ローカル環境でnpm installを実行してもエラーになりません。(ただし、中身はpublishされていないようなので、ローカルのCordova環境ではビルドできません。Monacaでビルドしましょう!)
https://www.npmjs.com/package/monaca-plugin-customscheme

余談

ちなみに、Ionicが提供するWKWebViewのEngineもカスタムスキームを使ってローカルリソースにアクセスできます。
MonacaのCustom Schemeプラグインはcordova-plugin-wkwebview-engineと併用できる点が良いですね。次のメジャーバージョンでCordova本体にWKWebViewが統合されるので、

6
3
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?