Skip to content

Commit 6cba0d0

Browse files
tbrandtbrand
authored
Merge pull request #455 from aws-samples/feature/pwa
PWA対応
2 parents 1209cad + f707eef commit 6cba0d0

28 files changed

+1215
-137
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,7 @@ npm run cdk:deploy
161161
- [ローカル開発環境構築手順](/docs/DEVELOPMENT.md)
162162
- [リソースの削除方法](/docs/DESTROY.md)
163163
- [AWS 上で完結するデプロイ方法 (手元に環境を用意することが難しい場合)](/docs/DEPLOY_ON_AWS.md)
164+
- [ネイティブアプリのように利用する方法](/docs/PWA.md)
164165

165166
## 参照
166167
- [ブログ: Generative AI Use Cases JP をカスタマイズする方法](https://aws.amazon.com/jp/blogs/news/how-to-generative-ai-use-cases-jp/)

‎docs/PWA.md

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# ネイティブアプリのように利用する方法
2+
3+
このアプリケーションは、PWA（Progressive Web Application）という技術を使ってネイティブアプリのようにインストールして利用することが可能です（もちろん、インストールせずにブラウザから直接利用することも可能です）。
4+
5+
このアプリケーションはブラウザの機能を利用して動作するので、ブラウザからインストールを行います。代表的な 2 つのブラウザについて、利用方法を解説します。
6+
7+
## インストール方法
8+
9+
### Google Chrome の場合
10+
11+
まずは、デプロイした Web の URL にアクセスしてください。アクセスすると、下記の画面のようにインストールボタンが表示されるので、クリックしてインストールをしてください。
12+
![Chrome からインストール](/imgs/pwa/chrome_install.png)
13+
![インストール確認](/imgs/pwa/chrome_install_confirm.png)
14+
15+
インストールが完了すると、以下のようにブラウザから独立してアプリケーションを実行することが可能になります。
16+
![インストール完了](/imgs/pwa/chrome_installed.png)
17+
18+
19+
### Microsoft Edge の場合
20+
21+
まずは、デプロイした Web の URL にアクセスしてください。アクセスすると、下記の画面のようにインストールボタンが表示されるので、クリックしてインストールをしてください。
22+
![Edge からインストール](/imgs/pwa/edge_install.png)
23+
![インストール確認](/imgs/pwa/edge_install_confirm.png)
24+
25+
インストールが完了すると、以下のようにブラウザから独立してアプリケーションを実行することが可能になります。
26+
![インストール完了](/imgs/pwa/edge_installed.png)
27+
28+
## アンインストール方法
29+
30+
アプリケーションをアンインストールしても、通常の Web ページのようにブラウザからアクセスして引き続き利用することが可能です。
31+
32+
### Google Chrome の場合
33+
34+
まず、アプリケーションを開いてください。右上のアプリケーションメニューから「Generative AI Use Cases JP」をアンインストールをクリックして、アンインストールしてください。
35+
![Chrome からアンインストール](/imgs/pwa/chrome_uninstall.png)
36+
![アンインストール確認](/imgs/pwa/chrome_uninstall_confirm.png)
37+
38+
### Microsoft Edge の場合
39+
40+
41+
まず、アプリケーションを開いてください。右上のアプリケーションメニューから「アプリの設定」クリックして、設定画面を開いてください。設定画面内の「アンインストール」をクリックして、アンインストールをしてください。
42+
43+
![Edge からアンインストール](/imgs/pwa/edge_uninstall.png)
44+
![アンインストール確認](/imgs/pwa/edge_uninstall_confirm.png)

‎imgs/pwa/chrome_install.png

148 KB
Loading

‎imgs/pwa/chrome_install_confirm.png

19.8 KB
Loading

‎imgs/pwa/chrome_installed.png

137 KB
Loading

‎imgs/pwa/chrome_uninstall.png

139 KB
Loading

‎imgs/pwa/chrome_uninstall_confirm.png

32.1 KB
Loading

‎imgs/pwa/edge_install.png

152 KB
Loading

‎imgs/pwa/edge_install_confirm.png

35.7 KB
Loading

‎imgs/pwa/edge_installed.png

138 KB
Loading

‎imgs/pwa/edge_uninstall.png

170 KB
Loading

‎imgs/pwa/edge_uninstall_confirm.png

116 KB
Loading

‎package-lock.json

+1,009-134
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@
1818
"npm-run-all": "^4.1.5",
1919
"prettier": "^3.2.5",
2020
"prettier-plugin-tailwindcss": "^0.5.13",
21-
"tailwind-scrollbar": "^3.1.0"
21+
"tailwind-scrollbar": "^3.1.0",
22+
"vite-plugin-pwa": "^0.19.8"
2223
},
2324
"workspaces": [
2425
"packages/*"

‎packages/web/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ lerna-debug.log*
1010
node_modules
1111
dist
1212
dist-ssr
13+
dev-dist
1314
*.local
1415

1516
# Editor directories and files

‎packages/web/index.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/aws.svg" />
5+
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
6+
<link rel="icon" type="image/png" href="/favicon.png">
7+
<link rel="apple-touch-icon" href="/images/aws_icon_180_bg_white.png" sizes="180x180" />
68
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
79
<link
810
href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c"

‎packages/web/public/favicon.png

923 Bytes
Loading

‎packages/web/public/favicon.svg

+36
Loading

‎packages/web/public/aws.svg renamed to ‎packages/web/public/images/aws.svg

+1-1
Loading

‎packages/web/public/images/aws_bg_white.svg

+38
Loading

‎packages/web/public/images/aws_icon_180.png

4.04 KB
Loading

‎packages/web/public/images/aws_icon_180_bg_white.png

3.86 KB
Loading

‎packages/web/public/images/aws_icon_192.png

4.32 KB
Loading

‎packages/web/public/images/aws_icon_192_maskable.png

3.25 KB
Loading

‎packages/web/public/images/aws_icon_512.png

15.5 KB
Loading

‎packages/web/public/images/aws_icon_512_maskable.png

12.8 KB
Loading

‎packages/web/public/images/aws_maskable.svg

+38
Loading

‎packages/web/vite.config.ts

+42
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { defineConfig } from 'vite';
22
import react from '@vitejs/plugin-react';
33
import svgr from 'vite-plugin-svgr';
44
import { nodePolyfills } from 'vite-plugin-node-polyfills';
5+
import { VitePWA } from 'vite-plugin-pwa';
56

67
// https://vitejs.dev/config/
78
export default defineConfig({
@@ -15,5 +16,46 @@ export default defineConfig({
1516
process: true,
1617
},
1718
}),
19+
VitePWA({
20+
registerType: 'autoUpdate',
21+
devOptions: {
22+
enabled: true,
23+
},
24+
injectRegister: 'auto',
25+
manifest: {
26+
name: 'Generative AI Use Cases JP',
27+
short_name: 'GenAI UseCases',
28+
description:
29+
'Generative AI を活用したビジネスユースケースのデモンストレーション',
30+
start_url: '/',
31+
display: 'minimal-ui',
32+
theme_color: '#232F3E',
33+
background_color: '#FFFFFF',
34+
icons: [
35+
{
36+
src: '/images/aws_icon_192.png',
37+
sizes: '192x192',
38+
type: 'image/png',
39+
},
40+
{
41+
src: '/images/aws_icon_192_maskable.png',
42+
sizes: '192x192',
43+
type: 'image/png',
44+
purpose: 'maskable',
45+
},
46+
{
47+
src: '/images/aws_icon_512.png',
48+
sizes: '512x512',
49+
type: 'image/png',
50+
},
51+
{
52+
src: '/images/aws_icon_512_maskable.png',
53+
sizes: '512x512',
54+
type: 'image/png',
55+
purpose: 'maskable',
56+
},
57+
],
58+
},
59+
}),
1860
],
1961
});

0 commit comments

Comments
 (0)