PWAで自社サイトを無駄にネイティブっぽくしてみた

2220 ワード
AWS S3 PWA AWS テキストリンク

はじめに

　自社サイトのPWA化はiphoneのホーム画面に自社サイトを登録する 変な人 経営陣のみが少し嬉しい内容となります。実際にPWA化を検討される際はPWAの特徴を活かせるwebサービスなどで導入を検討してみてください。
（真面目な内容やコードはこちらのブログに記載しているのでそちらをみてください）

PWA化した結果（gif動画）

PWA化した自社サイトのURL

PWA 元のsafari

※ PWA化してから記事を書くまでにwebサイトのスピード改善(重いと有名なNoto Sans JPの削除など)をしてしまったので大きな差が感じられませんが元々は結構な速度差がありました。。。

PWAの特徴

　wikipediaに様々な特徴が載っていますが、ネイティブアプリみたいに動くwebアプリが作れるもののようです。今回は勉強のために手元にあった自社サイトをPWA化しただけなので、この中でいうと「High performance」と「An icon on the phone‘s home screen」の部分が一番恩恵がありました。

・Work offline
・High performance
・Background processing in service workers in a separate thread
・Access to the phone's sensors
・Support for push notifications
・An icon on the phone‘s home screen

※ wikipediaより抜粋( https://en.wikipedia.org/wiki/Progressive_web_application )

感想

　PWAのメリットの内ほぼ一部しかまだ試せていないですが、UIUXが通常のwebとは違い体感としてはかなりよく感じられるようになりました。
キャッシュなどに限っていうと実装方法自体がとても簡単なので、自社サイトがある方はやってみると 変な人になれる とてもテンションが上がるのでオススメです。
push通知はが送れるのは知っていたのですが機体のセンサー（カメラなど？）にアクセスできるのは知らなかったので、
機会があればそういった機能も触っていければと思います。