HOME
blog
tokuyasu
viteプロジェクトをPWA化する

ブログblog

viteプロジェクトをPWA化する

Writer： tokuyasu　更新日：2023/09/27

こんにちは、デジナーレ福岡オフィスの徳安です。

この記事では、viteプロジェクトをPWA化する方法について説明します。

PWAとは
viteプロジェクトを作成
PWA化の手順

PWAとは

PWAとは、「Progressive Web Apps」の略称で、

webサイトをネイティブアプリのように扱える技術。

アプリストアを経由せずに作成できる。

そして、ダウンロードの必要性がなくオフラインでも使用できる。

ネイティブアプリとは違い、OSによる制限を受けないことも利点。

ネイティブアプリ同様、
アイコンをホーム画面に追加することや、
ユーザーにプッシュ通知を送ることも可能な技術。

viteプロジェクトを作成

アプリを作成する。

//npmの場合

$ npm create vite@latest

//yarnの場合

$ yarn create  vite

//npmの場合

$ npm create vite@latest

//yarnの場合

$ yarn create vite

その後、project name:「作成するアプリの名前」

select a framework : 「Reactを選択」

Select a variant: 「JavaScript」で作成した。

作成後に、下記コマンド実行。

cd my-app

//npmの場合　yarnの場合
npm install　　yarn install

//npmの場合   yarnの場合
npm run dev　　yarn dev

cd my-app

//npmの場合　yarnの場合

npm install　　yarn install

//npmの場合 yarnの場合

npm run dev　　yarn dev

PWA化の手順

１．プラグインをインストール

//npmの場合 
npm install -D vite-plugin-pwa

//yarnの場合
yarn add -D vite-plugin-pwa

//npmの場合

npm install -D vite-plugin-pwa

//yarnの場合

yarn add -D vite-plugin-pwa

２．vita.config.js

下記記述はPWA化する際に最低限必要なものなので記述。

マニュフェスト部分の内容についての詳細は下記に記述。

import { defineConfig } from 'vite'
import { VitePWA } from 'vite-plugin-pwa'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(),
    VitePWA({
      registerType: 'autoUpdate',
      devOptions: {
        enabled: true
      }
      manifest: {
        name: "My App",
        short_name: "My App",
        description: "My App",

        icons: [
          {
            src: "app_icon/icon-192.png",
            type: "image/png",
            sizes: "192x192"
          },
          {
            src: "app_icon/icon-512.png",
            sizes: "512x512",
            type: "image/png"
          },
          {
            src: "app_icon/icon-512.png",
            sizes: "512x512",
            type: "image/png",
            purpose: "any maskable"
          }
        ],
        start_url: "index.html",
        display: "standalone",
        background_color: "#ffffff",
        theme_color: "#000000",
        lang: "ja"
      }
    })
  ],
})

import { defineConfig } from 'vite'

import { VitePWA } from 'vite-plugin-pwa'

import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/

