PWAとは？
PWAとは、「Progressive Web Apps」の略称で、モバイル向けWebサイトをGooglePlayストアなどで見かけるスマートフォン向けアプリのように使える仕組みです。
Googleが定める要素を備えたWebサイトであり、オフラインやプッシュ通知に対応するためのブラウザAPI(Service Workerなど)を利用しているWebサイトをPWAと呼びます。
PWAを実装することでプッシュ通知やホーム画面へのアイコン追加など、アプリの特徴的な機能をWebサイトに持たせる事ができます。これにより、UX向上やユーザーエンゲージメントの改善にもつながるとして注目されています。
(参照：https://www.seohacks.net/basic/terms/pwa/)
とのことです。
よく分からないですが、簡単に言うとブラウザのURLバーを非表示にして全画面表示させたり、プッシュ通知を送れるようにしたりして、webサービスをあたかもアプリのような振る舞いにさせてしまおう！
という理解をしています。
PWA化をするメリット・デメリット
メリット
1.アプリじゃないからインストール不要
PWA化すると動きはまるでアプリのようになりますが実態はwebサービスなのでAPP STOREやPLAY STOREから探して、インストールしてという面倒くさい手順を省けます。
また開発側としてはアプリ化させる際の面倒な手続きなど省けるのもメリットなのかな？
2.オフラインでも動く
ページ遷移など本来はオンラインでしか動かないような処理もキャッシュを使ってある程度オフラインでも動いてくれるようです
3.プッシュ通知の受信ができる
アプリではよく見る通知を受け取れるようになり、最新の情報が送れるようになります。
デメリット
OS、ブラウザのバージョンによってはサポートされていないことが多々ある。
これが一番大きなデメリットだと思います。
Androidでは動くのにiOSだとうまくいかない。Chromeなら大丈夫なのにsafariはダメ。
みたいなことがちょくちょくありました。
実装方法
1.httpsを有効にする
2.manifestを作る
3.ServiceWorkerを作る
この３つだけで実装できるので実装自体はとても簡単です。
実際に直面した問題
iOSのsafariではPWAが完全にサポートされていない
PWAの機能で「ホーム画面に追加」の通知ポップアップを出すという機能があります。
この画像の下の通知です。
これがiOSだとどうやっても表示させられませんでした。
自分が調べた限りではまだサポートされていないとのこと。
もし方法があればご教授願います。。
「ホーム画面に追加」通知のデザイン変更が煩雑
「ホーム画面に追加」通知ですがPWA既存の機能で、どこかに明示的にCSSが書かれていたりするわけではありませんでした。
なので、本来ポップアップが出るタイミングで別のJavaScriptでポップアップを制御して、用意したCSSを表示させ、ホーム画面に追加orキャンセルの処理をしてと、たかがデザイン変更に滅茶苦茶苦労させられました。
これももし何か有効な手段を知っている方がいらっしゃればお教えいただければと思います。