0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-12-18

はじめに

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

PWA化した結果(gif動画)

PWA化した自社サイトのURL

PWA 元のsafari
pwa.gif web.gif

※ 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通知はが送れるのは知っていたのですが機体のセンサー(カメラなど?)にアクセスできるのは知らなかったので、
機会があればそういった機能も触っていければと思います。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?