v-kansai#9で喋ってきたけど何か?

久しぶりの京都開催

v-kansaiはなんと、毎月、京都・大阪での交互開催で、今月は8月開催でしたー!

今回はな、な、なんとFJUG OSAKAさんとの共催とのことでFirebaseネタもありのてん・てん・てんこ盛り!!

何話したの?

僕自身はVue.jsのLT枠(5分)で話させていただきました。

タイトルのとおりですが、Vue.jsでPWAをやろうとすると引っかかる点について、紹介しました。

その1: 驚きの白さ

PWAアプリは、スマホ画面のようにホーム画面に追加することができます!!

(下はAndroid版Chromeの画像)

これでホーム画面に追加することで、全画面表示のアプリが利用できるのですが、画面が真っ白になるというもの。

理由は簡単で、Vueのデフォルトの設定では

hogehoge.com/index.html

を開こうとしてます。

manifest.json‘start_url’

のように書き換えてやるとOKです!

その2: キャッシュ仕事しすぎ

PWAを使う理由の中には、

オフラインでも使いたい

高速化したい

というのが多いでしょう。

しかし、開発中は、良かれと思って頑張ってくれているキャッシュくんのせいで、更新がされない、といったものもあります。

当然、開発中だけじゃなくて、実際にリリースしたあとも、

更新したのに更新されない(語彙力)

といった問題が起こります。

これについては、StackOverflowでも質問されていたのでそちらを紹介しました。

(vue.config.jsで新しいコンテンツが来たら必ずupdateをかけるようにして、アップデートをダウンロードできたらブラウザ自体のリロードをかけるという方法)

ただ、相手に更新するかどうか、alertなどを出して提示するのもありかも?

その3: テーマカラーが変わらない in Chrome系

PWAではフツー、manifest.jsonというファイルを弄って個々の色を変えるはず…

だけどなぜか@vue/cliでPWA化をして作ったら、個々の色は反映されない…

index.htmlにベタ書きする、という手段もありますが、なんかださいよね

Vue Forum上でみたまともそうなやつは、vue.config.js内で設定する、というもの…

(またvue.config.jsか、とか言わない!!)

感想

Flutter For Webのお話があった!!

Flutter触ってるマン的にFlutterの話が出ると嬉しいですねー。

質問しましたが、安定性はまだまだとのことで、そこをクリアしたら今後とも伸びしろのあるフレームワークだなぁと思っています!!

質問するの楽しい

決して、性格の悪い大学教授が、学生をいじめる質問をして楽しんでいるのとは違います!!

気になったことを聞いてみると、色々と得られるものがあります。

さらに、エンジニア系のイベントだから、イベント自体も盛り上がります。(逆に学会だとそんな漢字にならなかった)

僕自身も質問が来ましたが、そこから新しいアクションが生まれるので発表者のためにもやるべきです!!

最後に

次回、kansai.tsで登壇します!!(9/6)

まだネタ考え中だけど、

  1. Vue関係の話
  2. Lint関係の話
  3. その他

で話すつもりです!!

では本日はこれで…

シェアする

  • このエントリーをはてなブックマークに追加

フォローする