Ionic4(beta)でPWAにtryするも挫折

みんな大好き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/
image

(開発環境)
image_thumb21_thumb_thumb

(今回実装する環境)

(0)すること

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

(1)Ionic4アプリの作成

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

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

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

image

image

image

image

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

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

(変更前)
image

(変更後)
image

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

(2)Ionic4アプリに、@angular/pwaを追加

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

image

エラー。

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

image

Invalid rule result: Function().

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

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

image

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

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

image

エラーでだめ。

image

できた。。。のか?

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

これでは無理。

image

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

(3)productionモードでビルド(Netlifyにデプロイで代用できそう。)

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

参考:https://www.joshmorony.com/understanding-how-slots-are-used-in-ionic-4/
image_thumb[1][1]

関連記事
Count per Day
    Popular Posts
    スポンサーリンク

    シェアする

    • このエントリーをはてなブックマークに追加

    フォローする