PWAやってみるメモ - 1 計画フェイズ

この記事は最近のWebAppに慣れていない人間がとりあえずPWAを体験するための備忘録を兼ねたものです。

PWAをやるぞ！と思ったので、とりあえず動かすところから始めようと思う。
というわけでまずは動かす前に計画（というか滅茶苦茶ざっくりした方針決定）から。

作るもの

TODO アプリ。
（すごくPWAの無駄遣いな気がするが、とりあえずやってみることに価値がある、ということにしておく）

ざっぱな要求

• TODO をなんかそれっぽく登録できること。
• TODO の期限が来たらなんかそれっぽくPush通知が来ること。
• TODO をリスト表示できて、実施済みのものはなんかそれっぽくわかるようにすること。

ちょっと細かくしてみる

• TODO は以下の要素からなる。
  • ID (整数値？SequenceなPKのイメージ / Key兼順序整理担当)
  • description (文字列 / TODO の内容)
  • limit (日時 / TODO の期限)
  • lastupdate (日時 / 登録ないし更新時のSysdate)
  • status
• TODO は一覧表示できる。
• TODO は「完了」することができる。
  • 「完了」すると一覧から消えるか「完了済み」に移る？
    • とにかくなんか動く。
• 時刻が TODO の limit に到達した時、Push通知する。
• TODO は削除 / 更新できる。
  • ……ようにしたいが、オマケ感がある。スコープ外でもいい。

重要事項: Service Worker は時間を数えられない。
まあそういうモデルじゃないよな。

何を使う？

重要事項: WebApp的にはかなり古い部類の人間で（なにせ未だにJS系のフレームワークをロクに触ったことがない！）あるため、まずはPWAに絞って話をしたい。

フロント

ここを参考にする。
ReactもVueも触ったことがない + 今回の主題ではない。よって無視する。
（というか、どう考えてもこの規模のものに頑張って導入するようなものじゃないだろう。jQueryだって要るか怪しい）

バック

Firebaseがよいらしい。
これはこれで複雑そうだしオーバーパワーもいいところだけど、お試しだし、とりあえずGoogle様の御威光に縋る。

おおまかに全体像

フロント・キャッシュ

• データ以外全部（HTML/CSS/JS）

データはJSONでサクサクやり取りしてフロント側で適当に書き出したい

バックエンド → フロントエンド

• TODO リスト
• Push 通知

フロントエンド → バックエンド

• 新規 TODO
• TODO ステータス変更