- PWA Night vol.10 ～PWA × 技術～に参加してきました。
| タイトル | 発表者 |
|---|---|
| とある個人開発PWAのSEO奮戦記 | 大岡由佳さん |
| PWA×クラウドゲーミング | おりばーさん |
| コードサイズの大きなプログラムのロード時間：WebAssemblyの場合 | @chikoskiさん |
| うわさのJAMStackでPWAをさわってみた | のまどまんさん |
| Monaca × PWA × 3D | VMT-Yamashitaさん |
とある個人開発PWAのSEO奮戦記
- 大岡由佳さん(@oukayuka)
Mangarel
- 個人でPWAなアプリを作った
- 技術書典で出した本のサンプルがベース
- https://mangarel.com/
- Googleで検索しても3件しかひっかからない
- 1万ページ以上存在してるのに
- 最近のクローラーはJS解釈してくれるんじゃなかったのか・・
- Problem
- ページがインデックスされない
- タイトルや詳細が個別に表示されない
- コンテンツがレンダリングされない
ページがインデックスされない
- サイトマップを作って送った
- 正常に処理されましたと返ってきたけど
- 認識はされるけどExclusionに入ってる
- 内部リンクされてないのが原因？
- ページを増やして内部リンクを増やした
- 少しずつインデックスされるページが増えてきた！
タイトルや詳細が個別に表示されない
- React HelmetでHTMLヘッダを上書き
- ブラウザからは書き換わってるけどGoogle上では変わってない
- CloudFunctionsで動的にヘッダを書き換えた
- ボットからのアクセスの時だけ発動するように
コンテンツがレンダリングされない
- SearchConsoleで試してみたらFirestoreからデータをとってくるはずがとってこれてない
- ページによっては運がよければ表示される
- レンダリングに時間がかかると諦めてるっぽい
- Lighthouseで計測したらパフォーマンス50点台
- TreeShakingした
- ビルド時に不要なコードを削除
- CodeSplitting
- 初回のレンダリング時には必要なJSだけロードしそれ以外は遅延ロード
- Lighthouse60点台
- 無限スクロール
- クローラーは無限スクロールを認識してくれない
- こういうふうに実装すれば認識してやるとデモサイトが公開されている
- https://scrollsample.appspot.com/items
PWA×クラウドゲーミング
- おりばーさん@Black Inc.(@oliver_diary)
クラウドゲーミング
- ユーザからの操作を受け取ってクラウド上で演算して映像を返す
- PlayStation Now
- Google Stadia
OOParts
- 開発してるクラウドゲーミング
- ゲームをWebブラウザでアクセスするときの残念なところ
- アドレスバーが邪魔
- 余白がもったいない
- アクセスするまでの導線が長い
- => PWA化で解決！
- 他にも
- 起動時の初期表示が速い
- アプリと違って審査いらない
- PWAとクラウドゲーミングの相性抜群
コードサイズの大きなプログラムのロード時間：WebAssemblyの場合
- @chikoskiさん
WebAssembly
WebAssemblyのいいところ
- JSあるのになぜWebAssembly?
- エコシステム
- 他の言語の資産を使える
- パフォーマンス
- 速いけどそれだけじゃなくてブレが少なくて安定感が高い
- エコシステム
- 音声ファイルの扱い
- ファイルサイズでかいので圧縮してmp3にして扱いたいとか
- でもJSだけではできないのでWebAssemblyが役立つ
WebAssemblyの注意点
- コンパイルするとjsとwasmが出力される
- ファイルサイズがでかい
- キャッシュを活用する
- ネイティブのコードはブラウザにキャッシュされる
- キャッシュにのったコードをいかに使い続けるか
うわさのJAMStackでPWAをさわってみた
- のまどまんさん
JAMStack
- 動的なデータコンテンツを取り扱う静的サイト
- 事前に静的ページを生成しておく
JAMStack作ってみた
PWA化してみた
Monaca × PWA × 3D
- VMT-Yamashitaさん
Monaca
- ハイブリット開発環境
- PWAのテンプレートがある
