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

frontend-conf-okinawa-2022

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Chinen Chinen
November 19, 2022
Technology
580
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
58
MTDDC Meetup TOKYO 2024 / フロントエンドエンジニアの成長に繋がるCMS設計
Avatar for Chinen chinen
0
220
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
Avatar for Chinen chinen
3
3.2k
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
【Aiming】共通基盤なのに「共通化しない」課金・認証基盤「LINK」が選び取ったシングルテナント戦略と運用の秘訣
Avatar for sikeda saikeda
0
160
長期運営で肥大化したExcelマスターデータの解消に向けた移行事例
Avatar for gree_tech gree_tech
PRO
0
280
AI・HPC開発を支えるGPU環境の新しい選択肢 液冷GPUシステム「AquSys」の取り組み
Avatar for GPU UNITE gpuunite_official
0
230
生成 AI の基礎 〜 サンプル実装で学ぶ基本原理
Avatar for Etsuji Nakai enakai00
7
4.6k
型落ちシンクライアント端末のPoEモジュールを自作したかった話
Avatar for Takuto Nagami logica0419
0
330
アクセスキーが漏れた日にやるべきこと- 無効化の先にある本当の対応
Avatar for kazzpapa3 kazzpapa3
0
240
SmartHR Engineering Team Deck
Avatar for SmartHR, Inc. smarthr
1
3.5k
2026-08-15 JAWS-UG 茨城 #16 Secrets ManagerにおけるSecret値の管理(Terraformの場合) / Secrets Manager Secrets
Avatar for SUZUKI Masashi masasuzu
0
540
英語が話せなくてもKubeConスタッフに参加した話
Avatar for cyokozai yusuke427
2
1.1k
ハッカソンで入賞した話 @ Findy LT
Avatar for asari asari194617
0
1.5k
【GCC2026】TrueHDRIを用いたルックデブ環境とライティングテクニック
Avatar for Bandai Namco Studios Inc. bandainamcostudios
PRO
0
280
平文パスワードはログに“残り” ── 肝心の侵入は“痕跡すら残らない”
Avatar for kuroneko kuroneko13
0
120

Featured

See All Featured
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
380
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1369
210k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
660
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
3
480
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
390
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
63
45k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
64
56k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.8k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.6k
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
440
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k

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