行ってきたので書いた
カンファレンス行ってきたので自分で調べたこととかも交えてこんな感じかなというサマリを記載
※発表内容そのままという訳ではないのであしからず、間違っているところもあるかも
所感としては内容が普通に面白かったので行ってよかったなーというのと
PWAでできることってWebでできる事の依存が大きいので、Webでできる事が増えたぞ→PWA的にはどうだろうという事が考えられる良いカンファレンスでした
Project Fugu
Project fuguでChromiumの開発中の機能とかの一覧とインターフェースが見られるよ!
(fuguはあのフグだよ!)
https://docs.google.com/spreadsheets/d/1de0ZYDOcafNXXwMcg4EZhT0346QM-QFvZfoD8ZffHeA/edit#gid=557099940
chromeは
chrome://flags/
で試験中の機能をONにできるよ!
ScrapboxでのService WorkerとCacheの活用
キャッシュについて
既存のアプリに入れるとcorsエラーが起きる場合があるよ
特定のタグ<img>
や<script>
などからはcorsのリクエストが許可されているが、JavaScriptからは許可されておらずその辺の実装をService Workerでキャッシュしようとするとcorsのエラーが起きるよ!
CDNのレスポンスヘッダにAccess-Control-Allow-Originを追加しようね!
エラーのキャッシュはすると場合によっては詰むよ
エラーをキャッシュするとエラー画面がキャッシュされてしまうのでresponse.okだけキャッシュしようね!キャッシュファーストだとユーザーが詰むよ!
キャッシュは色んな方法で探せるよ
サーチパラメータを考慮したり、methodをまとめて探すことができるよ!
https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker
(match dataのとこに書いてあるよ!)
見せ方
環境ごとに必要な見せ方を考えるのが大事だよ!
モバイルは全画面表示できるけどリロードボタンとかなくなるのでそれを用意してあげるとか
デスクトップ版もURLなくなるのでコピーどうするかとか
どっちかというとネイティブっぽい考え方が必要になるよ!
進化するHTTP
HTTP3
詳しく書くとこれだけで1〜2記事書けそうなので割愛するけど
すでにcanary落とせばHTTP3自体はブラウザから試すことができるよ!
アプリ開発者はHTTP3のためにコードを変更する必要はないよ!(HTTPを流す接続を自分で選択するような低水準なライブラリは除く)
alt-svc:h3=“:443”で試せるよ!
https://japan.cnet.com/article/35143184/
まもなくやってくるVue.js3
めちゃくちゃ変更点あるっぽいよ!
所感としては割とReactっぽくなるような気がするよ、特にrender関数でJSX使えるようになるとことか!
ライフサイクルフックの名前が大体全部変わるよ!
CSSのscopedの書き方も変わるよ!
パイプ演算子で使えたフィルタが削除されるよ!
refでラップしたオブジェクトを渡してリアクティブな状態を共有することになりそうだよ!
プラグインはDIで実装を推奨するよ!
下手したら割と書き直しになるプロダクトとかあるかもなって思ったよ!
PWA on Windows
毎回物江さんの話はおもしろいよ!
MicrosoftはPWAに前向きだよ!
ただPCの電源途中で切れたからメモが残ってなくて記憶があやふやだよ!
Edgeは+ボタンでPWA追加できるとか
今はchromium版のEdgeから落としてもchromium版じゃない方準拠でPWA立ち上がるとか
アプリケーションの追加と削除から消すとうまく消えないからじゃなくて直接消してくれとか
みんな大好きvscodeにPWA拡張があるけどなんたらかんたら
みたいな事を話してた気がするよ!
あとみんなこの神の発明品を使おうね!
https://www.pwabuilder.com/
LT大会
全員発表のエッジが効いてて聞いてる方も楽しかったよ!
PWA RTA in Japanでpreactの30秒がWRというのがネタとしては好きだったよ!
おわり