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
69
フレーム問題で考えてみるやる夫スレViewer
scrpgil
0
7
ChatGPTとLangChain さわってみた
scrpgil
0
75
久しぶりに ionic startしてみた
scrpgil
0
230
Ionic 6でWeb3やってみた
scrpgil
0
190
Ionic×Angularで作る ストーリーズ風UI
scrpgil
0
400
Angularで作るモバイルアプリ開発〜スタートアップの開発事情〜
scrpgil
0
590
夢のクロスプラットフォーム開発
scrpgil
0
360
Stencil JSについて
scrpgil
0
410
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
73
9.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Designing Experiences People Love
moore
138
23k
Thoughts on Productivity
jonyablonski
68
4.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
The Pragmatic Product Professional
lauravandoore
32
6.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.2k
Faster Mobile Websites
deanohume
305
30k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
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