【勉強会メモ】PWA Night OSAKA キックオフ ～PWAのミライや活用方法をみんなで考えよう～

pwanight.connpass.com

• 日時：2019/07/23(火) 19:00 〜 22:00
• 場所：TAMコワーキング大阪

PWAってなに？トレンドの背景を考えてみる

角谷さん@TAM

PWA＝次世代のWeb体験

https://appsco.pe/ PWAで作られたサイトの一覧

いざ調べてみると概念的すぎてよくわからない

Googleの説明

• Reliable
• Fast
• Engaging

www.seohacks.net

特徴

• オフライン対応
• プッシュ通知

技術面

• Service Worker
• Manifest

本質はよりよいウェブ体験をつくること

⇒PWAは（最新の環境に合わせた）先進的なWebアプリケーションのこと

先進的？

• ブラウザは絶えず進化している
  • プッシュ通知
  • ホームボタン
  • 将来⇒ブラウザのAPIが充実

Progressive Enhancement

developer.mozilla.org

PWAも同じで新しいブラウザの新しい機能を取り込んでよりよい体験を追求していく

こえのブログ

voice.ameba.jp

• オフラインでもサイト表示
• 記事の下書き保存
• 音声録音
• オフラインレコーディング
• オフライン検知-通知
• 録音開始/終了バイブレーション
• デスクトップPWA

speakerdeck.com

デスクトップPWA（Spotify）

www.spotify.com

トレンドはどんな感じで進んでいきそうか

• ブラウザが進化すれば前に進む力が働く
  • iOSのプッシュ通知など
• クロスプラットフォームアプリとしてのPWA
  • MicrosoftもPWA押し
  • Google スプレッドシートからPWA

www.glideapps.com

Web高速化のススメ

中津川さん@MOONGIFT

よく使うWebサービス

• 代表例
  • Facebook
  • Twitter
  • Google
  • Amazon
• ユーザーはいつもこういうサービスを使っている
• 我々が作ったサービスはこれより遅い、お客さんはがっかりする

読み込み3秒の基準

• 2016年…20%が離脱
• 2018年…53%が離脱

売上への影響

• ECサイトで1秒遅いとCVR7%↓
• Amazonは0.1秒遅いと売上1%↓

早くすれば利益が伸びるならそこに投資すべき

• Gwifiは1日500M
• 切れると128kbps制限
• 追加購入したいが、サイトが遅い…
• JavaScript動かない
• jQueryの読み込みでエラー

高速化？

• お金を使う
  • サーバ増強
  • ネットワーク回線強化
• 技術対策
  • DOM改善
  • ネットワーク改善
  • プログラム改善

Webフロントエンドのボトルネック

• レンダリングが遅い
• ネットが遅い
• JSが遅い

DOM改善

• 仮想DOMを使う
• React/Vue/Riotなど
• DOMを更新すべきかどうかはフレームワークに任せる
• UI情報をJavaScriptにあらかじめもたせることで、データ通信量を大幅に減らせる
• DOMの幅/高さを指定する
  • 画像の高さがずれたときのDOM再計算が重い
• テキストも可変にせず溢れたときの処理を入れる
• iframeを使うと再計算処理が走らないので高速化する
  • ※実際やると結構地獄なので注意

vimeo.com

UI/UX系改善

• アニメーションはCSS3でGPUを使う
  • 実装は大変
• ライブラリ、フレームワークを採用する
• Onsen UI/ionic/Framework7

ネットワーク改善

• Cache APIを使う
  • JSから操作できるローカルプロキシ
  • 任意のURLコンテンツをキャッシュ
• Cache API
  • Service Worker内で動作するキャッシュシステム
  • URLをキー、レスポンスをバリューにしたKVS
  • 有効期限などがないのでWorkboxと組み合わせると吉
• キャッシュパターン

qiita.com

• メリット
  • ネットワークアクセスを大幅に減らせる
  • オフラインでもWebアプリケーションが使える
  • ※jQueryだけでも登録しておくと早くなる
• 注意点
  • キャッシュを自動更新する仕組みはない
  • 削除、更新する仕組みを作っておかないと大変
  • 開発中はネットワークファーストで開発する

JSの速度改善

• WebAssemblyを使おう
  • Webブラウザ上で動くバイナリフォーマット
  • 超高速
• WebAssembly
  • プログラミング言語ではない
  • DOMが扱えない
  • ネットワークが扱えない¥
• DOM/ネットワーク利用
  • WASMからブラウザに依頼し、ブラウザが返す仕組み
  • RustとGoで対応
• Canvas/WebGL
  • メモリを直接書き換える

まとめ

• DOM描画が遅い⇒仮想DOM
• ネットワークが遅い⇒Cache API
• JSが遅い⇒WASM

マーケティングから考えるPWAのエンジニアリングによる打開策

榊原さん

capacitor

capacitor.ionicframework.com

各アクセス数：3つ並べている

• PWA…2
• Android/iOS…数千

使っている人はほとんどいない

• Web Payments/Payment Request API
• Push通知

Wordpress PWA

HideOkamotoさん

PWAは初回のロードは早くならない

• CDNやNginxPHP7
• 生HTMLだけが一番はやい

WordPressでPWA

• インフラ・アプリに投資
  • モバイル：Responsive Web Design
  • インストール：プラグイン
• SPAは必要ない
  • インストール可能はRWD

PWA plugin for WP

wordpress.org

できないこと

• manifest.jsonの生成以外のすべて

本当に欲しい物

• どのサイトでもほしいのはオフライン、低速通信への対応
• Service Workerの実装

Service Worker + Dropbox API

kudoさん

Dropbox API

• ファイル操作に必要なものは網羅
• 認証はOAuth2
• 自分のアカウントなら専用token発行可能

Dropbox SDK

• いろいろある

Service Worker + Dropbox SDK

• DropboxのレスポンスをSDKで受けてからService Workerを挟む