スポンサーリンク

Ionic3+Firebaseでタップゲーム（５）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でタップゲーム　目次＞
（１）ビュー(html)の作成とAngularfire2の準備
（２）タップゲームをHomePageに実装（Ionic3でjQueryを利用）
（３）rankingの作成
（４）Windows8.1でBitbucketに非公開リポジトリをアップロード（2018年6月時点、OpenSSH使用）
（５）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アプリを作成している。

（１）Service Workerを有効にする

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

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

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

src/index.html

（変更前）
image

（変更後）
image

（２）インストールバナーの設定

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

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

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

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

らしいです。

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

image

image

（３）オフラインキャッシュ機能の設定

src/service-worker.js
image

デフォルトの設定で、

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

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

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

self.toolbox.fastest

self.toolbox.cacheOnly

self.toolbox.networkOnly

などがあるらしいです。

（４）SourceTreeで、Bitbucketにpush（自動的にNetlifyにデプロイされる）

image

netlifyで確認

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

Screenmemo_share_2018-06-22-21-29-52　image

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

image

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

firebase + PWA すごい！

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

https://github.com/adash333/ionic3_firebase_renda

 

 

 

 

 

 

 

途中

スポンサーリンク

Angular, Angular5, Firebase, Ionic3, Javascript

Posted by twosquirrel