Rso's Jotter

日々の開発の知見のメモやその他雑記

PWA Night CONFERENCE 2020 メモ

PAW Night CONFERENCE 2020

以下のイベントに参加したので、聞いた内容をメモしておきます。 後半ほど集中力が切れてメモが少なくなっているような気がします笑。

conf2020.pwanight.jp

基調講演

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(HTTP2の全身) - 1本の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

確定申告の都合上、4月リリース Edgeと違いUWPでなく、Win32なので、昔のアプリケーションでも動かせる。 内部で実はIEプロセスもあげられるので、IEがないと発狂する人でも安心

所感

どのセッションもとても有意義なトピックで、いかに自分がPWAについて理解していないかと、UXを上げるために 試したいことが増えました。2セッション制でしたが、どちらのセッションに行くか迷うものばかりでした。 manifestだけ入れてPWAを言い張っていた自分が恥ずかしくなりますね。