Build PWA with Gatsby

https://appinstitute.com/a-beginners-guide-to-progressive-web-apps/https://www.gatsbyjs.org/docs/progressive-web-app/
npm install --global gatsby-cli
gatsby new wordpress-blog-pwa https://github.com/mhjadav/wordpress-blog-gatsby
{resolve: 'gatsby-plugin-manifest',options: {name: 'Wordpress Blog PWA',short_name: 'Blog PWA',start_url: '/blog',background_color: '#1d69ab',theme_color: '#1d69ab',display: 'standalone',icon: path.join(__dirname, 'src/images/logo.png'),},},
name: Used in app install propmtshort_name: Used in home screen, launcher or some place where space is limitedstart_url: Page to load when app is launched from home screen, this is to avoid wrong page load.background_color: This is used on splash screen when app is launchedtheme_color: Web app theme color,display: This is to customize browser ui when app is launched, you can choose any one of these four property - fullscreen, standalone, minimal-ui, browser, we will use stanalone to show add to home screen prompt.icon: These icons are used in places like the home screen, app launcher, task switcher, splash screen, you provide big size image plugin will create set of icon required,
yarn build
gatsby build
gatsby serve
gatsby-plugin-react-helmet react-helmet
<Helmettitle={data.site.siteMetadata.title}meta={[{ name: 'description', content: 'Convert your wordpress blog to pwa using gatsby' },{ name: 'keywords', content: 'wordpress, gatsby, blog, pwa' },]}><html lang="en" /></Helmet>
<Helmettitle={post.title}meta={[{ name: 'description', content: post.excerpt },]}/>
'gatsby-plugin-sitemap',
{
resolve: 'gatsby-plugin-robots-txt',options: {host: siteUrl,sitemap: `${siteUrl}/sitemap.xml`,policy: [{ userAgent: '*', disallow: '' }],},},
gatsby build

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mahipat

Mahipat

40 Followers

Engineer, Working on solving web application problems.