PWA Night CONFERENCE 2020 メモ
PAW Night CONFERENCE 2020
以下のイベントに参加したので、聞いた内容をメモしておきます。 後半ほど集中力が切れてメモが少なくなっているような気がします笑。
基調講演
Edge of the Web
基調講演 ： Edge of the web(えーじ氏) | PWA Night CONFERENCE 2020
Edge of the Web - memo.md · GitHub
もともとPWAという用語がくる前からService WorkerやPush Notificationの概念はあった。 PWAという用語ができてから、説明しやすくなった。
今あるWebと違うものではない、ちょっとづつ進化させていく。
Forget abount PWA. Just build a "better" website
PWAは上司を説得するにはいい言葉。
一番素晴らしいのはホーム画面にアプリが追加できること。
アプリストアからインストールできたら素晴らしくない？ Miscrosfoftがアプリストアに登録できるようになる。
Trusted Web Activities(TWA)
AndroidアプリにPWAを埋め込むことができる。 ストレージが使える！！！
llama-pack
簡単にTWAを作ることができる。
shortcut
ホーム画面からショートカットを埋めることができる。
Web Share
アプリからアプリにデータを渡すことができる。 AndoridでいうIntent
SMS Receiver API
インドはほとんど電話番号入力-> SMS で完了している。 SMS通知から入力を自動化するような仕組み Appleと合意が取れつつある。
Clipboard API
クリップボード上の画像を扱えるように
Native File System API
ブラウザからOSのストレージにアクセスできる。
Web Authentication
物理的なセキュリティトークンを使用して、簡単に二要素認証が実現できる
この後のWeb
Privacy Aware Web
- 個人情報にセンシティブなWeb?
- Privacyをもっとケアするような動きになる。
3rd party cookie
- ブラウザで開いているURLが 1st party widgetなどは開いているURLと違うので、 3rd party
- 3rd partyにむけて、1st partyのcookie を送るのを防ぐ動きがある。3rd party cookieを制限すると、利便性が損なわれる。 SameSite=None
Mini apps
プログラムのなかで動かせる小さなプログラムが多い みにアプリを動かすプログラムをスーパーアプリと呼ぶ WeChatなど
Webでできる体験を考える会
Webでできる体験を考える会(折原 レオナルド賢氏) | PWA Night CONFERENCE 2020
audio ... Web Audio API 動き ... WebGL URL踏めば遊べる。Webというインスタント性がいい。 Bluetoothあれば色々できる。
Web Assembly と Web Worker - Web Assembly は instanciateStreaming が一覧楽。 - AssemblyScriptがお手軽
WebWorker - 重い処理をJSのメイン処理から外せる - 重いデータはTransferaObjectを使うと良い！
Push API - Firebase Cloud Messageing がお手軽
ScrapboxでのServiceWorkerとCacheの活用
ScrapboxでのServiceWorkerとCacheの活用(飯塚 大貴氏) | PWA Night CONFERENCE 2020
PWA Night Conf: ScrapboxでのServiceWorkerとCacheの活用 - daiiz
Serviceworker
FetchEventでresponseと間に存在するプロキシ
CacheStorage
キャッシュ保存戦略 - Network - Network First - Cache First
静的Assetなど、寿命が長いコンテンツは cache firstが良い。 Promise.raceでTimeoutと競う
PWA x PlayCanvasについて
PWA x PlayCanvasについて(羽賀 流登氏) | PWA Night CONFERENCE 2020
PlayCanvasとは - Javascriptのゲームエンジン。3Dに強い - Three.js と比較される。
進化するHTTP
進化するHTTP(奥 一穂氏) | PWA Night CONFERENCE 2020
HTTP1の限界 - 回線速度が早くなっても、ページロード速度の速さは頭打ちになる。 SPDY(HTTP２の全身) - １本のTCPコネクションで多重性を確保 -> HTTP2に
HTTP2とは - Push - 大量のレスポンスを流せる - HTTP2か1かの判断は、TLSのハンドシェイク時にやってる - HTTP2の方が遅くなる場合もある。特にネットワーク環境が悪い(パケットロス率高い時) -> パケットロスに弱い！！ -> 最適化が肝要
そもそもTCPも限界. TCP, TLS で 2RTT いる - TCP汎用化しすぎて、古いけど変えられない。ファイヤーウォールとかネット機器も見てる。OSも使う。
QUIC - もうTCPはいらん。UDPの上に全てのせる。 - ネットワークの環境が悪いところほど効果が出やすいという結果あり
HTTP3どうやって判断する - 初回はHTTP1or2でそのレスポンスヘッダにHTTP3が使える旨の内容が送られる。
Webブラウザは開発版が対応開始 WebTransport
まもなくやってくるVue3
まもなくやってくるVue.js 3(川口 和也氏) | PWA Night CONFERENCE 2020
もまなくやってくる Vue.js 3 - Speaker Deck
Composition API - 関数ベースでのAPI - 大規模環境でコードの再利用性が損なわれる。
Vue2同様, DI(Inject)も提供される。
ポータル - Wdigetを作成できる仕組み
Taking your web app offline (in a good sense)
Taking your web app offline (in a good sense)(Maxim Salnikov氏) | PWA Night CONFERENCE 2020
- ServiceWorkerをマネジメントするの大変
- Workbox を使う。
PWA on Windows
ChromiumベースのEdgeについて
エンディング講演 ： PWA on Windows (物江 修氏) | PWA Night CONFERENCE 2020
確定申告の都合上、４月リリース Edgeと違いUWPでなく、Win32なので、昔のアプリケーションでも動かせる。 内部で実はIEプロセスもあげられるので、IEがないと発狂する人でも安心
所感
どのセッションもとても有意義なトピックで、いかに自分がPWAについて理解していないかと、UXを上げるために 試したいことが増えました。２セッション制でしたが、どちらのセッションに行くか迷うものばかりでした。 manifestだけ入れてPWAを言い張っていた自分が恥ずかしくなりますね。
