Slide 1
Slide 1 text
実践PWA 2020
2020/06/21 まぁし / 知念 昌史
Slide 2
Slide 2 text
今日の話
1. PWAの動向2020
2. PWAとは
3. クライアントワークでのPWA
4. PWAの実装方法
（質問・感想をツイートしてね！ #charitycon_oki #roomB ）
Slide 3
Slide 3 text
参加者アンケート
Slide 4
Slide 4 text
知念 昌史 / まぁし
株式会社TAM フロントエンドエンジニア
● 沖縄出身、大学卒業後に就職を期に東京へ
● 未経験からWeb業界へ転職：美容師→エンジニア
● 2019年に沖縄へ戻りそのままTAMでリモート勤務
● リモートで新人教育を担当中
● 技術コミュニティ運営
○ PWA Night（東京）
○ v-okinawa（沖縄）
● この登壇が終わったらポケモン買う（剣盾）
Slide 5
Slide 5 text
今日の話
1. PWAの動向2020
2. PWAとは
3. クライアントワークでのPWA
4. PWAの実装方法
（質問・感想をツイートしてね！ #charitycon_oki #roomB ）
Slide 6
Slide 6 text
Google Trends
Slide 7
Slide 7 text
世界
Slide 8
Slide 8 text
日本
Slide 9
Slide 9 text
日本でPWAがトレンドだよ！
（ツイートのチャンス！！ #charitycon_oki #roomB ）
Slide 10
Slide 10 text
今日の話
1. PWAの動向2020
2. PWAとは
3. クライアントワークでのPWA
4. PWAの実装方法
（質問・感想をツイートしてね！ #charitycon_oki #roomB ）
Slide 11
Slide 11 text
PWAとは・・Progressive Web App
Progressive = 前進する、進歩的、進行形
なウェブアプリ
WEB
PWA
Webアプリ
Webサイト
（静的）
Android
iOS
ネイティブアプリ
Slide 12
Slide 12 text
新しい言語ではない
新しいフレームワークではない
Slide 13
Slide 13 text
ブラウザとJavaScriptでできること
Slide 14
Slide 14 text
技術的な目線では・・・？
● HTTPSで提供していること
● Service Worker
● マニフェストファイル
機能的な目線では・・・？
● ホーム画面にインストールできる
● オフライン対応
● プッシュ通知
Slide 15
Slide 15 text
どこまでやったらPWA？
Slide 16
Slide 16 text
チェックリスト
What makes a good Progressive Web App?
https://web.dev/pwa-checklist/
できるところからでOK！
1. Capable・・・Webでできる
2. Reliable・・・安定・信頼性
3. Installable・・・インストール可能
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
PWAの本質とは
Slide 19
Slide 19 text
より良いWeb体験を作っていくこと
→ PWA
Slide 20
Slide 20 text
今日の話
1. PWAの動向2020
2. PWAとは
3. クライアントワークでのPWA
4. PWAの実装方法
（質問・感想をツイートしてね！ #charitycon_oki #roomB ）
Slide 21
Slide 21 text
クライアントワークでのPWA
さまざまなご相談をいただいています。
● BtoB 部品メーカーのタイ向け商材検索アプリ
● 脳疾患患者向けの情報コンテンツPWA
● 銀行系アプリのPWA化・R&D協力（調査レポート、デモサンプル開発）
● 宝石販売の新規サービス開発
● カラオケ関連サービスのマイページ機能のPWA化
● アルバイト求人ポータルのPWA化
● 海外学生向けのラーニングアプリ
Slide 22
Slide 22 text
無理にPWAにする必要は無い
Slide 23
Slide 23 text
基本的な設計ができていること
Webアプリとしての設計ができていれば、付加価値としてPWAを追加できる
→ ホームに追加、オフラインページの追加、キャッシュによる表示高速化など
→ 既存のウェブサイトがあればすぐにできる
PWAありきの設計にしてしまうと、ブラウザ対応でネックになることも
→ Safari、IEなど
ノーコードでできるサービスもアリ
→ Glide
→ WordPressプラグインもある
Slide 24
Slide 24 text
導入しやすいプロジェクト
● 業務系アプリ・社内ツール（ブラウザ・使用状況が限定される）
● PoC（実証実験）
● スタートアップ
● ウェブサービス（情報・教育・飲食、スポーツ、音楽）
● ECサイト
● 会員サイト、マイページ、コミュニティサイト
Slide 25
Slide 25 text
ネイティブアプリから乗り換えるケースも
● ネイティブアプリのダウンロードが少ない
→ Web（PWA）の方が検索してもらえる
● 更新・改修もiOS/Androidとコストが二重にかかる、PDCAが遅くなる
→ Web（PWA）ならワンソース、レスポンシブでマルチデバイス対応
● OSのバージョンアップ、改修のたびに審査が必要（費用も）
→ 審査不要ですぐリリース可能
● iOS/Androidアプリエンジニアよりも、
JavaScriptができるWebエンジニアの方がリソースを揃えやすい
Slide 26
Slide 26 text
今日の話
1. PWAの動向2020
2. PWAとは
3. クライアントワークでのPWA
4. PWAの実装方法
（質問・感想をツイートしてね！ #charitycon_oki #roomB ）
Slide 27
Slide 27 text
Webサイトを
ホーム画面に
追加できるようにしてみよう
Slide 28
Slide 28 text
ホーム画面へインストールできるようにする
1. manifest.jsonを追加
2. iOS用にheadタグに設定を追加
3. Service Workerを登録
Slide 29
Slide 29 text
HTMLを用意
Slide 30
Slide 30 text
manifest.jsonを作成
manifest.json
Slide 31
Slide 31 text
headタグで manifest.jsonを読み込み
Slide 32
Slide 32 text
headタグにiOS用の設定
Slide 33
Slide 33 text
ServiceWorkerの設定ファイルを作成
sw.js
Slide 34
Slide 34 text
ServiceWorkerを登録するJSファイルを作成
script.js
Slide 35
Slide 35 text
jsファイルを読み込み
Slide 36
Slide 36 text
これでホーム画面に追加OK！
Slide 37
Slide 37 text
できるところから少しずつ取り組もう
（Progressive）
Slide 38
Slide 38 text
PWA Nightで事例を教えて
毎月、第３水曜に勉強会イベント開催中！！
Slide 39
Slide 39 text
PWAで困ったらTAMに相談ください
Slide 40
Slide 40 text
今日の話
1. PWAの動向2020
2. PWAとは
3. クライアントワークでのPWA
4. PWAの実装方法
（質問・感想をツイートしてね！ #charitycon_oki #roomB ）
ぷわん
TAMくん
Slide 41
Slide 41 text
ありがとうございました！！！
Twitter
@chocodogmagic
お気軽にフォローどうぞ！
毎月、第３水曜の
PWA Nightも
よろしくね！
「実践PWA」BOOTHで検索