This content originally appeared on Bits and Pieces - Medium and was authored by Mohammad Basit
Converting an existing Vue.js application into a PWA
A Progressive Web App, or PWA for short, is essentially a website that looks and feels like a mobile app.
PWAs are built with web technologies such as HTML, CSS, and JavaScript, but they offer features that were previously only available to native mobile apps, such as offline support, push notifications, and the ability to be added to a user’s home screen.
This means that PWAs can provide users with a more seamless and engaging experience, while also being easily accessible from any device with a web browser.
PWA’s come with benefits:
- PWAs can be made using common web technologies like HTML, CSS, and JavaScript which most web developers are familiar with. This means it can cost less to develop and can be released quicker compared to native mobile apps, which require more specialized knowledge and tools.
- PWAs can be used on any device that has a web browser, like computers, laptops, tablets, and phones. This means businesses can reach more people and give them the same experience no matter what device they’re using.
- PWAs use new web technologies and methods to make them load faster and perform better than regular websites. This can make users less likely to leave the website quickly and more satisfied with their experience.
- PWAs offer a fast and responsive experience like an app when accessed on any device with a web browser. They also have cool features like push notifications, offline support, and the ability to add them to the home screen of a device. This can make users more interested and likely to use the app again.
Pre-requisites for deployment and better UX:
- A responsive website is a prerequisite for creating a PWA. Ensure that your website design is mobile-friendly and can adjust to different screen sizes.
- A PWA must be served over HTTPS to ensure the security of the user’s data. If your website is not already using HTTPS, you will need to obtain an SSL certificate and set up HTTPS.
How to convert an existing application into a PWA
In this example, I will use an already-built responsive Vue.js application.
So, to convert a Vue.js website into a Progressive Web App (PWA), you can use the following steps:
Install the Vue CLI service worker plugin: The @vue/cli-plugin-pwa is a plugin for Vue CLI that provides PWA functionality to your Vue.js project. To install the plugin, run the following command in your terminal:
vue add @vue/cli-plugin-pwa
Configure the PWA options: After installing the plugin, you will be prompted to configure the PWA options, such as the name, description, icons, and colors for your app. You can also specify additional features such as caching strategies and background synchronisation.
A manifest file looks like this:
{
"name": "My PWA",
"short_name": "My PWA",
"icons": [
{
"src": "/images/icon-192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icon-512x512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#2196f3"
}Generate the service worker: The PWA plugin generates a service worker file for your Vue.js project, which is responsible for caching assets and enabling offline support. To generate the service worker, run the following command in your terminal:
A service worker file looks like this:
const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
'/',
'/index.html',
'/styles.css',
'/script.js',
'/images/icon-192x192.png',
'/images/icon-512x512.png'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => {
if (response) {
return response;
}
return fetch(event.request);
})
);
});
These files will be generated by the PWA CLI TOOL. I’ve provided examples just for reference and generated files may differ from the ones I’ve provided.
Finally,
npm run build
Test your PWA: After generating the service worker, you can test your PWA by serving the production build of your Vue.js project. You can use a tool like serve to serve the build files:
npm install -g serve
serve -s dist
Register your PWA: Once you have tested your PWA, you can register it with various app stores and platforms, such as the Google Play Store, Microsoft Store, and Apple App Store.
Overall, the Vue CLI PWA plugin makes the process much easier and provides a convenient way to add PWA functionality to your Vue.js project.
Conclusion
To sum up, Progressive Web Apps (PWAs) are becoming more popular because they provide users with a similar experience to using a mobile app, but on the web. They can be accessed from any device with a web browser and offer features such as push notifications and offline support.
PWAs can be built using familiar web technologies, which can make development faster and less expensive than building a native mobile app. They also provide faster loading times, which can help keep users engaged and satisfied.
For businesses, implementing a PWA can be a great way to reach more users and provide them with a fast and responsive experience on the web.
Build Apps with reusable components, just like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
→ Micro-Frontends
→ Design System
→ Code-Sharing and reuse
→ Monorepo
Learn more
- How We Build Micro Frontends
- How we Build a Component Design System
- How to reuse React components across your projects
- 5 Ways to Build a React Monorepo
- How to Create a Composable React App with Bit
How PWAs Are Changing the Mobile Landscape was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Mohammad Basit
Mohammad Basit | Sciencx (2023-03-21T09:27:50+00:00) How PWAs Are Changing the Mobile Landscape. Retrieved from https://www.scien.cx/2023/03/21/how-pwas-are-changing-the-mobile-landscape/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.