Help us understand the problem. What is going on with this article?

初学者のPWAまとめ

More than 1 year has passed since last update.

この記事は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アプリはネイティブに負けないぞ!!

wingsys
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした