Yahoo!Japanトップページ（スマートフォン）におけるPWAの取り組み 〜ホーム画面追加編〜

神野真彦

トップページ（スマートフォンWeb）

Android Chrome版

取り組みについて

ホーム画面追加を行った

Add to HomeScreen（A2H）

実装方法

Web App Manifest

manifest.json を用意する

linkタグで読み込み

webページと同一ドメインで配信する必要あり

192×192のアイコンが必須

確認

Chrome検証

Application > Manifestを開く

ServiceWorker.js

オフライン対応が必須

fetchのイベントリスナを実装したらオフライン対応（とみなす）

動作確認

mini-infobarが表示される

A2HSダイアログの表示

追加ボタンをすると追加される

苦労した点

対応ブラウザ

OSやブラウザの実装に大きく依存する

戻る・進む・外部リンククリックの挙動

iOSの対応は見送ってる

戻るができない

iOS12.xよりエッジスワイプでできるようになった

別ドメインのリンクをタップするとSafariが起動

iOS12,xより自アプリ内で開く

クレデンシャルをSafariと共有していない

Safariでログインしてても追加されたPWAでは非ログインになる

ブラウザバージョンアップ

ホーム画面追加などの新技術は色々と仕様変更が多い

Google Playアカウント

ログインしていないと正常なホーム画面追加ができない

追加したアプリケーションが認識されない状態

ドロワーに出てこない

所感

メリット

Webアプリケーションのよいところを活かせる

ネイティブにちかいUXを実現

デメリット

ブラウザへの依存度が高くなるので注意がいる

使用が頻繁に変わるので追従していく必要あり

既存のアプリをPWA化する注意

ホーム画面追加したときに動作に問題ないか？

アドレスバーなくなることを制限される、タブUIがなくなることへの影響

現行のUXを損なわないのか

差異をどこまで許容するか？

どのブラウザを対象とするか

非対象ブラウザをどう扱うか？

いこレポでのWorkbox導入事例

森下泰光

Webメディア「いこーよ」

いこレポ

2017年7月サービス開始

PVも伸ばしてるが、トラフィックは検索流入

新規ユーザがおおい

リピーターを増やすためにA2HSを導入してみよう

fetchイベントハンドラ

キャッシュがあればそれを返して通信はしないようにする

Fetch API

キャッシュを実装すればおのずと対応できそう

自前で実装は大変だった

キャッシュ戦略を考えると大変

実装するからにはちゃんとしたいがキャッシュ自体が目的ではない

Workboxを使おう

Workbox

Google製のServiceWorkerサポートライブラリ

webpackプラグインもある

Ruby on Railsアプリケーション

管理画面でのJS, CSS

ユーザ向けページで使うJS,CSSのみ

静的アセットは基本プリキャッシュ

PC向けアセット、管理画面はキャッシュしたくない

記事画像はランタイムキャッシュでキャッシュしたい

runtimeCaching の設定

プリキャッシュは precache-manifest.****.js に記載される

1. modifyUrlPrefix でCDNからプリキャッシュファイルを取る

2. exclude の設定

3. webpack無関係ファイルのプリキャッシュ

4. ランタイムキャッシュも設定（URLの正規表現でパターン判定）

ブラウザが使える容量を超えたら削除

A2HSの話

デフォルトではわかりづらい

ポップアップモーダルに変更した

ボタンクリックでプロンプト表示

beforeinstallprompt イベントで実装できる

問題

キャンセルしてもイベントが発火する

Cookieを使って一定期間表示させないようにした

課題

効果測定したい

Google Analyticsにイベントを送る

各イベントにgaタグ挿入

登録率 0.25%

Chromeでストレージ永続化を実現するには

2016年6月創業のゲーム会社

2018年4月 PWAゲームをリリース

永続化するための要素技術

モバイルSafariは50MBが限界

Persistent Storage

上記で保存したものを永続化させるための手段

通信量を抑えたサービスを提供できる

ストレージ永続化仕様

対象サイトがブックマークされていること

数は5以下

高いサイトエンゲージメント

chrome://site-engagement/ で確認できる

Origin

Base

Bonus

現在は謎の値

今は0

Total

どれだけ字間を割いてサイトを見てるかを定量化する

しかし「高い」の具体的な数値は入ってない

ホームスクリーン追加されている

push通知を許可されていること

試してみる

high site engagementの挙動を確認

3点が☓

1点が○

ブックマークを試す

2つ試して5個以内なのに片方だけだめだった

公開されていない仕様があると考えるのが自然

Chromiumのソースをチェック

隠された仕様を追ってみる

引数に10が入ってる

reason_bitfield はドメインリストが10件以上あると上位10件を選ぶ

計算方法

サイトエンゲージメントが高い: 1

常に永続化の許可: 2

ブックマーク条件: 4

ホームスクリーンの追加: 8

push通知の許可: 16

サイトエンゲージメントの閾値

15点

ホームスクリーン追加の詳細条件

installed_bonus の値で決定

0より大きいとホームスクリーンに追加されてると判定

最後に起動して10日以内なら installed_bonus は5点になる

ブックマークに追加の詳細条件

ブックマーク数を5件以下にしなくてもサイトエンゲージメントスコアが高ければブックマーク条件を満たす

AngularでPWAやろうよ

Tomoya Ishizaka

Angular公式が提供するパッケージ

@angular/cdk

dndも簡単に導入できる

@angular/pwa, @angular/service-worker, がある

ng add @angular/pwa でmanifest生成

@angular/service-workerは SWUpdate

簡単には届かなかったWeb Push

PWAMPを仕事としている

Web pushとは

ブラウザ向けの通知

Firebaseでハマった

pushの方法は複数ある

ドキュメントが中級者向け

プロトコルやFirebaseの使い方をしっている必要ある

古い仕様や規格の情報がある

push severとは？

ブラウザベンダなどが管理している配信用のサーバー

Firebaseは通知機能のFCMを提供している

何が必須になるか

どのpush serviceを用意するかで道具が変わる

3rd partyのpush server

自前のpush server