Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
実践PWA 2020 / charitycon_oki2020
Search
Chinen
June 21, 2020
Programming
0
620
実践PWA 2020 / charitycon_oki2020
Chinen
June 21, 2020
Tweet
Share
More Decks by Chinen
See All by Chinen
MTDDC Meetup TOKYO 2023
chinen
1
300
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
1.5k
WWDC2023-Recap-LT
chinen
1
100
Web Push対応状況2023
chinen
0
470
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
120
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
140
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.3k
frontend-conf-okinawa-2022
chinen
0
380
Jamstack導入時の罠/ジャムスタックチョットデキル!! 秋のLT大会2022
chinen
1
330
Other Decks in Programming
See All in Programming
AHC035解説
terryu16
0
730
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
みんなのオブザーバビリティプラットフォームを作ってるんだがパフォーマンスがやばい #mackerelio #srenext
ne_sachirou
0
380
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
AWSでゲームサーバーを運用! Amazon GameLiftのお話
iriikeita
0
200
Advanced App Shrinking Techniques
cbeyls
2
150
CSC307 Lecture 11
javiergs
PRO
0
240
Activities at Cairo Library
cairolibrary720
0
1.2k
iOSアプリでクリップボードにコピーしたことをユーザーに伝えるちょうど良いフィードバックを探す
ski
0
100
유연한 Composable 설계
l2hyunwoo
0
380
データカタログ運用物語 〜令和6年夏の理想と現実〜
kuro_kurorrr
0
110
Featured
See All Featured
Unsuck your backbone
ammeep
666
57k
The Cult of Friendly URLs
andyhume
75
5.9k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Raft: Consensus for Rubyists
vanstee
134
6.5k
Git: the NoSQL Database
bkeepers
PRO
423
64k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Facilitating Awesome Meetings
lara
46
5.8k
Documentation Writing (for coders)
carmenintech
63
4.2k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
Building an army of robots
kneath
301
42k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Transcript
実践PWA 2020 2020/06/21 まぁし / 知念 昌史
今日の話 1. PWAの動向2020 2. PWAとは 3. クライアントワークでのPWA 4. PWAの実装方法 (質問・感想をツイートしてね!
#charitycon_oki #roomB )
参加者アンケート
知念 昌史 / まぁし 株式会社TAM フロントエンドエンジニア • 沖縄出身、大学卒業後に就職を期に東京へ • 未経験からWeb業界へ転職:美容師→エンジニア •
2019年に沖縄へ戻りそのままTAMでリモート勤務 • リモートで新人教育を担当中 • 技術コミュニティ運営 ◦ PWA Night(東京) ◦ v-okinawa(沖縄) • この登壇が終わったらポケモン買う(剣盾)
今日の話 1. PWAの動向2020 2. PWAとは 3. クライアントワークでのPWA 4. PWAの実装方法 (質問・感想をツイートしてね!
#charitycon_oki #roomB )
Google Trends
世界
日本
日本でPWAがトレンドだよ! (ツイートのチャンス!! #charitycon_oki #roomB )
今日の話 1. PWAの動向2020 2. PWAとは 3. クライアントワークでのPWA 4. PWAの実装方法 (質問・感想をツイートしてね!
#charitycon_oki #roomB )
PWAとは・・Progressive Web App Progressive = 前進する、進歩的、進行形 なウェブアプリ WEB PWA
Webアプリ Webサイト (静的) Android iOS ネイティブアプリ
新しい言語ではない 新しいフレームワークではない
ブラウザとJavaScriptでできること
技術的な目線では・・・? • HTTPSで提供していること • Service Worker • マニフェストファイル 機能的な目線では・・・? •
ホーム画面にインストールできる • オフライン対応 • プッシュ通知
どこまでやったらPWA?
チェックリスト What makes a good Progressive Web App? https://web.dev/pwa-checklist/ できるところからでOK!
1. Capable・・・Webでできる 2. Reliable・・・安定・信頼性 3. Installable・・・インストール可能
None
PWAの本質とは
より良いWeb体験を作っていくこと → PWA
今日の話 1. PWAの動向2020 2. PWAとは 3. クライアントワークでのPWA 4. PWAの実装方法 (質問・感想をツイートしてね!
#charitycon_oki #roomB )
クライアントワークでのPWA さまざまなご相談をいただいています。 • BtoB 部品メーカーのタイ向け商材検索アプリ • 脳疾患患者向けの情報コンテンツPWA • 銀行系アプリのPWA化・R&D協力(調査レポート、デモサンプル開発) •
宝石販売の新規サービス開発 • カラオケ関連サービスのマイページ機能のPWA化 • アルバイト求人ポータルのPWA化 • 海外学生向けのラーニングアプリ
無理にPWAにする必要は無い
基本的な設計ができていること Webアプリとしての設計ができていれば、付加価値としてPWAを追加できる → ホームに追加、オフラインページの追加、キャッシュによる表示高速化など → 既存のウェブサイトがあればすぐにできる PWAありきの設計にしてしまうと、ブラウザ対応でネックになることも → Safari、IEなど ノーコードでできるサービスもアリ
→ Glide → WordPressプラグインもある
導入しやすいプロジェクト • 業務系アプリ・社内ツール(ブラウザ・使用状況が限定される) • PoC(実証実験) • スタートアップ • ウェブサービス(情報・教育・飲食、スポーツ、音楽) •
ECサイト • 会員サイト、マイページ、コミュニティサイト
ネイティブアプリから乗り換えるケースも • ネイティブアプリのダウンロードが少ない → Web(PWA)の方が検索してもらえる • 更新・改修もiOS/Androidとコストが二重にかかる、PDCAが遅くなる → Web(PWA)ならワンソース、レスポンシブでマルチデバイス対応 •
OSのバージョンアップ、改修のたびに審査が必要(費用も) → 審査不要ですぐリリース可能 • iOS/Androidアプリエンジニアよりも、 JavaScriptができるWebエンジニアの方がリソースを揃えやすい
今日の話 1. PWAの動向2020 2. PWAとは 3. クライアントワークでのPWA 4. PWAの実装方法 (質問・感想をツイートしてね!
#charitycon_oki #roomB )
Webサイトを ホーム画面に 追加できるようにしてみよう
ホーム画面へインストールできるようにする 1. manifest.jsonを追加 2. iOS用にheadタグに設定を追加 3. Service Workerを登録
HTMLを用意
manifest.jsonを作成 manifest.json
headタグで manifest.jsonを読み込み
headタグにiOS用の設定
ServiceWorkerの設定ファイルを作成 sw.js
ServiceWorkerを登録するJSファイルを作成 script.js
jsファイルを読み込み
これでホーム画面に追加OK!
できるところから少しずつ取り組もう (Progressive)
PWA Nightで事例を教えて 毎月、第3水曜に勉強会イベント開催中!!
PWAで困ったらTAMに相談ください
今日の話 1. PWAの動向2020 2. PWAとは 3. クライアントワークでのPWA 4. PWAの実装方法 (質問・感想をツイートしてね!
#charitycon_oki #roomB ) ぷわん TAMくん
ありがとうございました!!! Twitter @chocodogmagic お気軽にフォローどうぞ! 毎月、第3水曜の PWA Nightも よろしくね! 「実践PWA」BOOTHで検索