frontend-conf-okinawa-2022

フロントエンドカンファレンス沖縄2022の登壇資料です。

Transcript

1. PWAをインストール
 しやすくするための実装
 2022/11/19　まぁし（知念）

2. 株式会社TAM/TAMTO：フロントエンドエンジニア 兼 個人事業主 
 知念 昌史 / まぁし Twitter@chocodogmagic
 • 沖縄でリモートワーク/元・美容師
 • 技術コミュニティ運営
 ◦ PWA Night（東京）/ v-okinawa（沖縄） 
 • Vue.js/Nuxt/Jamstack/セマンティックHTML/
 アクセシビリティ/SEO/パフォーマンス改善/CMS
 • 最近のハマり：スプラトゥーン3（弓ウデマエS+17）
 • 昨日発売のポケモン新作は来週やる！

3. PWA実装してますか？

4. PWAとは・・・
 1. Capable（高い機能を持つ）
 Webの進化で、ネイティブでしかできなかったことがWebで可能に
 
 2. Reliable（信頼性がある）
 ネットワークに関係なく、高速で信頼性が高い、オフラインでも動く
 
 3. Installable（インストール可能）
 ブラウザタブではなくスタンドアロンウィンドウで実行される

5. PWAとは・・・
 1. Capable（高い機能を持つ）
 Webの進化で、ネイティブでしかできなかったことがWebで可能に
 
 2. Reliable（信頼性がある）
 ネットワークに関係なく、高速で信頼性が高い、オフラインでも動く
 
 3. Installable（インストール可能）
 ブラウザタブではなくスタンドアロンウィンドウで実行される

6. PWAをインストール可能にする基本的な実装方法
 これだけ！ • <head> に数行追加 (iOS) • manifest.jsonを追加 (Android) • ServiceWorkerの登録 

7. 具体的な実装方法はPWA Night で！

8. PWAをインストール可能にする基本的な実装方法
 これだけ！ • <head> に数行追加 (iOS) • manifest.jsonを追加 (Android) • ServiceWorkerの登録 なんだけど・・・ 

9. PWA実装しただけでは
 インストールされにくい

10. 理由その1：PCでインストールがわかりづらい 
 https://mobile.twitter.com/ から引用
11. 理由その2：iPhoneでインストールがわかりづらい
 

12. 理由その3：Androidのインストール怖い
 
 この違い
 わかりますか・・？
 ※とてもお世話になっている https://yakkun.com/ から引用
13. ユーザーがわかりやすいようにしよう
 
 ※一般人はPWAとアプリの違いはわかりません

14. Richer PWA installation UI ※Androidのみ
 例）Twitter
 https://mobile.twitter.com/ から引用
15. まだハードル高い

16. 説明ページを作ろう
 • ダウンロードするメリットを説明
 • インストールの仕方を書く
 ◦ PC/iOS/Andoidで説明を分ける 
 ◦ PWAの画面スクショがあるとなお良い 
 ◦ iOSは共有メニューからインストールする 
 流れを説明したスクショが必須 
 • 注意：インストール必須な要件にしない
 PWAはWebサイトで動くもの
 https://kan-teki.com/guide/details/ から引用
17. 好きなタイミングでインストールできるように
 Androidのmini infobarは非表示にする
 
 
 
 
 PC/Androidでは別途ダウンロード用のボ タンを用意し、クリックでインストールメ ニューが開くようにする

18. コードを見ていきましょう ※Sampleコードは公開しています
 https://github.com/chinen-octtn/pwaBeforeInstall

19. mini-infobar
 https://deploy-preview-5--pwa-before-install.netlify.app/
20. Richer PWA installation UI
 https://deploy-preview-6--pwa-before-install.netlify.app/
21. ダウンロードボタン
 https://pwa-before-install.netlify.app/
22. まとめ
 • 全部インストールさせようとするのはよくない
 　ユーザーにメリットを説明する・ユーザーが選べるようにする
 
 • Webブラウザで動くことが前提
 　PCでもスマホでも、ブラウザでもスタンドアローンでも使える
 　ホームにインストール前提の要件にしない
 
 • 使いやすいWebを作ろう！！！

23. フロントエンドで話しましょう！ぜひご連絡を！
 Twitter まぁし@chocodogmagic
 フォローしてね
 PWA Night CONFERENCE 2022
 　　　　　　　　　　12/3（土）
 参加してね！
 平日9:00〜SpacesでWeb情報発信中！ 
 TAMで一緒にお仕事しませんか？
 ご依頼・各職種の採用も募集中