A Razzle 2.x plugin for generating configuraable progressive web applications and web application manifests.
Example options for each plugin can be found inside of testdata. Once you have your desired options, pass it to modify
which will return a Razzle plugin compliant modify function. It just works.
// razzle.config.js
const modifyBuilder = require('razzle-plugin-pwa').default
const pwaConfig = {
swDest: 'sw.js',
clientsClaim: true,
skipWaiting: true,
runtimeCaching: [{
urlPattern: new RegExp('https://www.mysite.co'),
handler: 'networkFirst'
}]
}
const manifestConfig = {
filename: 'manifest.json',
name: 'Razzle App',
short_name: 'Razzle',
description: 'Another Razzle App',
orientation: 'portrait',
display: 'fullscreen',
start_url: '.',
theme_color: '#ffffff',
background_color: '#ffffff',
related_applications: [],
icons: [
{
'src': require.resolve(path.join(__dirname, 'public', 'favicon-16x16.png')),
'sizes': '16x16',
'type': 'image/png'
},
{
'src': require.resolve(path.join(__dirname, 'public', 'favicon-32x32.png')),
'sizes': '32x32',
'type': 'image/png'
},
{
'src': require.resolve(path.join(__dirname, 'public', 'favicon-144x144.png')),
'sizes': '144x144',
'type': 'image/png'
},
{
'src': require.resolve(path.join(__dirname,'public', 'android-chrome-192x192.png')),
'sizes': '192x192',
'type': 'image/png'
},
{
'src': require.resolve(path.join(__dirname, 'public', 'android-chrome-512x512.png')),
'sizes': '512x512',
'type': 'image/png'
}
]
}
const modify = modifyBuilder({ pwaConfig, manifestConfig })
module.exports = {
plugins: [{ func: modify }]
}
All available configuration options are defined in their respective repositories: