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.9k
PWA_Toolkitについて.pdf
scrpgil
April 17, 2019
Tweet
Share
More Decks by scrpgil
See All by scrpgil
Firebase Realtime DB から ActionCable 移行のマネジメントの話
scrpgil
0
110
フレーム問題で考えてみるやる夫スレViewer
scrpgil
0
42
ChatGPTとLangChain さわってみた
scrpgil
0
110
久しぶりに ionic startしてみた
scrpgil
0
250
Ionic 6でWeb3やってみた
scrpgil
0
220
Ionic×Angularで作る ストーリーズ風UI
scrpgil
0
450
Angularで作るモバイルアプリ開発〜スタートアップの開発事情〜
scrpgil
0
650
夢のクロスプラットフォーム開発
scrpgil
0
380
Stencil JSについて
scrpgil
0
450
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Embracing the Ebb and Flow
colly
88
4.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Designing Experiences People Love
moore
142
24k
Agile that works and the tools we love
rasmusluckow
331
21k
The World Runs on Bad Software
bkeepers
PRO
71
11k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
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