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

frontend-conf-okinawa-2022

Chinen
November 19, 2022
Technology
0
84

 frontend-conf-okinawa-2022

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

Chinen

November 19, 2022
Tweet

More Decks by Chinen

See All by Chinen
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
2
440
Jamstack導入時の罠/ジャムスタックチョットデキル!! 秋のLT大会2022
chinen
1
200
クライアントワーク（受託）のJamstack開発でNuxt 3を提案・実装する / Reject Conference - Vue Fes Japan Online 2022
chinen
2
660
フロントエンドから見たWeb制作の変遷 / PHP Conference Okinawa 2022
chinen
3
1.6k
個人開発から学ぶVue.js開発環境 / v-okinawa Meetup #5
chinen
0
51
エンジニア目線でのShifter / Shifter Meetup 2021-09-08
chinen
1
240
Shifter Staticのサイトを PWAにしよう / PWA Night Conference 2021
chinen
0
820
Shifter staticで REST APIしたい / Shifter Meetup 2020-12-02
chinen
0
550
実践PWA 2020 / charitycon_oki2020
chinen
0
450

Other Decks in Technology

See All in Technology
AutoAI_Madoka Magica_AIを使いたくても使えない人に贈るAutoAI もう何も怖くない。奇跡も、魔法も、あるんだよ
tkhresk
0
110
Securing CI/CD Systems Through eBPF (recap)
whywaita
PRO
0
550
コンテナ環境でのJava技術の進化
kazumura
5
1.2k
Svelte Runtime 101 (JSConf JP 2022)
baseballyama
3
4.2k
EMになって半年でやったこと
yuu26
0
290
Microsoft Ignite 2022 Azure AI アップデート
hirosatogamo
0
200
マニフェストレスで使える IaC・CI/CD のSaaSプロダクト化への挑戦
hrk091
1
230
Container Replatform 101
shkitayama
4
390
M365 Security Review
c0d3xpl0it
0
120
宣言的 UI 時代のクライアントサイド DDD 大考察 / Client-side DDD in the Age of Declarative UI
guvalif
10
6.8k
2022年11月22日_コミュニケーションコンプライアンスどう使う？_第5回EMS勉強会登壇資料
guchy_jp
0
450
Oracleが提供するマイクロサービス開発基盤 / oracle-microservices-development-platform-overview
oracle4engineer
PRO
1
120

Featured

See All Featured
Visualization
eitanlees
126
12k
How STYLIGHT went responsive
nonsquared
86
4.1k
Raft: Consensus for Rubyists
vanstee
128
5.6k
The Language of Interfaces
destraynor
149
21k
Building an army of robots
kneath
301
40k
Building Flexible Design Systems
yeseniaperezcruz
311
34k
Learning to Love Humans: Emotional Interface Design
aarron
262
38k
Designing with Data
zakiwarfel
91
4.1k
Stop Working from a Prison Cell
hatefulcrawdad
263
18k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
120
29k
StorybookのUI Testing Handbookを読んだ
zakiyama
7
3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
270
12k

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