手っ取り早く試す

フリーツールで拡張ツールの力を借りつつ
基本何も書かずに、とりあえずPWA作ってみた。

使用したツール

拡張ツールの「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に上げます。