7
8

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 1 year has passed since last update.

PWAについて私は勘違いをしていたので忘れないうちにPWAの勘違いの場所に焦点をあてた記事を書きます。

Last updated at Posted at 2019-01-24

#はじめに

🌾以下2行ほど追記
PWAの基準を満たして何が出来るか?本当にそれは必要なのか?という記事も書かさせて頂きました。
もしよかったらみてください🙇‍♀️

PWAと言われた時、そういう実装があると思っていました。
厳密にはこの考えは違うので、上記のように思っている方がいたらこの記事はオススメです。

:man_tone3::自分で自分の記事オススメしているよ…
:hatching_chick::オススメできるものじゃないと逆にダメでしょう。

え?間違っているよ!っということなどあれば指摘、ご指導お願いします🙇‍♀️
あと、これみて、『これPWA化100%って言ったじゃねーか!』などエンジニアさんをいじめないでください。あくまで間違った知識にならないように書いた記事です。

:hatching_chick::優しくしていただければすごく嬉しいです…
:man_tone3::甘えるな…
:hatching_chick::(>ω<)汗

#PWAとは!!
:hatching_chick::PWAとは!!googleさんがユーザーさんをもっと集めるようなWebサイトにするベストプラクティスは?を考えたものです。
それを考えているうちにアプリならではの機能もWebだって出来るぞ!!積極的に入れていこう的なものを考えたものです。
はじめてのプログレッシブ ウェブアプリ
はじめてのプログレッシブ ウェブアプリ(こっちは実装の参考に)

:man_tone3::????

:hatching_chick::だからどちらかというとサイトをどんどんProgressive Web App Checklistにそったものにしていきたいね!っという感じです。
よく『これが実装できたらPWAだ!』的な風にとらわれている方多くいらっしゃると思いますが違います。
あくまでユーザーが集まりやすいWebにするためにはどのようなものが必要なのか?それをリスト化しておこうでProgressive Web App Checklistなるものが作られました。
そこにはキャッシュなどの項目が入っているだけです。

:man_tone3::でもPWAと呼ばれるには必須の項目とかあるでしょ?

:hatching_chick::いえ。ありません。SPAのような感じでPWAがあるわけではありません!!

:man_tone3::Service Workerでキャッシュとか、manifest.jsonの設置とか…

:hatching_chick::それはProgressive Web App Checklistの一部にすぎません!

:man_tone3::さっきとうって変わってやけに強気でくるな…。

:hatching_chick::Service Workerや、manifest.jsonなどの説明、実装がされているのは、あくまでPWA化するのに助けが必要なものだとgoogleさんが思っているからだけなのです。

:hatching_chick::今までService Workerの設置がされていて、manifest.jsonの設置もされていればpwaできていると思っていたのに…じゃ!どうすればいいのよ!っとなりますよね。

:hatching_chick::以下の画像をご覧ください。これはgoogleさんがpwaそのほかの判断チェックに使ってねと言っているLighthouseで、4つのWebサイトのpwa部分の画像をみたものです。正直これは大まかな判断基準ではあると思いますが…。

:hatching_chick::左から順に良さそうなマークです。まだまだだね!が一番右のマークになるのではないかと思っています。
スクリーンショット 2019-02-11 17.51.29.png

:man_tone3:でもこれはあくまでだいたいのチェックなんでしょ?まー正直これで一番左なら満足しちゃうけど…。で本題のチェックはどこにあるのよ…。

:hatching_chick::それは、Progressive Web App Checklistなるものです!!

:man_tone3:おー。でここにはどんなことが書いてるのかな…。ふむふむ。サイトをhttps化して、あ、ここにはtwitterカードの設置のことも書いてあるね。モバイル対応してとかも書いてある。確かにService Workerや、manifest.json以外のことも書いてある!!なるほどね!今までは以下のようにLighthouseのチェックで満足していたけど、もっと見ないと行けなかったのか…。
スクリーンショット 2019-02-11 17.01.45.png

:hatching_chick::そうなんです。PWA化なんです。説明しなくてもわかる方もいますが『なぜユーザーを集めるために、このようなチェックリストなの?』という方に少し説明させてください。

:hatching_chick::まずhttps化に関してはService Workerを使うためにとかもありますがまずhttpよりセキュリティが高いからですです。

:hatching_chick::安心できないWebサイトと安心できるWebサイトではどっちにユーザーは集まりますか?https化しましょうということです。

:hatching_chick::twitterカードがあればtwitterにテキストだけでなく画像の乗せられてユーザーさんの目につきますよね?。

:hatching_chick::Service Workerを使いキャッシュを効率よくすれば待機時間が少なくなり、離脱するユーザーさんが減りますよね?っと言った感じです。

:hatching_chick::こんなような感じの簡略的な記載がgoogleさんにあったので載せます。(o*。_。)oここで注目して欲しいのは主なメリットはと言っていること、PWA化していった時のメリットの一部を言っているところです。

4.2.1 PWA を構築する理由
スクリーンショット 2019-01-25 18.44.26.png

:hatching_chick::このようにチェックリストを網羅すれば網羅するほど色々メリットが出てくるようにということです。

#まとめ
####PWAとはSPAのようなものではない。

####PWA化とはもっとWebサイトに集まってもらうためには何をすればいいのかチェックリストをどんどんこなしていくことである。

####チェックリストには、プッシュ通知なども入っているからチェックリストを網羅(もうら)すれば網羅(もうら)するほどユーザーが集まりやすいwebになるってことだよ!!ってこと。

#最後に
PWA化をしていくのにチェックリストが沢山ありますが、必ずしも全て行えるかというと…っということもあります。できることはしていくでも全然いいと思います。

逆にチェックリストの項目を全て網羅(もうら)すべきかというと私はそうは思いません。

#参考
PWAとは(Progressive Web Appsとは)

そのほかgoogleさんの参考は上の方にテキスト内などにあります。

7
8
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
7
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?