初学者のPWAまとめ

  • 12
    Like
  • 0
    Comment

この記事はPWA初学者が「面白そうだゾ」となったけど「結局PWAってなんなんだ?」と混乱したのでまとめたものです。

PWAって何? 新技術なの?

違います
もちろん新技術は投入されていますが、PWAそのものは新技術ではありません。Web2.0みたいなもんです。
つまり、これまでに出てきた技術、これに合わせて出した技術をひっくるめて使ってPWAというものを作ろうといっています。Googleが。
(というわけで、基本的にAndroid向け技術らしい。ただ、最近Safariも対応しかけてるとかなんとか)

PWAってなにをすればいいの?

頑張ってこれを満たしていってください(多分全部じゃなくても許されると思います)。
https://developers.google.com/web/progressive-web-apps/checklist
少なくとも、ここに書いてあることを満たしたWebページをPWAといって怒られることはないでしょう。

どんなものが使われるの?

こんな感じです(※偏見を含む気がします)。

HTTPS

最重要枠その一。というのも、これがないと「アプリの正当性を検証できない」ので。
ただ、要するに全部HTTPSでやらないとPWAとは認めないという話でしかないので、そこまで難しい話ではありません。

Web App Manifest

最重要枠その二。「このサイトはこういう名前で、こういうアイコンがあって、こんな感じのスプラッシュスクリーンがあるよ」というようなことを書きましょう、という話です。
ざっくり言うなら、ホーム画面に置くアイコンの設計図です。というわけで、これまで書いてませんでしたが、PWAにするとホーム画面にアイコンをおいて "インストール" することができます
実体はWebアプリなので更新はらくらく、めんどくさいストア申請もありません。

Service Workers

最重要枠その三。キャッシュ機能、プッシュ通知受信機能、遅延送信機能……あたりがついたすごいプロキシ(みたいなもの)です。これがなければPWAはコンセプトごと死滅します。
すごくざっくりいうと「画面世界(DOM)の外で動くもうひとつのJS」です。このため画面世界には直接干渉できませんし、画面世界のJSとは別のスクリプトが必要です。
使うと(キャッシュが十分溜まっていれば)圏外でもページが見られるし、圏外なのにデータを送信(するように見せかけて、あとで通信が復帰した時に改めて送ることが)できます。
プロキシとしてリクエストを乗っ取ってくれるので「アレ取ってきてよ」に「ここにあるよ」とか、「これ送ってきて」「やっとく、通信復活したらね」とか、そういうことをしてくれるわけですね。

localStorageとかIndexedDBとか

PWAの目的の一つに「もっとネイティブっぽいことしたい!」というのがあります。
ネイティブの強さの一つに「クライアント側にデータを持たせられる」というのがありましたが、そのブラウザ版です。もちろん小容量限定ですが、データを保持できます。
Cookieやサーバ側のDBに設定情報を頑張って詰め込む時代なんて、もうとっくに終わってるんですよ……。

History API

「進む」「戻る」を使った時、たまに変な飛ばされ方をしてイラッとした経験はありませんか。
これはAjaxバリバリなアプリにはままあることですが、ページ遷移と内容の変更が一致しなくなったので、履歴と操作も当然一致しなくなったためです。
これに「じゃあもう履歴いじっちゃえよ」という答えを返すのがこのAPIで、履歴に新しくURLを乗せたりできます。
「ページ遷移はしてないけど、今ここまで来たよ!」というのを履歴で表現できるわけですね。素晴らしい!また一つ状態が減ったぞ!

その他、デバイスの機能にアクセスするAPI類

例えば Geolocation API とか。

ざっくりまとめると?

キャッシュ機能を滅茶苦茶強化して、オフラインでも見られるようにした!デバイスの機能に触れるようにもしたし、ホーム画面にアイコン置けるようにもした!もうWebアプリはネイティブに負けないぞ!!