Tweet
Tweet

Slide 1

Slide 1 text

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


Slide 2

Slide 2 text

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


Slide 3

Slide 3 text

PWA実装してますか？


Slide 4

Slide 4 text

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


Slide 5

Slide 5 text

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


Slide 6

Slide 6 text

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


Slide 7

Slide 7 text

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


Slide 8

Slide 8 text

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


Slide 9

Slide 9 text

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


Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

理由その2：iPhoneでインストールがわかりづらい
 


Slide 12

Slide 12 text

理由その3：Androidのインストール怖い
 
 この違い
 わかりますか・・？
 ※とてもお世話になっている https://yakkun.com/ から引用

Slide 13

Slide 13 text

ユーザーがわかりやすいようにしよう
 
 ※一般人はPWAとアプリの違いはわかりません


Slide 14

Slide 14 text

Richer PWA installation UI ※Androidのみ
 例）Twitter
 https://mobile.twitter.com/ から引用

Slide 15

Slide 15 text

まだハードル高い


Slide 16

Slide 16 text

説明ページを作ろう
 ● ダウンロードするメリットを説明
 ● インストールの仕方を書く
 ○ PC/iOS/Andoidで説明を分ける 
 ○ PWAの画面スクショがあるとなお良い 
 ○ iOSは共有メニューからインストールする 
 流れを説明したスクショが必須 
 ● 注意：インストール必須な要件にしない
 PWAはWebサイトで動くもの
 https://kan-teki.com/guide/details/ から引用

Slide 17

Slide 17 text

好きなタイミングでインストールできるように
 Androidのmini infobarは非表示にする
 
 
 
 
 PC/Androidでは別途ダウンロード用のボ タンを用意し、クリックでインストールメ ニューが開くようにする


Slide 18

Slide 18 text

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


Slide 19

Slide 19 text

mini-infobar
 https://deploy-preview-5--pwa-before-install.netlify.app/

Slide 20

Slide 20 text

Richer PWA installation UI
 https://deploy-preview-6--pwa-before-install.netlify.app/

Slide 21

Slide 21 text

ダウンロードボタン
 https://pwa-before-install.netlify.app/

Slide 22

Slide 22 text

まとめ
 ● 全部インストールさせようとするのはよくない
 　ユーザーにメリットを説明する・ユーザーが選べるようにする
 
 ● Webブラウザで動くことが前提
 　PCでもスマホでも、ブラウザでもスタンドアローンでも使える
 　ホームにインストール前提の要件にしない
 
 ● 使いやすいWebを作ろう！！！


Slide 23

Slide 23 text

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