Ionic4(beta)でPWAにtry

2018年8月1日

20181114追記

Ionic4アプリをPWA化したい場合、2018/11/14時点では、

ng add @angular/pwa@0.8.7 --project app

とすると、うまくいくようです。。。（アイコンはAngularのアイコンが作成されるのですが、いったいどこからこのアイコンの元画像が来ているのか不明です。。。）
（Ionic4アプリの名前がなんであろうと、上記の一番最後は、 app と入力します。）

参考：https://github.com/angular/angular-cli/issues/12914

みんな大好きPWA！

WEBアプリをPWA化してしまえば、ごく簡単なスマホアプリなら、インストール無しでWEB上で公開できちゃう。

Ionic3では、src/index.html の特定部分をコメントアウトするだけで簡単にPWA化できたのだが、残念ながら、Ionic4では面倒なことをしなければならないようである。
（個人的に、これは改悪としかいいようがないと思います。。。）

なんだか、Ionic3からIonic4への変化は、かなり激しい感じがします。

https://www.joshmorony.com/create-a-pwa-with-angular-service-workers-in-ionic-4/

（開発環境）

Node v8.11.2
npm 6.1.0
Ionic (Ionic CLI) 4.0.1
Ionic Framework @ionic/angular 4.0.0-beta.0

（今回実装する環境）

（０）すること

Ionic4でPWA(Progressive Web Apps)を実装する

（１）Ionic4アプリの作成

C:/ionic4/ フォルダに、ionic4-pwa/ アプリを作成する

C:/ionic4/ フォルダをVisualStudioCodeで開き、Ctrl+@でターミナルを開き、以下を入力。

ionic start ionic4-pwa blank --type=angular

何か聞かれたら、N + Enter　としておく。（Cordovaを使用したい場合は、最初の質問に対して、y としておく。）

少しだけ、src/app/home.page.html　を変更

<slot>　については、こちらの記事をご覧ください

(変更前)

(変更後)

ターミナル画面でCtrl+C　で、一度、サーバを停止しておく。

（２）Ionic4アプリに、@angular/pwaを追加

ターミナル画面で以下を入力

ng add @angular/pwa --project ionic4-pwa

エラー。

ng add @angular/pwa --project app

これでもエラー。ググってみたが、お手上げである。

Invalid rule result: Function().

というエラーが出てうまくいかない。

うまくできず。。。これはひどい。。。

angularの方の問題らしい。。。

https://github.com/angular/angular-cli/issues/11640

ng add @angular/pwa@0.6.8 --project ionic4-pwa

エラーでだめ。

ng add @angular/pwa@0.6.8 --project app

できた。。。のか？

ところが、今度は、 ionic serve ができなくなってしまった。

これでは無理。

なんか、Ionic3ではすごく簡単にPWA化できていたので、非常に残念。

（３）productionモードでビルド（Netlifyにデプロイで代用できそう。）

ionic build --prod

→　エラーが出てできなかった。

参考：https://www.joshmorony.com/understanding-how-slots-are-used-in-ionic-4/