--- title: Turn Your Vue App into an Offline-ready Progressive Web App description: Learn how to turn your Vue.js app into an offline-ready progressive web app. Understand the key concepts of service workers and manifest files. Prepare your... canonical: https://daily.dev/posts/turn-your-vue-app-into-an-offline-ready-progressive-web-app-6eob3tdmt twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Turn Your Vue App into an Offline-ready Progressive Web App | daily.dev og:description: Learn how to turn your Vue.js app into an offline-ready progressive web app. Understand the key concepts of service workers and manifest files. Prepare your... og:url: https://daily.dev/posts/turn-your-vue-app-into-an-offline-ready-progressive-web-app-6eob3tdmt og:image: https://api.daily.dev/og/posts/6eob3TDMt.png og:image:alt: Turn Your Vue App into an Offline-ready Progressive Web App og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Turn Your Vue App into an Offline-ready Progressive Web App **[SitePoint](https://daily.dev/sources/sitepoint)** · 11 min read · 11 upvotes · 2 comments ## Summary Learn how to turn your Vue.js app into an offline-ready progressive web app. Understand the key concepts of service workers and manifest files. Prepare your Vue.js app and modify the manifest file and the service worker. Customize the service worker and make your app installable. Test your offline-ready PWA. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@aristidesbneto** · 0 upvotes > Thanks **@mihirdas** · 0 upvotes > Thanks for sharing. ❤️ --- Tags: [#webdev](https://daily.dev/tags/webdev), [#javascript](https://daily.dev/tags/javascript), [#pwa](https://daily.dev/tags/pwa) [View this post on daily.dev](https://daily.dev/posts/turn-your-vue-app-into-an-offline-ready-progressive-web-app-6eob3tdmt) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Turn Your Vue App into an Offline-ready Progressive Web App","url":"https://daily.dev/posts/turn-your-vue-app-into-an-offline-ready-progressive-web-app-6eob3tdmt","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/turn-your-vue-app-into-an-offline-ready-progressive-web-app-6eob3tdmt"},"datePublished":"2023-12-21T17:53:47.516Z","dateModified":"2023-12-21T17:53:46.052Z","description":"Learn how to turn your Vue.js app into an offline-ready progressive web app. Understand the key concepts of service workers and manifest files. Prepare your...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/293c6fa51cc8722b9f2affba4badb435?_a=AQAEufR","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/293c6fa51cc8722b9f2affba4badb435?_a=AQAEufR","isAccessibleForFree":true,"articleSection":"SitePoint","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"SitePoint","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/sitepoint","url":"https://daily.dev/sources/sitepoint"},"commentCount":2,"discussionUrl":"https://daily.dev/posts/turn-your-vue-app-into-an-offline-ready-progressive-web-app-6eob3tdmt","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":11},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":2}],"keywords":"webdev,javascript,pwa","timeRequired":"PT11M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"SitePoint","item":"https://daily.dev/sources/sitepoint"},{"@type":"ListItem","position":3,"name":"Turn Your Vue App into an Offline-ready Progressive Web App"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/turn-your-vue-app-into-an-offline-ready-progressive-web-app-6eob3tdmt","comment":[{"@type":"Comment","text":"Thanks","datePublished":"2023-12-29T12:52:09.037Z","url":"https://daily.dev/posts/6eob3TDMt#c-0qdkrKEa6","author":{"@type":"Person","name":"Aristides Neto","url":"https://daily.dev/aristidesbneto","image":"https://lh3.googleusercontent.com/a/ACg8ocLPbJ881TjL3WM3y8jZECL5So2T9EN9eH5P69peb238Rf8=s96-c"}},{"@type":"Comment","text":"Thanks for sharing. ❤️","datePublished":"2023-12-22T03:16:16.410Z","url":"https://daily.dev/posts/6eob3TDMt#c-rW1H94cXI","author":{"@type":"Person","name":"Mihir Das","url":"https://daily.dev/mihirdas","image":"https://lh3.googleusercontent.com/a/ACg8ocJBAO7BOPgbTXSIRTv97UV2yRFy4sfqSb-EA1fsiyezKlU=s96-c"}}]} ```