Upgrade to Pro — share decks privately, control downloads, hide ads and more …

frontend-conf-okinawa-2022

Avatar for Chinen Chinen
November 19, 2022
Technology
590
0

 frontend-conf-okinawa-2022

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

Avatar for Chinen

Chinen

November 19, 2022

More Decks by Chinen

See All by Chinen
v-okinawa meetup vol.11 / CMSでゲーム開発を効率化する
Avatar for Chinen chinen
1
60
MTDDC Meetup TOKYO 2024 / フロントエンドエンジニアの成長に繋がるCMS設計
Avatar for Chinen chinen
0
220
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
Avatar for Chinen chinen
3
3.3k
MTDDC Meetup TOKYO 2023
Avatar for Chinen chinen
2
450
Nuxt 3でJamstackテンプレートを作るときの考え方
Avatar for Chinen chinen
3
2.3k
WWDC2023-Recap-LT
Avatar for Chinen chinen
1
210
Web Push対応状況2023
Avatar for Chinen chinen
0
650
技術記事が書けない人はGPTに背中を押してもらおう
Avatar for Chinen chinen
2
300
Three.jsで3Dぷわんを動かす / PWA Night vol.46
Avatar for Chinen chinen
0
290

Other Decks in Technology

See All in Technology
AI活用の現在地、 ちゃんと見えてますか？/XPfest-2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
170
少人数データチームのDevin活用実践事例
Avatar for Runa Yamada runandy16
3
460
多層防御と最⼩権限で実現する、安全なAIエージェント設計パターン
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
220
enechainの内製セルフサービスプラットフォーム
Avatar for Tomoya Usami hiyosi
0
140
Multica × 長期記憶：40個のミニプロジェクト管理
Avatar for eiei114 eiei114
1
210
AIとペアプロを始める。人とのペアプロをやめる。ペアプロの良さを改めて知る。もっと好きになった。 / Rediscovering Pair Programming
Avatar for yuki honyanya
1
290
振り返りこそエンジニアの本領
Avatar for Negima negima
0
340
AIで開発は速くなったのに、なぜ現場は楽にならないのか 〜あなたの組織のボトルネックを突き止めるワークショップ〜
Avatar for Kazuto Kusama jacopen
1
280
WAF 運用改善の承認サイクル/SRE_BizReach_MIXI_1
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
2
370
コスト最適化の「めんどくさい」を AWS FinOps Agent でチョット楽にする
Avatar for kaz classmethod_kaz
0
280
Bet AI Day 2026丨Agentは、「金融」という巨大産業の何を変えられるのか
Avatar for LayerX layerx
PRO
0
1.2k
ASTを使って影響範囲を特定する
Avatar for Nealle nealle
0
110

Featured

See All Featured
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
53k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
230
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
840
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
580
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3.2k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.9k
Docker and Python
Avatar for Tania Allard trallard
47
4.2k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.4k
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2.1k

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