$30 off During Our Annual Pro Sale. View Details »

frontend-conf-okinawa-2022

Chinen
November 19, 2022

 frontend-conf-okinawa-2022

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

Chinen

November 19, 2022
Tweet

More Decks by Chinen

Other Decks in Technology

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で一緒にお仕事しませんか?
 ご依頼・各職種の採用も募集中