スポンサーリンク

Ionic3+Firebaseでタップゲーム(5)Ionic3WebアプリをPWA(ProgressiveWebApps)化

monaca+NCMBでオンラインランキング入りタップゲームを参考にして、同様のことをIonic3+Firebaseで実装にtryしてみた。これを、PWA化してみる。以下の本のp143(SECTION-018 PWAの設定について)の通りにやってみます。

PWA(Progressive Web Apps)とは、Googleが提唱している、「Webページをスマホで見るときに、スマホアプリのように早く、オフラインで便利に使えるようにするシステム」のことです。2018年現在、まだ発展途上ですが、Appleが協力してくれれば、数年後には当たり前のようになっているかもしれません。。。詳細についてはこちらにリンク集を作成しましたので、よければご覧ください。前回は、Bitbucketの非公開リポジトリにソースコードをアップロードして、Netlifyに自動デプロイした。

http://twosquirrel.mints.ne.jp/?p=24788

<Ionic3+Firebaseでタップゲーム 目次>
(1)ビュー(html)の作成とAngularfire2の準備
(2)タップゲームをHomePageに実装(Ionic3でjQueryを利用)
(3)rankingの作成
(4)Windows8.1でBitbucketに非公開リポジトリをアップロード(2018年6月時点、OpenSSH使用)
(5)Ionic3WebアプリをPWA(ProgressiveWebApps)化

ソースコード:https://github.com/adash333/ionic3_firebase_renda

(開発環境)
Windows 8.1 Pro
VisualStudioCode
git version 2.16.1.windows.4
Sourcetree Version 2.4.8.0
Android Studio 3.0.1

Node v8.11.2
npm 6.1.0
@ionic/cli-utils 1.19.2
Ionic (Ionic CLI) 3.20.0

firebase@4.8.0
angularfire2@5.0.0-rc.4
promise-polyfill@8.0.0

npm install --save firebase@4.8.0
npm install --save angularfire2@5.0.0-rc.4
npm install --save promise-polyfill

 

C:/ionic3/ フォルダ下に、tapGame/ というIonic3アプリを作成している。

(1)Service Workerを有効にする

PWAでオフライン表示やPush通知を実現するためには、ブラウザ(主にChrome)がバックグラウンドで実行するService Workerという仕組みを利用します。

Service Workerを利用するために、src/index.html を、以下のように変更する。

なお、Service WorkerはlocalhostとSSL環境のみ動作するが、開発中に動作しない方がよい場合が多いので、以下のように設定する。

src/index.html

(変更前)

(変更後)

(2)インストールバナーの設定

IonicにはデフォルトでWeb App Manifestが用意されており、

src/manifest.json でアプリ名やメインカラー、アイコン画像などを設定します。

インストールバナーが表示されるのは、Service Workerを有効にしており、かつ、5分以上の間隔を置いて2回以上のアクセスがある場合らしいです。ここで追加をタップすると、ホームページにPWAへのリンクが追加され、2回目以降は、

「Webアプリを、まるでスマホアプリのようにオフラインなどで操作できる。」

らしいです。

mato.jpgを、512×512 にサイズ変更して、src/assets/imgs/logo.png として保存。

(3)オフラインキャッシュ機能の設定

src/service-worker.js

デフォルトの設定で、

「ドメイン以下のファイル」:キャッシュがあればそれを表示して、ネットワーク上からデータは取得しない(self.toolbox.cacheFirst)

「HTTP通信でアクセスしたドメイン外のデータ(firebaseからとってくるランキングの元データなど)」ネットワーク接続を試みて、失敗したときはキャッシュを表示する(self.toolbox.networkFirst)

という設定になっているらしいので、そのままにします。他には、

self.toolbox.fastest

self.toolbox.cacheOnly

self.toolbox.networkOnly

などがあるらしいです。

(4)SourceTreeで、Bitbucketにpush(自動的にNetlifyにデプロイされる)

netlifyで確認

https://hardcore-hamilton-c060f9.netlify.com/

 

Androidスマホ(arrows M03)で上記ページを開いたところ、ホームページに追加することはできた。オフラインでは、ゲームは動作した。ランキングはうまく動作しているかどうかは何とも言えず。オフラインでゲームを行い、なぜか文字化けしました。

一度、オンラインでランキングページを見た後に、オフラインで再度ゲームを行ったところ、オフラインでもランキングはうまく表示されました(文字化けもなし)。

firebase + PWA すごい!

ソースコードは以下にアップロードしました。
(src/environments/environment.ts は、ご自身で作成して、ご自身のfirebaseのAPIキーその他をコピペしてください。)

https://github.com/adash333/ionic3_firebase_renda

 

 

 

 

 

 

 

途中