-
Notifications
You must be signed in to change notification settings - Fork 4
/
vite.config.js
157 lines (139 loc) · 6.44 KB
/
vite.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
import laravel from 'laravel-vite-plugin'
import { defineConfig } from 'vite'
import { VitePWA } from 'vite-plugin-pwa'
import vue from '@vitejs/plugin-vue'
export default () => {
// Define the icons in the Laravel public folder that:
// 1. we want to include in the webmanifest, AND
// 2. we want the service worker to pre-cache for offline use.
// The src is a web URL relative to the public dir.
// This is the data structure returned by @vite-pwa/assets-generator
const manifestIcons = [
{
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',
purpose: 'any'
},
{
src: '/maskable-icon-512x512.png',
sizes: '512x512',
type: 'image/png',
purpose: 'maskable'
}
]
// Define the icons in the Laravel public folder that:
// 1. we don't need in the webmanifest, BUT
// 2. we still want the service worker to pre-cache for offline use
// The src is a web URL relative the public dir.
const publicIcons = [
{ src: '/favicon.ico' },
{ src: '/favicon.svg' },
{ src: '/apple-touch-icon-180x180.png' }
]
// Define any additional images in the Laravel public folder that are not
// packaged via Vite and that we want to be available offline. (For example,
// an image used in a meta og:image tag). The src is a web URL relative to
// the public root.
// Use the format { src: '' } for entries
const additionalImages = []
return defineConfig({
plugins: [
vue(),
laravel({
input: ['resources/css/app.css', 'resources/js/app.ts'],
refresh: true
}),
VitePWA({
// Make the PWA plugin build to the same place as laravel/vite-plugin
buildBase: '/build/',
// Define the scope and the base so that the PWA can run from the
// root of the domain, even though the files live in /build.
// This requires the service worker to be served with
// a header `Service-Worker-Allowed: /` to authorise it.
// @see server.php
scope: '/',
base: '/',
// Use 'prompt' for new versions of the PWA. 'autoUpdate' is
// simpler but may as well dmeo how this works.
registerType: 'prompt',
// Do not use the PWA with dev builds.
devOptions: {
enabled: false
},
// The Vite PWA docs suggest you should use includeAssets for
// icons that are not in the manifest. But laravel/vite-plugin
// does not use a public dir in the build - it relies on
// Laravel's. If we add this as a publicDir to vite's config
// then vite-plugin-pwa finds everything in public (eg if you are
// using telescope then all its assets get cached). It then adds
// these assets to the service worker with the `/build` prefix,
// which doesn't work. I found it easiest to leave this empty
// and use `additionalManifestEntries` below.
includeAssets: [],
workbox: {
// Add all the assets built by Vite into the public/build/assets
// folder to the SW cache.
globPatterns: ['**/*.{js,css,html,ico,jpg,png,svg,woff,woff2,ttf,eot}'],
// Define the root URL as the entrypoint for the offline app.
// vue-router can then takes over and shows the correct page
// if you are using it.
navigateFallback: '/',
// Stops various paths being intercepted by the service worker
// if they're not available offline. Telescope is a good
// example, if you are using that.
navigateFallbackDenylist: [/^\/telescope/],
// Add some explicit URLs to the SW precache. This helps us
// work with the laravel/vite-plugin setup.
additionalManifestEntries: [
// Cache the root URL to get hold of the PWA HTML entrypoint
// defined in welcome.blade.php. Ref:
// https://github.com/vite-pwa/vite-plugin-pwa/issues/431#issuecomment-1703151065
{ url: '/', revision: `${Date.now()}` },
// Cache the icons defined above for the manifest
...manifestIcons.map((i) => {
return { url: i.src, revision: `${Date.now()}` }
}),
// Cache the other offline icons defined above
...publicIcons.map((i) => {
return { url: i.src, revision: `${Date.now()}` }
}),
// Cache any additional images defined above
...additionalImages.map((i) => {
return { url: i.src, revision: `${Date.now()}` }
})
],
// Ensure the JS build does not get dropped from the cache.
// This allows it to be as big as 3MB
maximumFileSizeToCacheInBytes: 3000000
},
// Manifest settings - these will appear in the generated manifest.webmanifest
manifest: {
// Metadata
name: 'Laravel Vite PWA',
short_name: 'laravel-vite-pwa',
description: 'A demo of Laravel with vite-plugin-pwa',
theme_color: '#DE9918',
background_color: '#DE9918',
orientation: 'portrait',
display: 'standalone',
scope: '/',
start_url: '/',
id: '/',
// These icons are used when installing the PWA onto a home screen
icons: [...manifestIcons]
}
})
]
})
}