フロントエンドカンファレンス沖縄2022の登壇資料です。
PWAをインストール しやすくするための実装 2022/11/19 まぁし(知念)
View Slide
株式会社TAM/TAMTO:フロントエンドエンジニア 兼 個人事業主 知念 昌史 / まぁし Twitter@chocodogmagic ● 沖縄でリモートワーク/元・美容師 ● 技術コミュニティ運営 ○ PWA Night(東京)/ v-okinawa(沖縄) ● Vue.js/Nuxt/Jamstack/セマンティックHTML/ アクセシビリティ/SEO/パフォーマンス改善/CMS ● 最近のハマり:スプラトゥーン3(弓ウデマエS+17) ● 昨日発売のポケモン新作は来週やる!
PWA実装してますか?
PWAとは・・・ 1. Capable(高い機能を持つ) Webの進化で、ネイティブでしかできなかったことがWebで可能に 2. Reliable(信頼性がある) ネットワークに関係なく、高速で信頼性が高い、オフラインでも動く 3. Installable(インストール可能) ブラウザタブではなくスタンドアロンウィンドウで実行される
PWAをインストール可能にする基本的な実装方法 これだけ!● に数行追加 (iOS)● manifest.jsonを追加 (Android)● ServiceWorkerの登録
具体的な実装方法はPWA Night で!
PWAをインストール可能にする基本的な実装方法 これだけ!● に数行追加 (iOS)● manifest.jsonを追加 (Android)● ServiceWorkerの登録なんだけど・・・
PWA実装しただけでは インストールされにくい
理由その1:PCでインストールがわかりづらい https://mobile.twitter.com/ から引用
理由その2:iPhoneでインストールがわかりづらい
理由その3:Androidのインストール怖い この違い わかりますか・・? ※とてもお世話になっているhttps://yakkun.com/ から引用
ユーザーがわかりやすいようにしよう ※一般人はPWAとアプリの違いはわかりません
Richer PWA installation UI ※Androidのみ 例)Twitter https://mobile.twitter.com/ から引用
まだハードル高い
説明ページを作ろう ● ダウンロードするメリットを説明 ● インストールの仕方を書く ○ PC/iOS/Andoidで説明を分ける ○ PWAの画面スクショがあるとなお良い ○ iOSは共有メニューからインストールする 流れを説明したスクショが必須 ● 注意:インストール必須な要件にしない PWAはWebサイトで動くもの https://kan-teki.com/guide/details/ から引用
好きなタイミングでインストールできるように Androidのmini infobarは非表示にする PC/Androidでは別途ダウンロード用のボタンを用意し、クリックでインストールメニューが開くようにする
コードを見ていきましょう ※Sampleコードは公開しています https://github.com/chinen-octtn/pwaBeforeInstall
mini-infobar https://deploy-preview-5--pwa-before-install.netlify.app/
Richer PWA installation UI https://deploy-preview-6--pwa-before-install.netlify.app/
ダウンロードボタン https://pwa-before-install.netlify.app/
まとめ ● 全部インストールさせようとするのはよくない ユーザーにメリットを説明する・ユーザーが選べるようにする ● Webブラウザで動くことが前提 PCでもスマホでも、ブラウザでもスタンドアローンでも使える ホームにインストール前提の要件にしない ● 使いやすいWebを作ろう!!!
フロントエンドで話しましょう!ぜひご連絡を! Twitter まぁし@chocodogmagic フォローしてね PWA Night CONFERENCE 2022 12/3(土) 参加してね! 平日9:00〜SpacesでWeb情報発信中! TAMで一緒にお仕事しませんか? ご依頼・各職種の採用も募集中