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
Search
Takeshi Nick Osanai
March 12, 2019
Technology
0
1.8k
ウェブ開発者の視点からおさらいするPWA
2019年3月12日 MT東京のイベントの登壇内容です。
Takeshi Nick Osanai
March 12, 2019
Tweet
Share
More Decks by Takeshi Nick Osanai
See All by Takeshi Nick Osanai
How DevRel should proceed with the breaking change project?
tosanai
0
160
AWS を利用した ウェブサイトホスティングと PowerCMS X
tosanai
1
950
プラットフォーム事業を推進するための開発者マーケティング
tosanai
0
57
MTクラウドハンズオン資料
tosanai
1
97
Movable Type クラウド版 ハンズオンセミナー
tosanai
0
280
20190508_DevRel_Meetup_Public.pdf
tosanai
0
760
Movable Type クラウド版 ハンズオン資料
tosanai
0
99
20190320_MTCloud_handson.pdf
tosanai
0
92
IndexedDBのラッパー「localoForage」を試してみた
tosanai
0
2.7k
Other Decks in Technology
See All in Technology
20250328_OpenAI製DeepResearchは既に一種のAGIだと思う話
doradora09
PRO
0
150
KCD Brazil '25: Enabling Developers with Dapr & Backstage
salaboy
1
120
RAGの基礎から実践運用まで:AWS BedrockとLangfuseで実現する構築・監視・評価
sonoda_mj
0
430
Go製のマイグレーションツールの git-schemalex の紹介と運用方法
shinnosuke_kishida
1
400
Javaの新しめの機能を知ったかぶれるようになる話 #kanjava
irof
3
4.9k
DevinはクラウドエンジニアAIになれるのか!? 実践的なガードレール設計/devin-can-become-a-cloud-engineer-ai-practical-guardrail-design
tomoki10
3
1.3k
ISUCONにPHPで挑み続けてできるようになっ(てき)たこと / phperkaigi2025
blue_goheimochi
0
140
SpannerとAurora DSQLの同時実行制御の違いに想いを馳せる
masakikato5
0
570
スケールアップ企業のQA組織のバリューを最大限に引き出すための取り組み
tarappo
4
930
Tirez profit de Messenger pour améliorer votre architecture
tucksaun
1
130
ペアプログラミングにQAが加わった!職能を超えたモブプログラミングの事例と学び
tonionagauzzi
1
140
AWS のポリシー言語 Cedar を活用した高速かつスケーラブルな認可技術の探求 #phperkaigi / PHPerKaigi 2025
ytaka23
7
1.5k
Featured
See All Featured
Scaling GitHub
holman
459
140k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.4k
It's Worth the Effort
3n
184
28k
Rails Girls Zürich Keynote
gr2m
94
13k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Adopting Sorbet at Scale
ufuk
75
9.3k
Done Done
chrislema
183
16k
Building Applications with DynamoDB
mza
94
6.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
Transcript
ウェブ開発者の視点から おさらいする PWA 2019年3月12日 シックス・アパート株式会社 ⾧内毅志
自己紹介 • ⾧内毅志 • ディベロッパーリレーションマネージャー、エバンジェリスト • AWS認定ソリューションアーキテクト • 趣味 ジョギング、野球観戦
英語の勉強 (TOEIC 875, 英検準1級) 家族と過ごすこと @Nick_smallworld
本スライドの対象 • PWAに興味を持っているWeb開発者 • すでにPWAを開発している方には物足りないかもしれません • 個人的に調べ直したことをまとめました
アジェンダ • PWA (Progressive Web Apps)とは • PWAを構成する技術 • Service
Worker と プッシュ通知 • ウェブ開発者の視点から考えるPWAのメリット
PWAとは • Google が提唱・推進しているアプリ • Progressive Web Apps の略称 •
ウェブアプリ、スマホアプリともに含まれる
PWAの事例
PWAの事例
個人的に作ったPWA • 英単語レッスンアプリ • ランダムに10問の英単語クイズを出題 • JavaScript(Vue.js)でフルスクラッチ開 発 • デモ用に公開したものなので、2019/3月末に一度削除します
個人的に作ったPWA • 君の名は。聖地ナビ • 映画「君の名は。」の名所案内 • 2017年にローンチ • MT+AWSで構築 •
Service Worker でオフライン利用可に
技術面からみたPWAの特徴 • Web技術 (html、css、JavaScript、各種 Web API) を利用 • ウェブサイトで公開可能、Appストアを経由せずに配布 •
スマートフォンにインストール可能 • Service Worker を利用し、ネット未接続でも動作 • プッシュ通知を使うことで、利用ユーザーに対する通知が可能
APP SHELL とは • PWAのコア概念 • 特別な技術ではなく、 「アプリ用テンプレート」の概念 を言語化したもの https://developers.google.com/web/fundamentals/architecture/app-shell?hl=ja
SERVICE WORKERについて • ブラウザのバックグラウンドで動 作するJavaScript • プッシュ通知やバックグラウンド 同期などを行う https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/?hl=ja
SERVICE WORKER の登録(例)
PUSH通知について • Web技術の通知用APIは大きく分けて2つある • Notifications API • Push API •
PWAでは「Push API」を利用した通知を指すことが多い
プッシュ通知の流れ • ユーザーから通知許可をもらう • Push Subscriptionをサーバー側に 保存 • プッシュ通知を受信するためのスクリプ トをService
Worker に設定 • サーバーからプッシュ通知を送る • 通知登録したユーザーへ届く • Service Worker が通知を処理 https://developers.google.com/web/fundamentals/push-notifications/how-push-works
PWAを開発するためには • Web技術を利用したアプリ作成 • manifest.jsonでアプリの定義 • Service Worker を登録し、ブラウザにデータキャッシュ、バックグ ラウンドで動作
• プッシュ通知でユーザーへ通知
必須知識 • HTML5、JavaScript • Promise オブジェクトを多用するためおさらいを • プッシュ通知を使う場合、サーバーサイドの知識 • 通知登録者の管理はDBが必要となる
GOOGLEが推奨するオフラインキャッシュの方法 • App Shell + データフェッチ • App Shell はURLで指定できるファイルをコンパクトに設計、
Cache APIでキャッシュ • フェッチした データは IndexedDB を利用して保存・管理
PWA開発でハマりそうなところ • Service Worker によるキャッシュのライフサイクルに注意 • キャッシュコントロールを間違えずに • 設定をミスすると古いバージョンが残り続ける •
プッシュ通知の実装はそれなりに工数かかる • VAPID Key の発行 • サブスクリプション用DBの準備が必要 • mBaaSを使うのが手っ取り早い(Firebase、Nifty Cloudなど)
宣伝 • MovableType.net はどちらも設定が楽 • PWA用のmBaaSとして一考の価値あり • とくにプッシュ通知の管理はかなり楽
ウェブ開発者の視点から見たPWAのメリット • 既存のスキルでアプリ開発・配布ができる • ネイティブアプリ用言語の習得が必要ない • ハイブリッドアプリのようにパッケージ化の必要がない • ビジネスサービスの幅を広げるチャンス •
これまでアプリ開発をしたことがない方はチャレンジの価値あり
エンド・制作会社からみたメリット • ウェブサイトとウェブアプリ・スマホアプリの開発を並行して進め ることができる • スマホアプリ投入のトライアルとして利用 • ネイティブアプリは開発・メンテナンスコストが高い • さきにPWAを投入、メリットが検証できたらネイティブ開発
今日の内容 • Qiitaというサービスに、もう少し詳しく書いています • 「Progressive Web Apps (PWA) 学習者のメモ 」
• Qiita で「PWA」で検索ください。
ありがとうございました。