Monacaに限った話ではありませんが、Mapbox JS SDKを使う際にはCSP( Content Security Policy)の設定が必要です。
Framework7でMapboxを使って開発を行っている再、開発時にはGoogle Chromeを使っていました。Framework7プロジェクトでは npm run start
で http://localhost:8080/
が開くので便利です。
そして、Google Chromeでアクセスすると、最初に次のようなエラーが出ます。
Refused to create a worker from 'blob:http://localhost:8080/〜' because it violates the following Content Security Policy directive: "default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: content:". Note that 'worker-src' was not explicitly set, so 'default-src' is used as a fallback.
ということで、 CSP に worker-src
を追加します。
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: content:; worker-src blob:">
これでGoogle Chromeでは問題なく動くのですが、MonacaやCordovaでiOSアプリとして動作確認を行おうとするとエラーが出ます。
Refused to load blob:app://localhost/〜 because it appears in neither the child-src directive nor the default-src directive of the Content Security Policy.
なんとSafari(WKWebView)ではworker-srcディレクティブが存在しないようです。ということでCSPを次のように修正します。 default-src
側で設定せざるを得ないようです。
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: content: blob:">
こうするとGoogle Chrome、iOSアプリのどちらでも動くようになります。
ついでに
WKWebViewになってからなのか、CordovaアプリでHTML5 APIとしての navigator.geolocation.getCurrentPosition
が使えなくなっていました。開発策としてはGeolocation - Apache Cordovaを使ってCordovaプラグインを使って位置情報を取得することになります。APIはHTML5 APIと同じなので、コードの修正は不要です。
cordova plugin add cordova-plugin-geolocation