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
許しとアジャイル
Avatar for Jun Nakajima jnuank
1
120
"複雑なデータ処理 × 静的サイト" を両立させる、楽をするRails運用 / A low-effort Rails workflow that combines “Complex Data Processing × Static Sites”
Avatar for hogelog hogelog
3
1.9k
Findy Team+のSOC2取得までの道のり
Avatar for adachi.ryo rvirus0817
0
330
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
Avatar for maroon1st maroon1st
0
190
Access-what? why and how, A11Y for All - Nordic.js 2025
Avatar for Geisy Domiciano gdomiciano
1
110
それでも私はContextに値を詰めたい | Go Conference 2025 / go conference 2025 fill context
Avatar for Yoichiro Shimizu budougumi0617
4
1.2k
Goにおける 生成AIによるコード生成の ベンチマーク評価入門
Avatar for どすこい daisuketakeda
2
100
about #74462 go/token#FileSet
Avatar for tom twinkle tomtwinkle
1
290
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
Avatar for moriyuya moriyuya
4
520
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
Avatar for ファインディ株式会社（イベント資料アップ用） findy_eventslides
0
120
Function calling機能をPLaMo2に実装するには / PFN LLMセミナー
Avatar for Preferred Networks pfn
PRO
0
920
OpenAI gpt-oss ファインチューニング入門
Avatar for kmotohas kmotohas
2
960

Featured

See All Featured
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
19
1.2k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
252
21k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.8k
Fireside Chat
Avatar for paigeccino paigeccino
40
3.7k
Writing Fast Ruby
Avatar for Erik Berlin sferik
629
62k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
127
53k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.7k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
25k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M

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