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
360
Stencil JSについて
scrpgil
0
420
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
335
57k
Facilitating Awesome Meetings
lara
51
6.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Docker and Python
trallard
44
3.3k
Agile that works and the tools we love
rasmusluckow
328
21k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
RailsConf 2023
tenderlove
29
1k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Site-Speed That Sticks
csswizardry
3
370
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
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