[{"data":1,"prerenderedAt":325},["ShallowReactive",2],{"blog-article-/blog/nuxt-adding-pwa":3,"blog-surround-/blog/nuxt-adding-pwa":316},{"id":4,"title":5,"body":6,"canonical":300,"date":301,"description":302,"extension":303,"featured":304,"image":305,"meta":306,"navigation":307,"ogImage":300,"path":308,"provider":309,"published":304,"seo":310,"stem":311,"tags":312,"url":300,"__hash__":315},"blog/blog/nuxt-adding-pwa.md","Adding a PWA in Nuxt.js",{"type":7,"value":8,"toc":298},"minimark",[9,13,16,32,35,41,84,89,121,133,149,152,175,284,294],[10,11,12],"p",{},"Most people don't realise how easy it really is to add a PWA with Nuxt.js. Progressive Web Apps (PWA) deliver native-like capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase. You can turn your website into a PWA which will give you the benefits of better offline support as well as that app like look and feel. Just save it to the home screen and open it from there and you will see how amazing it is.",[10,14,15],{},"The Nuxt.js PWA module registers a service worker for you to deal with offline caching.",[17,18,19,23,26,29],"ul",{},[20,21,22],"li",{},"It automatically generates a manifest.json file",[20,24,25],{},"It automatically adds SEO friendly meta data with manifest integration",[20,27,28],{},"It automatically generates app icons with different sizes",[20,30,31],{},"And you can even set up free push notifications using OneSignal",[10,33,34],{},"Ok so there is a lot of automatic stuff so what do you need to do exactly?",[36,37,38],"ol",{},[20,39,40],{},"Install the npm package",[42,43,48],"pre",{"className":44,"code":45,"language":46,"meta":47,"style":47},"language-bash shiki shiki-themes github-light github-dark","yarn add @nuxtjs/pwa\nor\nnpm i @nuxtjs/pwa\n","bash","",[49,50,51,67,73],"code",{"__ignoreMap":47},[52,53,56,60,64],"span",{"class":54,"line":55},"line",1,[52,57,59],{"class":58},"sScJk","yarn",[52,61,63],{"class":62},"sZZnC"," add",[52,65,66],{"class":62}," @nuxtjs/pwa\n",[52,68,70],{"class":54,"line":69},2,[52,71,72],{"class":58},"or\n",[52,74,76,79,82],{"class":54,"line":75},3,[52,77,78],{"class":58},"npm",[52,80,81],{"class":62}," i",[52,83,66],{"class":62},[36,85,86],{"start":69},[20,87,88],{},"Add the module to your nuxt.config.js file",[42,90,94],{"className":91,"code":92,"language":93,"meta":47,"style":47},"language-javascript shiki shiki-themes github-light github-dark","{\n  modules: ['@nuxtjs/pwa']\n}\n","javascript",[49,95,96,102,116],{"__ignoreMap":47},[52,97,98],{"class":54,"line":55},[52,99,101],{"class":100},"sVt8B","{\n",[52,103,104,107,110,113],{"class":54,"line":69},[52,105,106],{"class":58},"  modules",[52,108,109],{"class":100},": [",[52,111,112],{"class":62},"'@nuxtjs/pwa'",[52,114,115],{"class":100},"]\n",[52,117,118],{"class":54,"line":75},[52,119,120],{"class":100},"}\n",[36,122,123,130],{"start":75},[20,124,125,126,129],{},"Add an icon.png file to your ",[49,127,128],{},"static"," directory. It should be square and be at least 512px x 512px.",[20,131,132],{},"In your .gitignore file make sure you ignore the service worker file.",[42,134,138],{"className":135,"code":136,"language":137,"meta":47,"style":47},"language-markdown shiki shiki-themes github-light github-dark","sw.\\*\n","markdown",[49,139,140],{"__ignoreMap":47},[52,141,142,145],{"class":54,"line":55},[52,143,144],{"class":100},"sw.",[52,146,148],{"class":147},"sj4cs","\\*\n",[10,150,151],{},"And that's it you now have a PWA up and running.",[10,153,154,155,158,159,162,163,166,167,170,171,174],{},"You can also further customise the PWA by modifying the title and author or name for example. The module by default adds the ",[49,156,157],{},"package.json"," name and author but you can modify this by creating a ",[49,160,161],{},"pwa"," key in your ",[49,164,165],{},"nuxt.config.js"," file and modifying the ",[49,168,169],{},"meta"," or ",[49,172,173],{},"manifest"," properties.",[42,176,178],{"className":91,"code":177,"language":93,"meta":47,"style":47},"pwa: {\n  meta: {\n    title: 'My PWA',\n    author: 'Me',\n  },\n  manifest: {\n    name: 'Nuxt.js PWAs are so easy',\n    short_name: 'Nuxt.js PWA',\n    lang: 'en',\n  },\n}\n",[49,179,180,187,194,208,221,227,235,248,261,274,279],{"__ignoreMap":47},[52,181,182,184],{"class":54,"line":55},[52,183,161],{"class":58},[52,185,186],{"class":100},": {\n",[52,188,189,192],{"class":54,"line":69},[52,190,191],{"class":58},"  meta",[52,193,186],{"class":100},[52,195,196,199,202,205],{"class":54,"line":75},[52,197,198],{"class":58},"    title",[52,200,201],{"class":100},": ",[52,203,204],{"class":62},"'My PWA'",[52,206,207],{"class":100},",\n",[52,209,211,214,216,219],{"class":54,"line":210},4,[52,212,213],{"class":58},"    author",[52,215,201],{"class":100},[52,217,218],{"class":62},"'Me'",[52,220,207],{"class":100},[52,222,224],{"class":54,"line":223},5,[52,225,226],{"class":100},"  },\n",[52,228,230,233],{"class":54,"line":229},6,[52,231,232],{"class":58},"  manifest",[52,234,186],{"class":100},[52,236,238,241,243,246],{"class":54,"line":237},7,[52,239,240],{"class":58},"    name",[52,242,201],{"class":100},[52,244,245],{"class":62},"'Nuxt.js PWAs are so easy'",[52,247,207],{"class":100},[52,249,251,254,256,259],{"class":54,"line":250},8,[52,252,253],{"class":58},"    short_name",[52,255,201],{"class":100},[52,257,258],{"class":62},"'Nuxt.js PWA'",[52,260,207],{"class":100},[52,262,264,267,269,272],{"class":54,"line":263},9,[52,265,266],{"class":58},"    lang",[52,268,201],{"class":100},[52,270,271],{"class":62},"'en'",[52,273,207],{"class":100},[52,275,277],{"class":54,"line":276},10,[52,278,226],{"class":100},[52,280,282],{"class":54,"line":281},11,[52,283,120],{"class":100},[10,285,286,287],{},"For a full list of meta options for your pwa see ",[288,289,293],"a",{"href":290,"rel":291},"https://pwa.nuxtjs.org/modules/meta.html#mobileappios",[292],"nofollow","the Nuxt PWA docs",[295,296,297],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":47,"searchDepth":69,"depth":69,"links":299},[],null,"2020-06-28","Most people don't realise how easy it really is to add a PWA with Nuxt.js. Progressive Web Apps (PWA) deliver native-like capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase.","md",false,"photo-1511804074-5e57bc14db9f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop",{},true,"/blog/nuxt-adding-pwa","imgix",{"title":5,"description":302},"blog/nuxt-adding-pwa",[313,314],"nuxt","performance","IgVq94G3VvEaxI1i_x2yGQM4twO9SoKjIbZuUhnU_B0",[317,321],{"title":318,"path":319,"stem":320,"children":-1},"Styling your active classes in Nuxt.js","/blog/nuxt-active-styles","blog/nuxt-active-styles",{"title":322,"path":323,"stem":324,"children":-1},"Advanced i18n in Nuxt using Interpolations","/blog/autoload-vue-components-in-nuxt","blog/autoload-vue-components-in-nuxt",1790839747853]