vaguely

和歌山に戻りました。ふらふらと色々なものに手を出す毎日。

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 などではどこからたどれば良いのかわからなかったのですが、 AndroidChrome からは Home に追加することも確認できました。

PWA 完全に理解した。