ゴミ出しを忘れないためのPush通知サービスを作った
毎朝ゴミ出しのことを忘れて嫁に怒られてます。
いい加減忘れないようにしたいので、
ゴミ出しを忘れないためのサービスを作りました！
ゴミ出し通知くんです。
https://trash.haramishio.xyz
サービス概要
最初に各曜日で出すゴミを登録します。
日曜まで行くと登録ボタンが出ます。
登録後、一覧で見れます。
そして毎朝7時にPush通知が届きます。
Push通知を届くようにするには、Pushを許可するようにしないといけないです。
今のところ、Push通知の時間は変えられないです。
あと休みの日はPush通知は来ないようにしています。
あとChromeでしか動作確認をしていません。
ほぼ自分用のサービスですが、使ってくださる方でバグなどあったら
Twitterで教えてください。。。
技術
主にこんな感じの技術を使ってます。
- SPA(Vue.js)
- PWA(Service Worker)
- GCP Cloud Functions
- Firebase Hosting
- Firebase Realtime Database
アーキテクチャとワークフローは
- ユーザはゴミ出し情報をブラウザで登録します
- Service WorkerのInstall時にPushするための情報を、Cloud FunctionsにPOSTします
- Cloud FunctionsはPush情報をRealtime Databaseに登録します
- cron-jobs.orgでPush通知を送るためのCloud Functionsを呼び出し
- Cloud FunctionsはPush情報を取得、一斉にPush通知
- ユーザにPush通知が届く
ということで、サーバーレスで実現してます。
モチベーション
なんでこの技術を使おうかと思ったモチベーションについてです。
SPAまわり
なんでこういう技術を採用したのかというお話をすると、
PWAに興味があったので、それに付随する技術の習得を目的にしました。
あと最近はインフラのことを中心に学習してたので、フロント界隈のことに疎くなってました。
なのでVue.jsをちょっとかじってみるかぁと思ってやってみました！
ぶっちゃけこの程度のWebアプリならjQueryで十分だしそれに慣れてましたが
僕がフロント界隈から離れている間にjQueryはすっかり嫌われてるようだったので、jQueryは使わないようにしました。
Vue.jsを触ってみると、導入も楽だし、双方向バインディングがこんな手間なくできるのかと感動しました。
ほんとに大したことをやらないアプリなので、Webpackは使ってないです。
使ったほうがコードがきれいになったと思うんですが、一気に色々覚えるのも大変だったので使いませんでした。
今後リファクタリングをやっていくつもりなので、そこでWebpackを使ってみようかと思います。
デザインがイケてない？それはまぁそうっすね…
PWAまわり
個人的にPWAは、今後のWebの未来につながる技術だと思っていたので
学ぶことが必須な技術だと思っていました。
ちょうどいい機会だったので、Service Workerを使ってみて
- オフライン用キャッシュ
- Push通知
で使ってみることにしました。
Service Workerについては前回の記事でも勉強しました。
Push通知まわりがだいぶめんどくさく、
Push通知用のエンドポイントや、通信のための公開鍵が発行できるので、
それをどこかに登録しておいて、Push通知したいときにその情報を使ってPush通知を行います。
つまりフロントだけでは足りず、サーバー側の処理が必要になったので
後述するCloud Functionsを使いました。
あとゴミのデータはIndexed DBを使いました。
当初はLocal Storageにデータを保存していたのですが、
Service Workerから参照できないことがわかったのでIndexed DBに変更しました。
サーバーまわり
この程度のサービスにサーバーを用意したくありません。
SPAでフロントを作っていたので、静的ホスティングツールで提供できるのはわかっていたので
Firebase Hostingを使用しました。
Service Workerではhttpsが必須で、Firebase Hostingは独自ドメインでも証明書が無料なため相性がいいです。
Push通知のための情報登録や、Push通知を送るための仕組みは
GCPのCloud Functionsを使用しました。
これはAWS LambdaのようなFaasなのですが
Cloud Functionsの良いところはhttpsフックでトリガーできるところです。
LambdaだとAPI Gatewayを用意しないといけないところですが、その手間がなくて本当に楽でした。
Cloud Functionsを使うので、自動的にDBはFirebase Realtime Databaseになりました。
ただCloud Functionsはまだcronのような定期実行はできないようなので、
cron-jobs.orgという無料でhttpフックしてくれるcronサービスを利用しました。
ということで、サーバーレスで実現できました。
今後やりたいこと
まだやり切れてないところが多々あります。
最後に
PWAで作ったアプリは、スマホのホーム画面に追加して開くと
ネイティブアプリと変わらないようなUIになります。それがめちゃくちゃ感動しました！
個人的に初めて作ったサービスなので、ひとまずやり遂げたのはよかったかなぁと思ってます。
ほかにもサービスの案があったりするので、順次実現していきたいなぁと思いました。
では！
