ゆーるるのゆるゆる日記

二児のワーママのブログです。

トップ > 資格・勉強 > Qiita参考に Vue CLI3でPWAサイトを立ち上げてみた

Qiita参考に Vue CLI3でPWAサイトを立ち上げてみた

資格・勉強 プログラミング

こんにちは！ゆーるるです。

最近プログラミング強化期間として、ブログ更新をお休みしてちょこちょこ勉強進めてます。

Twitterでは頻繁に呟いてますが、ぼちぼちブログにも勉強記録をアウトプットしていこうかなと思って浮上してきました。

今回はこちらのQiita記事を参考に、Vue CLI3を使ってPWAサイトを立ち上げてみました！

https://qiita.com/n11sh1/items/5d64c337ef927ac8d5d6

アレンジは全くせず、ホーム画面に追加、プッシュ通知などPWA独特の機能を試すだけだったのですが、プッシュ通知でかなり苦戦したので、ここに記録を残します。

苦戦ポイント

curlを使ってテスト通知を送るのですが、これが全くわからず。

どこで実行するかすらわからなかったのですが、ターミナルで実行すれば良いことはかろうじてわかりました。 （バージョン確認で使えることも把握）

なんとか試行錯誤繰り返し、最終的にはテスト送信に成功！

敗因としてはこんな感じでした。

送信先のトークンの確認方法がさっぱりわからなかったのが本当にネックでした。。

今思えば、console.log()使ってるんだから真っ先にコンソール見なよって感じですが笑

iPhoneのブラウザではプッシュ通知が飛ばせない学び

PCではキャプチャの通り無事に確認できたのですが、iPhoneで通知許可から出せないので、これまた何か間違ってるかなーといろいろ調べてたんですが、そもそもiPhoneではブラウザのプッシュ通知に現状は対応してないことが判明。（確かに日常使ってて出てきた場面なかった。。）

わざわざネイティブアプリをダウンロードしなくても、同じようなUXを体験できるところがPWAの魅力として感じていたのですが、iPhoneにプッシュ通知送りたいならネイティブアプリ化が必須なんだなーと改めて学びました。

まとめ

以上、まとめてみるとちょっとしたことですが、仕事しながらとはいえ数日間悩みまくっていたので、無事にテスト通知遅れたときには本当に感動しました！

こういうエラー解決の瞬間が、やっぱりプログラミング勉強の楽しいところだなーと思います。（プログラミングというほどのことしてないけど；）

いずれオリジナルアプリはPWAで作りたいなーと思っているのですが、理由としては、

  • 動作が速くて好き
  • UIが使いやすくて好き
  • SwiftやKotlin、Javaを学んだりストアに申請を出す手間をかけずにネイティブアプリのようなものを作れるところが魅力的

って感じです。

でも今回、プッシュ通知を使いたいなら少なくともiPhoneではストア申請を避けられないことがわかったので、ネイティブアプリ化も勉強しなきゃなーと思ってます。