$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 まぁし(知念)


    View Slide

  2. 株式会社TAM/TAMTO:フロントエンドエンジニア 兼 個人事業主

    知念 昌史 / まぁし Twitter@chocodogmagic

    ● 沖縄でリモートワーク/元・美容師

    ● 技術コミュニティ運営

    ○ PWA Night(東京)/ v-okinawa(沖縄)

    ● Vue.js/Nuxt/Jamstack/セマンティックHTML/

    アクセシビリティ/SEO/パフォーマンス改善/CMS

    ● 最近のハマり:スプラトゥーン3(弓ウデマエS+17)

    ● 昨日発売のポケモン新作は来週やる!


    View Slide

  3. PWA実装してますか?


    View Slide

  4. PWAとは・・・

    1. Capable(高い機能を持つ)

    Webの進化で、ネイティブでしかできなかったことがWebで可能に


    2. Reliable(信頼性がある)

    ネットワークに関係なく、高速で信頼性が高い、オフラインでも動く


    3. Installable(インストール可能)

    ブラウザタブではなくスタンドアロンウィンドウで実行される


    View Slide

  5. PWAとは・・・

    1. Capable(高い機能を持つ)

    Webの進化で、ネイティブでしかできなかったことがWebで可能に


    2. Reliable(信頼性がある)

    ネットワークに関係なく、高速で信頼性が高い、オフラインでも動く


    3. Installable(インストール可能)

    ブラウザタブではなくスタンドアロンウィンドウで実行される


    View Slide

  6. PWAをインストール可能にする基本的な実装方法

    これだけ!
    ● に数行追加 (iOS)
    ● manifest.jsonを追加 (Android)
    ● ServiceWorkerの登録

    View Slide

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


    View Slide

  8. PWAをインストール可能にする基本的な実装方法

    これだけ!
    ● に数行追加 (iOS)
    ● manifest.jsonを追加 (Android)
    ● ServiceWorkerの登録
    なんだけど・・・

    View Slide

  9. PWA実装しただけでは

    インストールされにくい


    View Slide

  10. 理由その1:PCでインストールがわかりづらい 

    https://mobile.twitter.com/ から引用

    View Slide

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


    View Slide

  12. 理由その3:Androidのインストール怖い


    この違い

    わかりますか・・?

    ※とてもお世話になっている
    https://yakkun.com/ から引用

    View Slide

  13. ユーザーがわかりやすいようにしよう


    ※一般人はPWAとアプリの違いはわかりません


    View Slide

  14. Richer PWA installation UI ※Androidのみ

    例)Twitter

    https://mobile.twitter.com/ から引用

    View Slide

  15. まだハードル高い


    View Slide

  16. 説明ページを作ろう

    ● ダウンロードするメリットを説明

    ● インストールの仕方を書く

    ○ PC/iOS/Andoidで説明を分ける 

    ○ PWAの画面スクショがあるとなお良い 

    ○ iOSは共有メニューからインストールする 

    流れを説明したスクショが必須 

    ● 注意:インストール必須な要件にしない

    PWAはWebサイトで動くもの

    https://kan-teki.com/guide/details/ から引用

    View Slide

  17. 好きなタイミングでインストールできるように

    Androidのmini infobarは非表示にする





    PC/Androidでは別途ダウンロード用のボ
    タンを用意し、クリックでインストールメ
    ニューが開くようにする


    View Slide

  18. コードを見ていきましょう ※Sampleコードは公開しています

    https://github.com/chinen-octtn/pwaBeforeInstall


    View Slide

  19. mini-infobar

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

    View Slide

  20. Richer PWA installation UI

    https://deploy-preview-6--pwa-before-install.netlify.app/

    View Slide

  21. ダウンロードボタン

    https://pwa-before-install.netlify.app/

    View Slide

  22. まとめ

    ● 全部インストールさせようとするのはよくない

     ユーザーにメリットを説明する・ユーザーが選べるようにする


    ● Webブラウザで動くことが前提

     PCでもスマホでも、ブラウザでもスタンドアローンでも使える

     ホームにインストール前提の要件にしない


    ● 使いやすいWebを作ろう!!!


    View Slide

  23. フロントエンドで話しましょう!ぜひご連絡を!

    Twitter まぁし@chocodogmagic

    フォローしてね

    PWA Night CONFERENCE 2022

              12/3(土)

    参加してね!

    平日9:00〜SpacesでWeb情報発信中!

    TAMで一緒にお仕事しませんか?

    ご依頼・各職種の採用も募集中


    View Slide