Playful IT
EngineeringDesignStartupEducationEvent

Ionic 3でPWAアプリをサクッと試してみる

2018.12.27

はじめに

スマホアプリを開発していて、より多くのユーザーに使ってもらおうとするとどうしてもiOS版とAndroid版は最低限提供したくなる。しかし、iOS版をSwiftで、Android版をJavaやKotlinで作るとなると単純に2倍の作業量になるのでできればやりたくない。

iOS版アプリとAndroid版アプリを並行して作るフレームワークとしてはCordova・React Native・Flutterなどいくつかあるが、そもそもネイティブの機能をがっつり使わないちょっとしたアプリであればそれらすら大げさな気がしてしまう。

Webの技術で作ったページをアプリのように動作させるPWA（Progressive Web Apps）という技術が最近話題になっているので、今回は試しにIonicでPWAを作ってみることにした。

開発環境

  • macOS Mojave 10.14.1
  • ndenv 0.4.0-4-ga339097
  • nodejs v10.4.1
  • Ionic CLI CLI 4.5.0
  • iPhone XS（iOSバージョン12.1）

Ionicプロジェクトを新しく作る



$ ionic start PWASample

Ionic 4（Beta版）は今回は使わずに3を使う。



[INFO] You are about to create an Ionic 3 app. Would you like to try Ionic 4 (beta)?

       Ionic 4 uses the power of the modern Web and embraces the Angular CLI and Angular Router to bring you the best
       version of Ionic ever. See our blog announcement[1] and documentation[2] for more information. We'd love to
       hear your feedback on our latest version!

       [1]: https://blog.ionicframework.com/announcing-ionic-4-beta/
       [2]: https://beta.ionicframework.com/docs/

? Try Ionic 4? (y/N) N

テンプレートはblankを選んでみる。



Let's pick the perfect starter template! 💪

Starter templates are ready-to-go Ionic apps that come packed with everything you need to build your app. To bypass
this prompt next time, supply template, the second argument to ionic start.

? Starter template:
  tabs     | A starting project with a simple tabbed interface
❯ blank    | A blank starter project
  sidemenu | A starting project with a side menu with navigation in the content area
  super    | A starting project complete with pre-built pages, providers and best practices for Ionic development.
  tutorial | A tutorial based project that goes along with the Ionic documentation
  aws      | AWS Mobile Hub Starter

Ionic AppFlow（アプリ開発のプラットフォーム？）は今回は使わない。



     🔥   IONIC  APPFLOW   🔥

 Supercharge your Ionic development with the Ionic Appflow SDK

  -  ⚠️   Track runtime errors in real-time, back to your original TypeScript
  -  📲  Push remote updates and skip the app store queue

 Learn more about Ionic Appflow: https://ionicframework.com/appflow

────────────────────────────────────────────────────────────

? Install the free Ionic Appflow SDK and connect your app? (Y/n) n

これでアプリの開発環境が整った。

ブラウザで表示してみる



$ cd PWASample
$ ionic serve

無事にアプリを起動することができた。

Ionic 3でPWAアプリをサクッと試してみる

PWAとして動作するか試してみる

PWAはHTTPSの環境でしか動作させられないので、検証のためにHTTPS環境に配置したい。 ngrokというサービスを使うことで、Macの任意のポートを公開できるのでそれを使ってみる。



$ ngrok http -region=ap 8100

regionをAsia Pacificにして多少高速化を図る。 準備が完了すると以下のような出力となる。



Session Status                online
Session Expires               7 hours, 54 minutes
Version                       2.2.8
Region                        Asia Pacific (ap)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://xxxxxxxxx.ap.ngrok.io -> localhost:8100
Forwarding                    https://xxxxxxxxx.ap.ngrok.io -> localhost:8100

Connections                   ttl     opn     rt1     rt5     p50     p90
                              27      0       0.02    0.04    5.01    8.16

Forwardingの行にあるURLへのアクセスがngrokを起動したコンピューターにルーティングされる。 この状態でiPhone XSのSafariからhttp://xxxxxxxxx.ap.ngrok.ioにアクセスすると、以下のように表示された。

Ionic 3でPWAアプリをサクッと試してみる

これをホーム画面に追加してみる。 Safariの中央のボタンをタップしてメニューを開き、「ホーム画面に追加」を選択する。

Ionic 3でPWAアプリをサクッと試してみる

タイトルを必要に応じて変更して、「追加」をタップする。

Ionic 3でPWAアプリをサクッと試してみる

あっさりホーム画面に追加することができた。 アイコンはページのスクリーンショットになってしまっているので、後ほど設定してみる。

Ionic 3でPWAアプリをサクッと試してみる

ホーム画面に追加されたこのアイコンをタップして開くと、（見た目）Safariではなく、かといって画面最上部のナビゲーションバーの感じ的にアプリともちょっと違うものが起動した。この辺もおそらくカスタマイズできるはずなので、後ほど試してみる。

Ionic 3でPWAアプリをサクッと試してみる

ちなみに、現時点ではオフライン対応はできていないので、機内モードにして開くと以下のようになってしまう。

Ionic 3でPWAアプリをサクッと試してみる

ここから少しずつ手を入れてよりネイティブアプリっぽくしていく。

PWAに必要ないcordova.jsを削除する

