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

frontend-conf-okinawa-2022

Avatar for Chinen Chinen
November 19, 2022
Technology
0
520

 frontend-conf-okinawa-2022

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

Avatar for Chinen

Chinen

November 19, 2022
Tweet

More Decks by Chinen

See All by Chinen
MTDDC Meetup TOKYO 2024 / フロントエンドエンジニアの成長に繋がるCMS設計
Avatar for Chinen chinen
0
130
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
Avatar for Chinen chinen
3
2.8k
MTDDC Meetup TOKYO 2023
Avatar for Chinen chinen
2
390
Nuxt 3でJamstackテンプレートを作るときの考え方
Avatar for Chinen chinen
3
2k
WWDC2023-Recap-LT
Avatar for Chinen chinen
1
160
Web Push対応状況2023
Avatar for Chinen chinen
0
590
技術記事が書けない人はGPTに背中を押してもらおう
Avatar for Chinen chinen
2
220
Three.jsで3Dぷわんを動かす / PWA Night vol.46
Avatar for Chinen chinen
0
230
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
Avatar for Chinen chinen
3
1.5k

Other Decks in Technology

See All in Technology
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
Avatar for ypresto ypresto
10
4.5k
Oracle Cloud Infrastructure：2025年9月度サービス・アップデート
Avatar for oracle4engineer oracle4engineer
PRO
0
400
DataOpsNight#8_Terragruntを用いたスケーラブルなSnowflakeインフラ管理
Avatar for Hiroki Yamagishi roki18d
1
340
Pure Goで体験するWasmの未来
Avatar for asuka askua
1
180
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
Avatar for Sansan R&D sansan_randd
0
100
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか？
Avatar for Masahiro Yoshizawa muziyoshiz
1
100
pprof vs runtime/trace (FlightRecorder)
Avatar for task4233 task4233
0
160
ユニットテストに対する考え方の変遷 / Everyone should watch his live coding
Avatar for mdstoy mdstoy
0
130
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
Avatar for ファインディ株式会社（イベント資料アップ用） findy_eventslides
0
120
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す：設計と活用事例
Avatar for Fumiya Sakai fumiyasac0921
0
140
How to achieve interoperable digital identity across Asian countries
Avatar for Naohiro Fujie fujie
0
120
SoccerNet GSRの紹介と技術応用：選手視点映像を提供するサッカー作戦盤ツール
Avatar for MIXI ENGINEERS mixi_engineers
PRO
1
170

Featured

See All Featured
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.1k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
352
21k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.6k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
66k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.1k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.7k

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