Angular で PWA に挑戦したい話
はじめに
※2019/12/06 一旦書き終わったところだけ公開いたします。
残りは仕事が終わったあと追記予定です(..)_
この記事は PWA Advent Calendar 2019 の 6 日目の記事です。
JSConf China 2019 で聴いて以来気になってはいた PWA(Progressive Web Application)。
Advent Calender に勢いで参加してみたは良いものの、思った以上に手が回らなかったので今回はとりあえず作って動かしてみる、ということで。
せっかくなので SheetJS を使って Excel 読み込み→表示をしてデスクトップアプリ感?を楽しんでみたいと思います。
インストール
とりあえず雑にプロジェクトを作りまして。。。
ng new pwa-xlsx-sample
ng add で PWA 用のパッケージを追加してもらう、と。
ng add @angular/pwa --project pwa-xlsx-sample
更に SheetJS を追加しておきます。
npm install xlsx --save
で ng s とかすればよいのかしら?と思ったらそうではなく、ビルドしてサーバー上で動かす( ng s ではなく)必要があるようです。
npm install http-server --save ng build --prod
ようやく?準備ができたので、早速実行してみます。
npx http-server -p 8080 -c-1 dist/pwa-xlsx-sample
PC の Chrome などではどこからたどれば良いのかわからなかったのですが、 Android の Chrome からは Home に追加することも確認できました。
PWA 完全に理解した。