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_Toolkitについて.pdf
Search
scrpgil
April 17, 2019
0
1.7k
PWA_Toolkitについて.pdf
scrpgil
April 17, 2019
Tweet
Share
More Decks by scrpgil
See All by scrpgil
Firebase Realtime DB から ActionCable 移行のマネジメントの話
scrpgil
0
79
フレーム問題で考えてみるやる夫スレViewer
scrpgil
0
14
ChatGPTとLangChain さわってみた
scrpgil
0
83
久しぶりに ionic startしてみた
scrpgil
0
230
Ionic 6でWeb3やってみた
scrpgil
0
200
Ionic×Angularで作る ストーリーズ風UI
scrpgil
0
410
Angularで作るモバイルアプリ開発〜スタートアップの開発事情〜
scrpgil
0
610
夢のクロスプラットフォーム開発
scrpgil
0
370
Stencil JSについて
scrpgil
0
420
Featured
See All Featured
Navigating Team Friction
lara
183
15k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Building Applications with DynamoDB
mza
93
6.2k
A Philosophy of Restraint
colly
203
16k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Transcript
IonicとPWA Toolkitについて @scrpgiil
自己紹介 ・榊原宏祐 @scrpgil ・株式会社キネカ ・マッチングアプリの開発&運営 ・技術分野:Ionic、Go、Rails ・得意分野:アスキーアート
技術書典6で本出しました
アジェンダ ・Ionicについて ・PWA Toolkitについて ・IonicからみたPWAの使用事例
Ionicの歴史(ざっくり) ・Ionic1(2013〜) angularJS/Cordovaで作られたモバイルフレームワーク ・Ionic2/3(2016〜) Angular/Cordovaで作られたモバイルフレームワーク PWA対応が追加(ServiceWorker、manifest.json) ・Ionic4(現行Ver) WebComponentsで作られたUIフレームワーク アプリ化はCordovaからCapacitorへ移行 デフォルトでPWA対応(ServiceWorker、manifest.json)
Ionic 4について ・WebComponentsベースで表示が爆速 ・React、Vueでも使えるようになった ・PWAファースト(所管)
PWA Toolkit https://ionicframework.com/pwa/toolkit
PWA Toolkitの特徴 ・デフォルトでWorkbox(ServceWorker)が設定済み ・デフォルトで全てのアセットをキャッシュしている ・デフォルトでmanifest.jsonが入ってる ・Ionicが入ってるのでモバイルUIやルーティングが対応済み これからPWA始めるなら圧倒的敷居の低さ
PWA Toolkitの始め方 npx create-stencil ionic-pwa 必要なのはこのコマンドだけ
こんな感じのスタータープロジェクトが立ち上がる iOS Android
IonicのPWA使用事例
PokemonGoのサポートアプリ ・Pokemon Goのサポートアプリの開発 ・アプリが4万ダウンロード ・RedditでポケモンGoユーザーに宣伝 ・ユーザーを十分に獲得してからアプリリリース https://blog.ionicframework.com/how-i-built-launched-an-app-in-2-weeks-to-40000- users-with-ionic/
そのほかの資料 ・無料のPWAガイドがでています。 ・PWAの機能や仕組み、どう活用するかが書いてあ る ・IonicブログでPWAの記事が上がる ・文章がエモくて面白い ・https://blog.ionicframework.com/
おわり
None