PWAとは

Progressive Wev Apps

WebによるネイティブアプリのようなUX

Service Worker

オフライン対応

プッシュ通知

バックグラウンド処理

Web App Manifest

端末にインストール

APIでサポートしてくれるように

クライアントの性能に併せた機能提供

漸進的・段階的

デブサミ2015でバズった

メリット

発見性

アプリストアに登録する必要ない

インストール可能

再エンゲージ可能

ネットワーク非依存

プログレッシブ

レスポンシブ

安全

リンク可能

価値を高めるAPI

CSS3

PWA vs モバイルWeb vs モバイルApp

比較項目

機能

Web = PWA < Native

Web、PWA

ハードウェアはWeb標準のことしかできない

プラットフォームはなし（非依存）

Native

ハードウェアはAPIが用意

プラットフォームもAPI用意

開発

Web, PWA

言語：JavaScript

導線：ブラウザー

Native

言語：プラットフォームごとで異なる

導線：アプリストア

欠点は自分のペースでリリースしづらい

UX

アクティブユーザーはNative

未体験の人はWeb

PWAはその中間の担える？

アプリストアの功罪

Web/PWA

SEOを頑張る

信頼をどうやって構築していく？

Native

登録費、審査

特集でとりあげてもらう、SEOなど

支払いに関して

Nativeはギフトカード・キャリア決済がある

Web/PWAは…？

PWAは本当に有益な体験をもたらしてくれるのか？

Web App Manifest

不利益になりうる

タブと検索窓を奪う

検索するのにいちいちブラウザに移動する

Packt

アイコンをホームにおける

コンテンツを保有した気分になる

場所を覚えていない

通知のタイミングを知らせてくれる

Packt（EC） → Mapt（電子書籍アプリ）への移動

ググることから留数がスタート

結果からPWAに飛ばされる

タブ上の行き来による記事の比較ができない

Yahoo!JAPAN

ホームアイコンを置くオファーがかなりうざい

記事は別ダブが開くのでアプリ内ブラウザに追いやられる

Service Wokerでは fetch しかイベント設置していない（実験的？）

Cash API

ABC 2018 Spring

告知／募集→タイムテーブル

タイムテーブルのみが必要

キャッシュのせいで思ったような更新がされない

WordPressがあちこちキャッシュとってくる

MapがPWAからは外部サイト扱い

端末ごとの挙動に差異がある

PWAのパフォーマンスがネイティブには勝てない

ベストプラクティス

一体どこにリーチするかをしっかりと調査・検討しておく

ユーザーのパラダイムを近い

PWAの仕様を理解してユーザーに喜んでもらえる設計をやろう