frontend-conf-okinawa-2022

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

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