PWA Progressive Web App
https://gyazo.com/24e21b39d98bbbce009bfce661f1d555
はじめてのプログレッシブウェブアプリ  |  Web Fundamentals  |  Google Developers
Learn
WebSocket API
Web Storage API
Service Worker サービスワーカー
Location API
Notification API
ネイティブ Native App
優位性
動作端末のスペックや回線の帯域によってはPWAやブラウザアプリの方がユーザにとってふさわしい場合
良記事
PWAとは?事例・メリット・実装手順を解説
PWAの大手の事例が増えてきた - Takeshi Amano - Medium
デザイン
💯Instagram
💯現地の人から借りる家、体験&スポット - Airbnb
💯Twitterにログイン
💯https://app.starbucks.com/
💯経済、株価、ビジネス、政治のニュース:日経電子版
インストール
ホーム画面に追加してもらうことを提案する事のタイミング
https://www.youtube.com/watch?v=6R9pupbDXYw&feature=youtu.be
パターンA
初回利用時にネイティブ Native Appのインストールを促す
その後Cookie等でトラッキング Trackingを行す
Webブラウザ Web Browserで利用し続けていると判断した場合はPWAのインストールを促す
パターンB
初回利用時に動作端末のスペックを確認
ネイティブアプリの利用が難しい場合はPWAのインストールを提案
注意
すでにネイティブ Native AppがインストールされているかをOS提供のAPIを利用して確かめておく
問題
iOS
できない
通知
Safari色々深みがある
アドレスバーなど
スクロールのぐぐっとできるやつ
UIでホーム画面に追加できない
参考
💯iPhone 11, iPadOS and iOS 13 for PWAs and web development
https://medium.com/@firt/safari-on-ios-14-and-ipados-14-for-pwa-and-web-developers-firt-dev-afb9f6489aef
PWAのキホン~作り方から活用どころまで~
ビジネス的な効果、向上よかった
A one year PWA retrospective. Zack Argyle | Engineering manager, Core… | by Pinterest Engineering | Pinterest Engineering Blog | Medium
事例