プロジェクトセットアップ
- リポジトリをクローン
$ git clone https://github.com/kitamuraDev/sample-todo-pwa-app.git
- リポジトリに移動
- 依存パッケージをインストール
- アプリケーションを起動
- アプリケーションをビルド
- ビルド結果をプレビュー
自動ビルドの設定
- ディレクトリとファイルを作成
$ mkdir -p .github/workflows/ && touch .github/workflows/deploy.yml
- deploy.yml に以下をコピペ
※基本コピペで動きます。node-version に関してはご自身の Node のバージョンに合わせてください
name: Build and Deploy
on:
push:
branches: [main]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [16]
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
cache: 'yarn'
- name: Build
run: |
yarn install
yarn build
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./docs
使用技術
言語
![TypeScript](https://camo.githubusercontent.com/19674cf7627e2e3694cb3f72fe47d5fdbc066827e9f8e1ee5b8c534c5345f046/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f547970655363726970742d76342e362e332d626c7565)
パッケージマネージャー
![Yarn](https://camo.githubusercontent.com/d2869037f551e929117f8d041da602c8d5fb8cdf4510bb1b3733384d72655e51/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5961726e2d76312e32322e352d626c7565)
ライブラリ
![localforage](https://camo.githubusercontent.com/3fcaae6c7cd5169ff91a6f6ed3353fc847218a254f39397ad6958d6493c998d2/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6f63616c666f726167652d76312e31302e302d626c7565)
ビルドツール
![Vite](https://camo.githubusercontent.com/3b4a22c1d598a33954b8afc00333491a540dd131025b794ff3a6b96030b9f724/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f566974652d76322e392e392d626c7565)
PWA
![vitePluginPwa](https://camo.githubusercontent.com/2abf29858e1a625387c9cf6fb8ca7f3784e37e7be3a79953445664cc9477b88b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f76697465506c7567696e5077612d76302e31322e332d626c7565)
リンター・フォーマッター
![Prettier](https://camo.githubusercontent.com/0af52e19b2ac5943c38315410694033986fa1cd911ea1c68b6b7b467e5eafe4e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f50726574746965722d76322e372e312d626c7565)
CI
![GithubActions](https://camo.githubusercontent.com/91e53d242979c04b2f4217f1e5f78b31281713757b02a1072276bf25223d418b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f476974687562416374696f6e732d537570706f727465642d626c7565)
ホスティング
![GithubPages](https://camo.githubusercontent.com/4e0d7475683df53362d2fa9e9bc5f61400cf1316d39d7aad3acfe39ce70e3085/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f47697468756250616765732d537570706f727465642d626c7565)
アプリケーション仕様
- Todo CRUD
- フィルター
- すべてのタスク
- 現在のタスク
- 完了したタスク
- ゴミ箱
- ゴミ箱(アーカイブ)内のタスクをまとめて削除
- QR コード共有
- データ保存
- ブラウザのデータ保存領域(indexedDB)にデータを保存し、リロードを行ってもデータ保持が行える
- 同じブラウザでのみ(ブラウザ間ではデータの共有は行われない)
- あくまでも、"そのデバイスのブラウザ"のデータ領域に保存しているため
- PWA(progressive web app)
- 端末(デバイス)に WEB アプリをダウンロードできる
- モバイルアプリのようにサクサク動作する