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
730
実践PWA 2020 / charitycon_oki2020
Chinen
June 21, 2020
Tweet
Share
More Decks by Chinen
See All by Chinen
MTDDC Meetup TOKYO 2024 / フロントエンドエンジニアの成長に繋がるCMS設計
chinen
0
110
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2.6k
MTDDC Meetup TOKYO 2023
chinen
2
380
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
2k
WWDC2023-Recap-LT
chinen
1
160
Web Push対応状況2023
chinen
0
580
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
210
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
220
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.5k
Other Decks in Programming
See All in Programming
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
ふつうの技術スタックでアート作品を作ってみる
akira888
0
460
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
150
CursorはMCPを使った方が良いぞ
taigakono
1
240
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
160
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
750
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
100
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
430
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
5つのアンチパターンから学ぶLT設計
narihara
1
160
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
340
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.3k
Rails Girls Zürich Keynote
gr2m
94
14k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Bash Introduction
62gerente
614
210k
Fireside Chat
paigeccino
37
3.5k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Writing Fast Ruby
sferik
628
62k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
How STYLIGHT went responsive
nonsquared
100
5.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
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で検索