add pwa
@@ -1,17 +1,21 @@
|
|||||||
{
|
{
|
||||||
|
"name": "bermite",
|
||||||
|
"homepage": "https://bermite.rodev.fr/",
|
||||||
"private": true,
|
"private": true,
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
"lint": "./node_modules/.bin/eslint resources/js/ --ext .ts,.tsx",
|
"lint": "./node_modules/.bin/eslint resources/js/ --ext .ts,.tsx",
|
||||||
"lint-fix": "eslint ./ --fix"
|
"lint-fix": "eslint ./ --fix",
|
||||||
|
"generate-pwa-assets": "pwa-assets-generator"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@tailwindcss/forms": "^0.5.6",
|
"@tailwindcss/forms": "^0.5.6",
|
||||||
"@types/d3": "^7.4.1",
|
"@types/d3": "^7.4.1",
|
||||||
"@types/react": "^18.2.22",
|
"@types/react": "^18.2.22",
|
||||||
"@types/react-dom": "^18.2.7",
|
"@types/react-dom": "^18.2.7",
|
||||||
|
"@vite-pwa/assets-generator": "^0.0.11",
|
||||||
"@vitejs/plugin-react": "^4.0.4",
|
"@vitejs/plugin-react": "^4.0.4",
|
||||||
"autoprefixer": "^10.4.16",
|
"autoprefixer": "^10.4.16",
|
||||||
"axios": "^1.5.0",
|
"axios": "^1.5.0",
|
||||||
@@ -30,6 +34,7 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"d3": "^7.8.5",
|
"d3": "^7.8.5",
|
||||||
"react-router-dom": "^6.16.0"
|
"react-router-dom": "^6.16.0",
|
||||||
|
"vite-plugin-pwa": "^0.17.4"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
2295
pnpm-lock.yaml
generated
BIN
public/apple-touch-icon-180x180.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 946 B |
@@ -1,14 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Bermite",
|
|
||||||
"short_name": "Bermite",
|
|
||||||
"lang": "fr",
|
|
||||||
"description": "Une application de suivi météo",
|
|
||||||
"icons": [
|
|
||||||
{"src":"images/weather.png", "sizes":"521x512", "type":"image/png"},
|
|
||||||
{"src": "images/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png"},
|
|
||||||
{"src": "images/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png"}
|
|
||||||
],
|
|
||||||
"theme_color": "#ffffff",
|
|
||||||
"background_color": "#ffffff",
|
|
||||||
"display": "standalone"
|
|
||||||
}
|
|
||||||
BIN
public/maskable-icon-512x512.png
Normal file
|
After Width: | Height: | Size: 2.8 KiB |
BIN
public/pwa-192x192.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
BIN
public/pwa-512x512.png
Normal file
|
After Width: | Height: | Size: 3.1 KiB |
BIN
public/pwa-64x64.png
Normal file
|
After Width: | Height: | Size: 620 B |
8
pwa-assets.config.ts
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
import { defineConfig, minimalPreset as preset } from '@vite-pwa/assets-generator/config'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
preset,
|
||||||
|
images: [
|
||||||
|
'public/favicon.svg'
|
||||||
|
]
|
||||||
|
})
|
||||||
@@ -50,7 +50,7 @@ const Rainfall = () => {
|
|||||||
value={graphDetails.end_date}
|
value={graphDetails.end_date}
|
||||||
onChange={e => setGraphDetails({...graphDetails, end_date: (new Date(e.target.value)).toSQLDate()})} />
|
onChange={e => setGraphDetails({...graphDetails, end_date: (new Date(e.target.value)).toSQLDate()})} />
|
||||||
</form>
|
</form>
|
||||||
<div ref={targetRef}>
|
<div ref={targetRef} className="mb-20">
|
||||||
<RainfallGraph width={dimensions.width}
|
<RainfallGraph width={dimensions.width}
|
||||||
height={500}
|
height={500}
|
||||||
data={graphData} start_date={graphDetails.start_date}
|
data={graphData} start_date={graphDetails.start_date}
|
||||||
|
|||||||
@@ -5,18 +5,13 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||||
|
|
||||||
<link rel="icon" href="/images/favicon.svg" type="image/svg+xml">
|
<link rel="icon" href="/favicon.ico">
|
||||||
<link rel="mask-icon" href="/images/favicon.svg" color="#FFFFFF">
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
|
||||||
|
<link rel="mask-icon" href="/mask-icon.svg" color="#FFFFFF">
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
|
||||||
{{-- <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">--}}
|
|
||||||
<meta name="theme-color" content="#1a1a1a">
|
|
||||||
|
|
||||||
<link rel="manifest" href="manifest.json" />
|
|
||||||
<meta name="theme-color" content="#ffffff">
|
<meta name="theme-color" content="#ffffff">
|
||||||
|
|
||||||
|
<link rel="manifest" href="build/manifest.webmanifest" />
|
||||||
|
|
||||||
<title>{{ config('app.name', 'Laravel') }}</title>
|
<title>{{ config('app.name', 'Laravel') }}</title>
|
||||||
<meta name="description" content="Application de suivi météo">
|
<meta name="description" content="Application de suivi météo">
|
||||||
|
|
||||||
@@ -27,6 +22,8 @@
|
|||||||
<!-- Scripts -->
|
<!-- Scripts -->
|
||||||
@viteReactRefresh
|
@viteReactRefresh
|
||||||
@vite(['resources/js/app.tsx'])
|
@vite(['resources/js/app.tsx'])
|
||||||
|
<script src="/build/registerSW.js"></script>
|
||||||
|
{{-- <script src="/build/sw.js" defer />--}}
|
||||||
</head>
|
</head>
|
||||||
<body class="font-sans antialiased">
|
<body class="font-sans antialiased">
|
||||||
<div id="app" />
|
<div id="app" />
|
||||||
|
|||||||
@@ -2,6 +2,8 @@ import { defineConfig } from 'vite';
|
|||||||
import laravel from 'laravel-vite-plugin';
|
import laravel from 'laravel-vite-plugin';
|
||||||
import react from '@vitejs/plugin-react';
|
import react from '@vitejs/plugin-react';
|
||||||
import copy from "rollup-plugin-copy";
|
import copy from "rollup-plugin-copy";
|
||||||
|
import { VitePWA } from 'vite-plugin-pwa'
|
||||||
|
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [
|
plugins: [
|
||||||
@@ -15,5 +17,34 @@ export default defineConfig({
|
|||||||
{ src: 'resources/images/*', dest: 'public/images' },
|
{ src: 'resources/images/*', dest: 'public/images' },
|
||||||
]
|
]
|
||||||
}),
|
}),
|
||||||
|
VitePWA({
|
||||||
|
registerType: 'autoUpdate',
|
||||||
|
includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'mask-icon.svg'],
|
||||||
|
manifest: {
|
||||||
|
name: 'Bermite',
|
||||||
|
short_name: 'Bermite',
|
||||||
|
lang: "fr",
|
||||||
|
description: 'Application de suivi météo',
|
||||||
|
start_url: "https://bermite.rodev.fr",
|
||||||
|
theme_color: '#ffffff',
|
||||||
|
icons: [
|
||||||
|
{
|
||||||
|
src: '/pwa-64x64.png',
|
||||||
|
sizes: '64x64',
|
||||||
|
type: 'image/png'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: '/pwa-192x192.png',
|
||||||
|
sizes: '192x192',
|
||||||
|
type: 'image/png'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: '/pwa-512x512.png',
|
||||||
|
sizes: '512x512',
|
||||||
|
type: 'image/png'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
|
|||||||