PWA(プログレッシブウェブアプリ)について書きました


書きましたっていうのは、会社のブログの方です。
https://blog.sakurasaku-labo.jp/pwa/

ちなみにサンプルも書きました。
https://blog.sakurasaku-labo.jp/sample/pwa/

調べていてPWAは面白いなあと思ったんですが、あっちはルールがいろいろあって書けないので、ソースコード的な話と補足をこっちに書きたいと思います。

所感

触りごこちはChromeアプリ作っていた時と同じなので、service-worker周りはほとんど苦戦しませんでした。あと、プッシュ通知はandroidと同じ感じなので、こっちも触ったことある人なら、ってものになっています。

なので、androidとchromeアプリ両方触ったことある人ならすぐわかると思います。
まあテストサイトはほとんどgoogleのソースコードなんで、えらそうなこと言えませんが・・・
#JSだけでかけるので、そうじゃない人でもわかると思います。

他のブログでも書いてありましたが、既存の技術だけでできているというのは、触ったことがある人には大きなメリットですね。
自分はTitanium とかでガリガリアプリ書いている人ですが、WEBで作ってそのままの工数でいけるのなら価値は高いと感じました。

後、補足として実装周りの簡単な説明もしておきます。

アイコン / スプラッシュスクリーン

アイコンはこんな感じで manifest.json に画像のパス渡すだけです。
スプラッシュスクリーンは manifest.json の background_color をベタ塗りして、中央にアイコン設置したようなものになります。

オフラインキャッシュ

キャッシュの部分は service-worker の最初の方でobjectで渡すだけで、でこんな感じで簡単に設定可能です。

プッシュ通知

さすがにこっちはワンライナーでみたいな感じにはなりませんが、受け側を用意しておいて、リクエスト投げればいいというだけでそんなに複雑ではありません。
サンプルサイトでは、開いたらその場でプッシュしちゃってますのでちょっとありえない感じですが、一応ソースコードはこんな感じになっています。

まとめ

わりと楽に実装できますし、見栄えというか雰囲気もいいんですが、本ブログでも書いたように safari未対応なのが痛いですね・・
政治的にも WEBに持っていきたいgoogleと そうはさせないapple ってとこでしょうし、簡単には、なびかなそうですが、どうなんですかね。


Leave a Reply