JavaScriptからiOS/Androidの機能を呼び出せるようにするためのフレームワーク本体であるcordova.jsはPWAでは必要ないので、読み込まないようにする。

src/index.html中の<head>タグ内の以下の行を削除するだけで完了。



  <!-- cordova.js required for cordova apps (remove if not needed) -->
  <script src="cordova.js"></script>

オフライン対応をしてみる

オフライン対応するにはServiceWorkerを有効化する必要がある。 先ほど同様src/index.htmlの<head>タグ内を編集する。

コメントで書かれている通り、<script>から</script>までをコメントインする。



<!-- un-comment this code to enable service worker
<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service-worker.js')
      .then(() => console.log('service worker installed'))
      .catch(err => console.error('Error', err));
  }
</script>-->



<!-- un-comment this code to enable service worker -->
<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service-worker.js')
      .then(() => console.log('service worker installed'))
      .catch(err => console.error('Error', err));
  }
</script>

この状態で一度先ほどホーム画面に追加したPWAを開くと、ServiceWorkerが端末にインストールされる。見た目では進捗がわからないので正しく動いているかはこの時点ではわからない。

一度PWAを完全に終了させて、端末を機内モードにしてアプリを開いたら即座に画面が表示されたので、正しくセットアップできていた模様。

Ionic 3でPWAアプリをサクッと試してみる

開発作業中はコンテンツがキャッシュされてしまうと変更をすぐに確認できないので、ServiceWorkerの動作を確認した後またコメントアウトして作業を続けた。

ナビゲーションバーの背景色を変更する

調べたところ、こちらもsrc/index.htmlの<head>タグ内の変更で対応できる模様。 apple-mobile-web-app-status-bar-styleという属性に対して値を設定することでいくつかのパターンで設定することができる。



<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

試しにblack-translucentにしてみたら、以下のスクリーンショットのようにノッチの下の部分まで入り込んでしまってうまく行かなかった。白色で見辛いが、よく見るとiOSの時計とバッテリーや電波強度の表示は出ている。

Ionic 3でPWAアプリをサクッと試してみる

設定可能な値には以下の種類がある。

content属性の値
default
black
black-translucent

ホーム画面に追加するときのデフォルトの名前を変更する

src/manifest.jsonに設定が書いてあるのでそれを変更する。 nameとshort_nameを任意の名前に変更する。



{
  "name": "Ionic",
  "short_name": "Ionic",
  "start_url": "index.html",
  "display": "standalone",
  "icons": [{
    "src": "assets/imgs/logo.png",
    "sizes": "512x512",
    "type": "image/png"
  }],
  "background_color": "#4e8ef7",
  "theme_color": "#4e8ef7"
}



{
  "name": "PWA",
  "short_name": "PWA",
  "start_url": "index.html",
  "display": "standalone",
  "icons": [{
    "src": "assets/imgs/logo.png",
    "sizes": "512x512",
    "type": "image/png"
  }],
  "background_color": "#4e8ef7",
  "theme_color": "#4e8ef7"
}

アイコンを変更する

ホーム画面に追加したときにアイコンがスクリーンショットだと極めてアプリっぽくないので変更する。 今回はイラストレーターで以下のようなアイコンを作ってみた。

Ionic 3でPWAアプリをサクッと試してみる

PNG形式でサイズは512x512pxで書き出して、src/assets/imgs/logo.pngとして配置する。 続いてsrc/index.htmlの<head>タグ内に以下の行を追加する。



<link rel="apple-touch-icon" href="assets/imgs/logo.png" sizes="512x512">

これでPWAを開いたSafariを再読み込みして、ホーム画面に追加の操作を行うとアイコンが変更されていることが確認できる。

Ionic 3でPWAアプリをサクッと試してみる

Ionic 3でPWAアプリをサクッと試してみる

困ったこと

開発時の自動再読み込みができない

ローカル開発環境では、WebブラウザがWebSocket通信でionic serveコマンドのプロセスと繋がっていて、アプリケーションの更新時に自動で再読み込みしてくれるが、ホーム画面から起動したPWAではそれができない。

いちいちPWAを閉じて開き直したり、Safariに戻って再読み込みしてまたホーム画面に追加するのは時間がかかる。

Safariメインで開発を進めて、要所要所でPWAとして確認するのが現状の最善の方法かも。

ngrokはかなり遅い

特に機能を追加していない状態で18リクエスト、4.9MBのIonicアプリケーションの再読み込みに数分かかってしまう。回線はモバイルルーターだが下り27.3Mbps、上り23.1Mbpsというなかなかの速度なのに。

ひとまずiPhone XSをMacと同じネットワークに接続して、http://192.168.1.4:8100というIPアドレス指定でアクセスして検証を続けた。

ServiceWorkerを有効化してキャッシュを効かせた場合、アプリの更新はどうやって適用させれば良いのか？

  • 一旦ホーム画面からPWAを削除する
  • SafariでPWAのURLを再度開き直す（既に開いていれば再読み込み）
  • 再度ホーム画面に追加する

この手順でやっていたが、これで問題ないのかがわからない。

Code on GitHub

今回作成したプロジェクトはGitHubにアップしてある。

https://github.com/tetsushi-ito/ionic-pwa-sample

AngularIonicPWAIonic 3スマホアプリ開発