PWAのキホン～作り方から活用どころまで～
•
3 likes•2,951 views
PWA開発のお仕事のご相談はこちらで受け付けてます！ https://www.tam-tam.co.jp/pwa/ １．PWA ってなに？ ２．PWA を作るいくつかの方法 ３．アプリとしてのPWA とネイティブの比較 ４．PWA の効果 ５．取り組むときのポイント
![自己紹介
角谷 仁 すみやひとし
sumiya@tam-tam.co.jp
https://www.facebook.com/hitoshi.sumiya.1
https://twitter.com/hitoshisum
[経歴]
・TAM取締役 / プロデューサー / 開発チームマネージャ
・IT業界11年目=TAM歴
・チームマネジメント歴7年
・父親歴2年 3児の父](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
More Related Content
What's hot
What's hot (20)
Similar to PWAのキホン～作り方から活用どころまで～
Similar to PWAのキホン～作り方から活用どころまで～ (20)
Recently uploaded
Recently uploaded (11)
PWAのキホン～作り方から活用どころまで～
- 2. 自己紹介 角谷 仁 すみやひとし sumiya@tam-tam.co.jp https://www.facebook.com/hitoshi.sumiya.1 https://twitter.com/hitoshisum [経歴] ・TAM取締役 / プロデューサー / 開発チームマネージャ ・IT業界11年目=TAM歴 ・チームマネジメント歴7年 ・父親歴2年 3児の父
- 4. １．PWAってなに？
- 8. ?
- 10. Core PWA Checklist ・Start fast, stays fast ・Works in any browser ・Responsive to any screen size ・Provides a custom offline page ・Is installable 一応チェックリストと呼ばれるものが紹介されている。 Core PWA Checklist ・Provides an offline experience ・Is fully accessible ・Can be discovered through search ・Works with any input type ・Provides context for permission requests ・Follows best practices for healty code https://web.dev/pwa-checklist/
- 17. いままで 最近できるようになった これからできるようになる ブラウザにできることが増えている Service Worker/Web App Manifestが使えるように。 ・ブラウザプッシュ通知 ・ホームボタン追加の案内 ・ブラウザでキャッシュのコントロールができるように。 … ブラウザのAPIが充実 ・Badging API、Payment Request API… よりネイティブ機能へのアクセスが充実していく ・cssでのリッチな表現 ・JSでつるつる動くサイト（SPA等） ・非同期でのデータ通信 … ブラウザにできること
- 20. ２．PWAを作るいくつかの方法
- 25. Wordpressのプラグイン
- 28. フレームワーク・ライブラリ類
- 33. PWAがネイティブに勝る部分
- 35. 要件定義 iOSアプリ開発 Androidアプリ開発 審査 要件定義 PWAでの開発 ネイティブアプリの場合 PWAの場合 要件定義 iOS/Androidアプリ開発 審査 ハイブリッドアプリの場合 審査開発 審査開発 開発要件定義 開発 リ リ ー ス リ リ ー ス リ リ ー ス 開発 リ リ ー ス リ リ ー ス リ リ ー ス リ リ ー ス 審査開発 審査開発 リ リ ー ス リ リ ー ス 審査開発 開発 開発 リ リ ー ス リ リ ー ス リ リ ー ス 開発 開発 開発 リ リ ー ス リ リ ー ス リ リ ー ス バ ー ジ ョ ン ア ッ プ 対 応 バ ー ジ ョ ン ア ッ プ 対 応 リリースのタイミング「任意」 ウェブアプリならPDCAが回しやすい。運用しやすい。
- 37. ※「アップル税（手数料30%）」 Googleも30％ ※Webなら クレジット決済手数料 数％～（Stripeで3.6%） ストアの高い手数料を払わなくていい ほかにもPWAにはこんなメリットも。
- 38. PWAに向く分野は？
- 49. 日経電子版 PWAの効果 ・Organic Trafficが2.3倍 ・定期購読が58%増 ・DAUが49%増 ・PV/セッションが2倍 Alibaba PWAの効果 ・各ブラウザより76%CV↑ ・ iOSで14%、Androidで30% MAUが多い 。 ・ホームスクリーンからのアクセ スされたら4倍インタラクション される。
- 54. 不動産 Housing.com ・コンバージョン数 38%増加 ・離脱率 40% 減 ・セッション時間10%増加 ・ページ表示スピード 30%アップ
- 55. 旅行系 / ホテル WEGO ・読み込み速度が12秒→1秒未満に ・オーガニックユーザー12％増 ・平均セッション継続時間35％増 （出典：https://developers.google.com/web/showcase/2017/wego）
- 56. 売り上げ300%アップ 旅行系 / ホテル The Best Western River North Hotel
- 57. 「Flipkart Lite」 滞在時間70秒→3.5分 Re-engagement rate 40%上昇 ホームスクリーンからアクセスしたユーザーのCVR が70%アップ データ使用料が3倍減少 E-Commerce Flipkart
- 59. 5．導入時のポイント
- 65. 簡単なところから、少しずつやっていこう。 今のウェブサイト ・ホームに追加 ・スプラッシュ ・HTTPS対応 ・ページの一部 をキャッシュ ・プリキャッシュ （事前読み込み） ・プッシュ通知 ・キャッシュを 使った機能開発 （お気に入りとか） ベーシック ちょっと高度 使いこなし ・Background sync ・App shell導入 ・Payment Request API ・Credentials Management API ・プッシュ通知の自動化
- 69. ありがとうございました！