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

資格・勉強

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

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

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

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

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

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

スポンサーリンク


苦戦ポイント

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

って感じです。

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

The following two tabs change content below.
fd55ec4e6247fee6f7a22e07ca3df73d?s=80&d=mm&r=g - Qiita参考に Vue CLI3でPWAサイトを立ち上げてみた

ゆーるる

2018年5月に男の子を出産した一児の母。2019年11月に2人目出産予定。 第一子育休中にFP2級とGaiq取得しました。せっかくFP勉強したので株やりたいけど元手がないのが目下悩み。笑 最近はHTML/CSSを強化しつつ、JavaScriptマスターを目指すべく日々奮闘中。最終的にはVue.jsとお友達になりたい。 このブログは、日々の自分の勉強や子育て記録の発信場所として運営中。まったりマイペースに更新していきます。 当ブログやゆーるるにご意見ありましたらこちらからお気軽にどうぞ!

ブログ村参加してます!

ブログランキング・にほんブログ村へ

にほんブログ村 子育てブログへ

にほんブログ村 子育てブログ 2018年4月〜19年3月生まれの子へ

にほんブログ村 OL日記ブログ 既婚OL(子供あり)へ