export default defineConfig({

plugins: [react(),

VitePWA({

registerType: 'autoUpdate',

devOptions: {

enabled: true

}

manifest: {

name: "My App",

short_name: "My App",

description: "My App",

icons: [

{

src: "app_icon/icon-192.png",

type: "image/png",

sizes: "192x192"

{

src: "app_icon/icon-512.png",

sizes: "512x512",

type: "image/png"

{

src: "app_icon/icon-512.png",

sizes: "512x512",

type: "image/png",

purpose: "any maskable"

}

start_url: "index.html",

display: "standalone",

background_color: "#ffffff",

theme_color: "#000000",

lang: "ja"

}

})

-- devOptions --

devOptions の enabled を true にすると、

開発環境で Service Worker の動きを確認できるようになる。

アイコンを正しく設定して一度ビルドしてから

preview コマンドを実行 (yarn preview など) すると、

開発サーバが起動してブラウザが PWA と認識する。

-- manifest --

＊short_name / name

アプリケーションの名前を設定する。

short_nameはホーム画面、ランチャー等

アプリ名が表示されるスペースが狭い場合に

表示される。

ランチャーとは、インストールされている

アプリケーションの一覧を表示している部分にあたる。

＊shart_url

ホーム画面に追加したアイコンを、

タップしてアプリケーションを起動した際に、

最初に表示する画面を指定。

何も設定していない場合には、

ユーザーが「ホーム画面に追加」した際に

表示していた画面が表示される。

＊background_color

スプラッシュ画面の背景色を指定

ソフトウェアを起動した際に表示されること

のある画面（画像）のこと。

＊スプラッシュ画面とは？

プログラムの立ち上げが実行中である

（完了していない）段階で表示されるもの。

基本的には立ち上げが完了した時点で

メイン画面に切り替わる。

＊theme_color

ツールバーとタスクスイッチャーの色を設定。

＊display

ホーム画面から起動した際のUIを指定。
fullscreen, standalone, minimal-ui, browserの

いずれかを設定する。

・fullscreen : 利用可能な画面の領域をすべて使用。

クロームは表示されなくなる。

※クローム (chrome) はブラウザーの中で、

ウェブページ自体を除いた見える部分すべて

(ツールバー、メニューバー、タブなど)

・minimal-ui : アプリケーションの外見は、

単独のアプリケーションのようになるが、

ナビゲーションを制御するため最小限の UI 要素が表示される。

要素はブラウザーによって異なる。

・standalone：ネイティブアプリケーションのような表示

・browser：ブラウザで表示した際と同じUI

＊orientation

表示する画面を指定し、固定することができる。

landscape（横向き）かportrait（縦向き）を指定。

＊icons

アイコンを設定する。

src type sizesを設定する必要がある。

アイコンはホーム画面、アプリランチャー、

タスクスイッチャー、スプラッシュ画面などで使用される。

マスカブルアイコン : 詳細な制御を可能にし、

アイコンが図形全体を埋めて、すべてのデバイスで見栄えが良くなる。

これがきちんと設定されていないと、

「マスク可能なアイコン」でないことの警告がでる。

※マスク可能なアイコン：PWAアイコンがすべての端末で

見栄えがすることを保証するもの

（このため、デバイスによってはPWAアイコンの背景が白くなってしまう）

３．robots.txt

robots.txtの作成も必須なので、

public配下に設置する。

User-agent: *
Allow: /

1 2	User-agent: * Allow: /

４．index.html

ファビコン、アイコン画像、ディスクリプション、アプリ名など記述する。

マスクブルアイコン用の画像も記述する。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>


  <!-- 下記追加部分 -->
      <title>Test App</title>
      <meta name="description" content="JSONを読むためのビュアーです" />
      <link rel="icon" href="public/app_icon/favicon.ico" />
      <link
        rel="apple-touch-icon"
        href="public/app_icon/apple-touch-icon.png"
        sizes="180x180"
      />
      <link
        rel="mask-icon"
        href="public/app_icon/mask-icon.svg"
        color="#FFFFFF"
      />
      <meta name="theme-color" content="#916028" />

  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

<!doctype html>

<head>

<title>Vite + React</title>

<link

rel="apple-touch-icon"

href="public/app_icon/apple-touch-icon.png"

sizes="180x180"

<link

rel="mask-icon"

href="public/app_icon/mask-icon.svg"

color="#FFFFFF"

</head>

<body>

</body>

</html>

作成が終わったら、

一度ビルドして、previewコマンドを実行する。

npm run build

npm  preview

npm run build

npm preview

開発環境では、インストール可能で

previewコマンドでのインストールができない場合があるが、

その場合、コンソールを開くとエラーが発生している。

マニュフェスト部分がきちんと記述できていないと、

インストールができないようなので、

previewコマンドでインストールできない際は、

マニュフェスト部分の修正を試みる。

インストールすることで、使用可能となる。

ここまで読み進めていただきありがとうございます。

tokuyasuの
他の記事を読む

UI Stackとは？？

2024/04/26
「Zod」とは

2024/04/19

tokuyasuの記事一覧

スタッフブログ一覧