frontend-conf-okinawa-2022

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

株式会社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をインストール可能にする基本的な実装方法  これだけ！ • <head> に数行追加 (iOS) • manifest.jsonを追加 (Android) •
ServiceWorkerの登録  

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

PWAをインストール可能にする基本的な実装方法  これだけ！ • <head> に数行追加 (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で一緒にお仕事しませんか？  ご依頼・各職種の採用も募集中 

frontend-conf-okinawa-2022

frontend-conf-okinawa-2022

Chinen

More Decks by Chinen

Other Decks in Technology

Featured

Transcript

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

株式会社TAM/TAMTO：フロントエンドエンジニア兼個人事業主   知念昌史 / まぁし Twitter@chocodogmagic  •

PWA実装してますか？

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

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

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

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

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

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の画面スクショがあるとなお良い

好きなタイミングでインストールできるように  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/

フロントエンドで話しましょう！ぜひご連絡を！  Twitter まぁし@chocodogmagic  フォローしてね  PWA Night CONFERENCE 2022  　　　　　　　　　　12/3（土）  参加してね！