🧊

PWA Night vol.15 ~テクニック/API~ に行ってきたメモ #pwanight

PWA Night vol.15 ~テクニック/API~ - connpass

オンライン登壇の実績を解除した・・・!

Next.js x AMP by @yosuke_furukawa

nextjs_x_AMP.pdf - Speaker Deck

はじめに

  • Next.jsとは
  • AMPとは
    • Accelerated Mobile Pages
    • 用意されたタグを使って、ルールに準拠したページを作ると、キャッシュしてもらえる
    • `amp-validator`でチェックされる
  • AMPのタグ
    • 結構な種類のタグがあるので、割となんでもできる
    • ただGoogleホスティングされたものを使うことになる
      • 障害が出たら、もれなくページに影響が出る・・・

Next.js x AMP

  • Next.jsでSSRして、AMPを使う事例をリリースした
    • AMPは使うけど、AMP Cacheは使わない
    • ちょっと特殊な使い方かも
  • Next.jsでは、`withAmp()`でコンポーネントを囲むだけでAMP対応できる

Next.jsのクセ

  • prodモードとdevモードで挙動が異なる
  • 静的なページの場合
    • prod: 事前にHTMLに変換されてSSRの処理をスキップ
    • dev: 毎回ビルドされて、SSRされる
  • 静的なページかどうかは、`getInitialProps()`が生えてるかどうか
    • あるなら動的、ないなら静的
  • すべてのページを静的にするのは、現実的ではない

AMP Validator

  • Next.jsで開発している間、内部的に常にチェックしてくれる
  • ただ常に怒られる
  • ので、条件指定してignoreできるようにPRを出した

AMP Optimizer

  • AMPのレンダリングを高速化してくれる便利なやつ
    • フォントのプリロードとか
  • ただしprodモードでは、SSR中に必ず実行される
  • しかし重い
  • そもそもSSRが重いのに、さらに重い
  • これもカスタマイズできるようにPRを出した

その他

  • 不満
    • ベストプラクティスのスコアが低い
    • 型がない
  • 不満はあるし制約も多いけど、エッジの技術はそういうもの
  • 世界にもまだない問題が多いので、チャレンジングではある

会長「俺が世界を1mmでも良くする!」

ブラウザの新しいAPIで遊んでみる by @kan_dai

資料は見つけたら

Barcode Detection API

  • QRコードリーダーをつくった
  • 処理の流れ
    • まず`getUserMedia()`で端末のカメラの映像を取得
    • `new BarcodeDetector()`して、`detect(videoElement)`すると読み取れる
    • `rawValue`で値までそのまま取れる
  • canvasに渡してピクセル解析する必要がなくなった

Face Detection API

  • ブラウザでかんたんにFaceトラッキングできるAPI
  • 全体的な顔の位置だけでなく、ランドマークとして目や鼻などの位置までわかる

Text Detection API

  • 同様に、文字を認識できる
  • 日本語の読み取りはいまいちだが、英数字はなかなかの精度

Media Session API

  • 音楽プレーヤーの再生中の情報や、曲送りなどが実装できる
  • PWAで作れば、バックグラウンドでも使える
  • `navigator.mediaSession.setActionHandler(type, callback)`

いろんなAPI使って、いろんなものを作りましょう!

APIs around the WebRTC by @leader22

APIs around the WebRTC

自分の発表なのでスライドだけ。

LT: 最近あったbugの話 by @ko_kelvin

資料は見つけたら

  • 最近あったバグの共有をします
  • WorkboxとかServiceWorkerとか
  • Workboxとは
  • なのでそれを減らしたい
    • React LazyでDynamic importしたりして
  • しかし謎のバグが
  • 新しいタブで開いたほうのSWが、古いタブの動きに影響してた

みなさんも`skipWaiting`と`clientsClaim`の指定や、Dynamic importするときはお気をつけて!