https://github.com/rishabh3112/gridsome-plugin-pwa

PWA plugin for gridsome
https://github.com/rishabh3112/gridsome-plugin-pwa

gridsome hacktoberfest javascript nodejs pwa-plugin vue

Last synced: 10 days ago
JSON representation

PWA plugin for gridsome

• Host: GitHub
• URL: https://github.com/rishabh3112/gridsome-plugin-pwa
• Owner: rishabh3112
• License: mit
• Created: 2019-07-17T11:07:28.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T17:26:52.000Z (over 1 year ago)
• Last Synced: 2024-11-01T00:31:38.407Z (17 days ago)
• Topics: gridsome, hacktoberfest, javascript, nodejs, pwa-plugin, vue
• Language: JavaScript
• Homepage:
• Size: 2.09 MB
• Stars: 30
• Watchers: 2
• Forks: 18
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        


    

      

    

    
gridsome-plugin-pwa

    
 A PWA plugin for gridsome 

    
  


## Installation

```

# For npm

$ npm install gridsome-plugin-pwa

# For yarn

$ yarn add gridsome-plugin-pwa

```

## Usage

Add `gridsome-plugin-pwa` to plugin array with following configurable options to `gridsome.config.js`

> Defaults for required fields and example for optional fields values are mentioned below along side properties

```js

...

plugins:[

    {

        use: 'gridsome-plugin-pwa',

        options: {

            // Service Worker Options

            disableServiceWorker: false,

            serviceWorkerPath: 'service-worker.js',

            cachedFileTypes: 'js,json,css,html,png,jpg,jpeg,svg,gif',

            disableTemplatedUrls: false,       // Optional

            // Manifest Options (https://developer.mozilla.org/en-US/docs/Web/Manifest)

            manifestPath: 'manifest.json',

            id: "Gridsome",

            title: 'Gridsome',

            startUrl: '/',

            display: 'standalone',

            statusBarStyle: 'default',

            themeColor: '#666600',

            backgroundColor: '#ffffff',

            // icon should be a path to the static folder i.e. 'static/icon.png'

            icon: '',

            // set {maskableIcon: true} to use the same icon (this will set

            // {purpose:  'maskable any'}), or specify a different icon path

            maskableIcon: true,                 // Optional

            shortName: 'Gridsome',              // Optional

            description: 'Gridsome is awesome!',// Optional

            categories: ['education'],          // Optional

            lang: 'en-GB',                      // Optional

            dir: 'auto',                        // Optional

            screenshots: [                      // Optional

                {

                    src: 'src/screenshot1.png',

                    sizes: '1280x720',

                    type: 'image/png',

                },

            ],

            shortcuts: [                        // Optional

                {

                    name: "View Subscriptions",

                    short_name: "Subscriptions",

                    description: "View the list of podcasts you listen to",

                    url: "/subscriptions?utm_source=homescreen",

                    icons: [{ src: "/icons/subscriptions.png", sizes: "192x192" }]

                }

            ],

            gcmSenderId: undefined,             // Optional

            // Standard Meta Tags

            svgFavicon: 'favicon.svg',          // Optional. Requires favicon.ico fallback

            // Microsoft Windows Meta Tags

            msTileColor: '#666600',             // Optional

            // Apple MacOS Meta Tags

            appleMaskIcon: 'favicon.svg',       // Optional

            appleMaskIconColor: '#666600',      // Optional

        }

    }

]

```

## License (MIT)

Open [LICENSE](./LICENSE) file for more info