プロジェクトセットアップ

1. リポジトリをクローン

$ git clone https://github.com/kitamuraDev/sample-todo-pwa-app.git

2. リポジトリに移動

$ cd sample-todo-pwa-app

3. 依存パッケージをインストール

$ yarn

or

$ yarn install

4. アプリケーションを起動

$ yarn dev

5. アプリケーションをビルド

$ yarn build

6. ビルド結果をプレビュー

$ yarn preview

自動ビルドの設定

1. ディレクトリとファイルを作成

$ mkdir -p .github/workflows/ && touch .github/workflows/deploy.yml

2. 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

使用技術

言語

パッケージマネージャー

ライブラリ

ビルドツール

PWA

リンター・フォーマッター

CI

ホスティング

アプリケーション仕様

• Todo CRUD
  • 作成
  • 閲覧
  • 更新
  • 削除
• フィルター
  • すべてのタスク
  • 現在のタスク
  • 完了したタスク
  • ゴミ箱
• ゴミ箱（アーカイブ）内のタスクをまとめて削除
  • まとめて削除を行う前に確認アラートを出す
• QR コード共有
  • アプリの URL を QR コード化して共有
• データ保存
  • ブラウザのデータ保存領域（indexedDB）にデータを保存し、リロードを行ってもデータ保持が行える
  • 同じブラウザでのみ（ブラウザ間ではデータの共有は行われない）
  • あくまでも、"そのデバイスのブラウザ"のデータ領域に保存しているため
• PWA（progressive web app）
  • 端末（デバイス）に WEB アプリをダウンロードできる
  • モバイルアプリのようにサクサク動作する