Zero config PWA solution for Nuxt.js
npm i -D @plsr/pwa
yarn add -D @plsr/pwa
- Use of
pwa-asset-generator
to generate better PWA assets. - Up to date
workbox-cli
via theworkbox-lib
library.
const baseIconConfig = {
portraitOnly: true,
noSandbox: true,
scrape: false,
quality: 90,
log: false,
}
export default {
pwa: {
manifest: {
lang: 'en',
name: 'Peach',
short_name: 'Peach',
display: 'standalone',
theme_color: '#0d0d0d',
background_color: '#0d0d0d',
description: 'desc',
categories: ['entertainment', 'social', 'personalization'],
screenshots: [
{
src: '/_pwa/screenshots/rev1/screenshot-0.jpg',
sizes: '540x1061',
type: 'image/jpg',
},
{
src: '/_pwa/screenshots/rev1/screenshot-1.jpg',
sizes: '540x1061',
type: 'image/jpg',
},
{
src: '/_pwa/screenshots/rev1/screenshot-2.jpg',
sizes: '540x1061',
type: 'image/jpg',
},
{
src: '/_pwa/screenshots/rev1/screenshot-3.jpg',
sizes: '540x1061',
type: 'image/jpg',
},
{
src: '/_pwa/screenshots/rev1/screenshot-4.jpg',
sizes: '540x1061',
type: 'image/jpg',
},
],
shortcuts: [
{
name: 'Discover',
url: '/discover?utm_source=jumplist&utm_medium=shortcut',
icons: [
{
src: '/_pwa/shortcuts/rev1/discover.png',
sizes: '192x192',
type: 'image/png',
},
],
description: 'Discover new videos',
},
{
name: 'My Subs',
url: '/my-subs?utm_source=jumplist&utm_medium=shortcut',
icons: [
{
src: '/_pwa/shortcuts/rev1/my-subs.png',
sizes: '192x192',
type: 'image/png',
},
],
description: "Your subscriptions' latest videos",
},
{
name: 'Trendings',
url: '/trendings?utm_source=jumplist&utm_medium=shortcut',
icons: [
{
src: '/_pwa/shortcuts/rev1/trendings.png',
sizes: '192x192',
type: 'image/png',
},
],
description: 'Daily trendings',
},
{
name: 'Saved Videos',
url: '/saved-videos?utm_source=jumplist&utm_medium=shortcut',
icons: [
{
src: '/_pwa/shortcuts/rev1/saved-videos.png',
sizes: '192x192',
type: 'image/png',
},
],
description: 'Your saved videos',
},
],
},
meta: {
lang: 'en',
name: 'Peach',
favicon: false,
mobileAppIOS: true,
theme_color: '#0d0d0d',
},
icon: {
plugin: false,
cacheDir: '.local-cache/icons',
assetsGenerator: [
// Spash iOS
{
...baseIconConfig,
scrape: true,
splashOnly: true,
padding: 'calc(50vh - 15vw) calc(50vw - 15vw)',
background: '#0d0d0d',
type: 'png',
},
// Non-maskables Icons
{
...baseIconConfig,
opaque: false,
iconOnly: true,
padding: '0px',
background: 'transparent',
maskable: false,
},
// Maskables Icons
{
...baseIconConfig,
opaque: true,
iconOnly: true,
padding: '10%',
background: 'white',
maskable: true,
},
],
},
},
}
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
npm run dev
Copyright (c) - Nuxt Community