#手っ取り早く試す
フリーツールで拡張ツールの力を借りつつ
基本何も書かずに、とりあえずPWA作ってみた。
##使用したツール
VisualStudioCode(v1.28.2)
vscode-pwa(https://github.com/johnpapa/vscode-pwa)
##試す
拡張ツールの「Try it Out」通りにやればうまく行くかと思ったら
うまくいかんやん！と思い色々試行錯誤。
躓かなければサクサク出来るのでやったーできたーをすぐ体感できる。
##Try it Out捕捉
npm i @angular/cli lite-server -g
npmの入れ方は省略。
(npm windowsで検索すると山ほど出てくるので、それの最近書かれた記事を参照)
lite-serverが入ってない時は、これやってください。
1終わった後に、pwa-sampleのフォルダ右クリックでopen with vscode
3(捕捉):manifest.jsonで「pwa-manifest」を入力
4(捕捉):pwa-manifest-linkをheadの間に入力。
6(捕捉):プロジェクト直下に作成
8:const BUILD_DIR = 'dist/pwa-sample';に変更
9:.angular-cli.json これがないけど、angular.jsonがそれにあたる
そのファイルでassetsって検索するとjsonarrayあるので、そこに
"src/manifest.json"を追加
10(捕捉):
run pwa-register at the bottom→main.tsにpwa-registerを入力
11(捕捉):
platformBrowserDynamic().bootstrapModule(AppModule)の後ろに
.then(() => registerServiceWorker())を入力
12:コマンド入力する前に
dist直下にbs-config.jsonを作成し
{
"server": {"baseDir": "./pwa-sample"}
}
まずは１個ずつコマンド入力
そうすると、localhost表示されるんで
LANでも引っこ抜いて、オフラインにしてから
更新押してもそのページが表示されたらPWA完成！
#最後に
よくよく見るとこの拡張ツール去年で開発止まっているので
Try it Out通りにやってもうまくいかなくて当然でした。
(最初ずっと？でした)
せっかくなので、今度はこれをHerokuに上げます。