Building Awesome PWAs Using Six Leading Frontend Frameworks
Upgrade your web app to a PWA with React, Angular, Vue, Svelte, Nuxt, and Next.js for faster performance and offline access.
PWAs, are you familiar with them? They are modern web applications that deliver a native-like experience on mobile devices. They deliver functionality in native apps, such as offline capability and push notifications, using advanced APIs and methodologies. Since these apps are designed to work seamlessly on any device, they are a fantastic choice for creating responsive web applications. PWAs can also be put on users’ home screens like regular native applications.
So, why not give them a try?
Let’s look at what we have and what we’re working on.
We created a Progressive Web Application (PWA) and its numerous features, utilizing six (Vue, React, Angular, Svelte, Nuxt, and Next.js) distinct popular technologies. We already have a demo app called Rental Application that provides the same functionality across all six technologies.
💡 Did you know that many businesses are now using Progressive Web Apps (PWAs) to enhance their user experience?
Let’s take a short look at the PWA Manifest file and Service workers' heroic squad:
- Manifest file
A manifest file serves as an ID card for your web app, holding essential details like its name, logo, and design. When the PWA is added to or opened from the home screen, the manifest file helps to ensure consistency across devices and an enjoyable experience for users. This allow PWAs to be installed as standalone applications, making them more accessible and user-friendly. 🚀💯
We will use the same manifest file for each technology when deploying PWA.
- Service workers
Think of service workers like the Batman to your PWA’s Robin. They work diligently in the background to ensure the application runs smoothly and efficiently, even if you aren’t connected to the internet.
With features like push notifications and offline access, they’re the hidden weapon that makes your PWA feel like a native app. Service workers require some setup and maintenance, but once they’re up and running, they’ll help your PWA save the day!
Architecture for service worker
The architecture of service workers is similar to JARVIS for websites, caching content for fast loading and updating it with fresh information from the network, just like how JARVIS maintains Iron Man’s suit.
Final application demonstration before implementing PWA.
Our Rental Application manages data through a REST API. To store data, we used a Fake JSON server, and the Axios library handled network queries smoothly. Using our application, we can quickly add, update, retrieve, or delete records.
Implementation
Unfortunately, Tom got confused while adopting PWA! 😂
Let’s work together to help Tom accomplish PWA using six different technologies (Vue, Angular, React, Svelte, Nuxt, and Next).
Prerequisites
Before we begin, ensure you have the following tools installed on your system:
- Node.js and npm
- A text editor or IDE of your choice
How to get the starter file for each technology?
# 1.Clone the repository from GitHub:
git clone https://github.com/Akash52/frontend-techs-pwa.git
# 2.Check out to the specific branch for the framework you'd like to use:
- Vue : git checkout vue-rental-starter
- Angular : git checkout angular-rental-starter
- React : git checkout react-rental-starter
- Svelte : git checkout svelte-rental-starter
- Next : git checkout next-rental-starter
- Nuxt : git checkout nuxt-rental-starter
# 3.Install dependencies using npm i.
# 4.To run the rental application starter for each framework:
- Vue: ng run dev (access at http://localhost:5173/)
- Angular: ng serve (access at http://localhost:4200/)
- React: npm start (access at http://localhost:3000/)
- Svelte: npm run dev (access at http://localhost:3000/)
- Next : npm run dev (access at http://localhost:3000/)
- Nuxt : npm run dev (access at http://localhost:3000/)
More information for the application is included in the readme file.1. Vue
“Creating beautiful and functional interfaces is as simple as 1–2–3 with Vue.js.”
For that, you need a vue-rental-starter code. 😄
Step 1: Install the necessary packages using npm or yarn
- We are using Vite PWA to achieve PWA easily with Vue.
First, runnpm i vite-plugin-pwa -D in your terminal.
Step 2: Configure manifest and workbox
- Manifest file is similar to the one shown at the beginning of the blog.
- Workbox is a platform that enables capabilities like caching, offline storage, and network queries to help developers create better web apps.
Once we’ve completed configuring Vite PWA in vite.config.js, the output is as below:
The code above installs a Vite PWA plugin, which allows our website to run offline by caching assets, boosting performance and user experience.
Step 3: Build, deploy, and test
Create a dist folder using the npm run build command.
Live Demo: vue-rental-pwa-demo
Github: Vue Rental App
2. Angular
“…making front-end development more bearable since 2010.”
Install the Angular CLI in the system before cloning the boilerplate.
- Angular CLI (
npm install -g @angular/cli) - Here you will find angular-rental-starter code. 😄
Step 1: Install the necessary packages using npm or yarn
There are two packages used to achieve PWA easily with Angular
1. ng add @angular/pwa
The above command adds PWA files and functionalities to an Angular app automatically:
- The manifest.webmanifest file
- the ngsw-config.json service worker
- and icons of various sizes under the assets/icons directory
2. npm i @angular/service-worker
The app needs to include the Angular service worker module.
After running the above commands, the output should look like the below image:
Step 2: Make custom changes in the configured files
The ngsw-config.json file is a configuration file for the Angular Service Worker, which caches and serves your application's assets.
This file includes two asset groups: “app” and “assets”. The “app” group contains essential files prefetched during installation, while the “assets” group contains non-critical resources that are lazily loaded when needed.
Overall, the configuration ensures Progressive Web App (PWA) is installed and accessed quickly, even when the user has limited network connectivity.
Step 3: Build, deploy, and test
Run the ng build command to build the app for the production environment.
ng build will create a dist folder for deployment, which we drag and drop onto Netlify.
Live Demo: angular-rental-pwa-demo
Github: Angular Rental App
3. React
“Building with React is like putting together a puzzle — each piece fits perfectly to create a beautiful, functional masterpiece.”
Step 1: Create a service worker file and register it in the index.html file
Once we’ve finished configuring PWA, the final project folder will look like this:
First, under the public folder, we create serviceworker.js. In the serviceworker.js file, paste the following code.
Second, add assets, icons, and offline.html page to the public folder and manifest file to the one shown at the beginning of the blog.
Lastly, serviceworker.js and the manifest.json register into index.html and add configuration for both
Above code block for building a React-based PWA. It includes app details, icon links, and a manifest file. The script enables offline functionality, speeds up loading, and confirms proper operation of the app.
Step 2: Build, deploy, and test
Using npm run build command, create a build folder.
- Live Demo: react-rental-pwa-demo
- Github: React Rental App
4. Svelte
“Unleash your creativity with Svelte’s simplicity.”
I believe that you have svelte-rental-starter code. 😄
Step 1: Create and configure a service worker file
We created a service worker file in the src folder and placed icons and manifest.json in the static folder.
Insert the following code into the service-worker.js file:
- Service Worker Configured
- Manifest file like the one shown at the blog’s beginning
Finally, we register manifest.json and link icons to app.html.
Step 2: Build, deploy, and test
- For deployment, we directly deploy the GitHub final code to Netlfy.
- Live Demo : svelte-rental-pwa-demo
- Github: Svelte Rental App
5. NextJS
“Why did the Next.js developer cross the street? to reach the SSR-side!”
I believe that you have next-rental-starter code. 😄
Step 1: Install the necessary packages using npm or yarn
First, we use next-pwa to simply achieve pwa using nextjs.
npm i next-pwa(Next.js Zero Config PWA Plugin)
On configuring PWA, the final project folder will look like this:
Then, add icons to the public folder.
Next, add the following configuration to your next.config.js file:
Above withPWA function creates a configuration object for the next-pwa plugin, which helps create a service worker that manages caching and offline functionality.
The runtimeCaching array includes one object that specifies how to cache assets and data from an external API. The object defines a URL pattern to match all URLs (/.*/i), and sets the caching strategy to "NetworkFirst". If the API doesn't respond within 20 seconds, the service worker will fall back to the cache. The cache is named "others", and can store up to 32 entries for a maximum of 24 hours.
Step 2: Build, deploy, and test
- We direct deploy the GitHub final code to Netlify for deployment.
- Live Demo: next-rental-pwa-demo
- Github: Next Rental App
6. NuxtJS
“NuxtJS where coding meets creativity and sparks fly.”
I believe you have the nuxt-rental-starter code.
Step 1: Install the necessary packages using npm or yarn
First, we use a package called nuxt-pwa to achieve pwa with nuxtjs.
- NuxtJS PWA(
npm i @nuxtjs/pwa)
Second, add icon to the static folder
When we’re done setting PWA, the final project folder should look like this:
Step 2: pwa setup for the nuxt.config.js file
Lastly, we added pwa configuration to nuxt configuration.
We set up offline caching using the Workbox library. This involves caching assets like images, stylesheets, and scripts in a cache with a maximum age and entry limit. Additionally, it caches API calls by first attempting to fetch data from the network and retrieving the data from the cache if that fails.
Overall, the above code enables faster load times and a more seamless experience for users, even when they are offline.
Step 3: Build, deploy, and test
Run the npm run build command to build the app.
npm run build will create a dist folder for deployment, which we simply drag and drop onto Netlify.
- Live Demo: nuxt-rental-pwa-demo
- Github: Next Rental App
That’s it!
Wrapping up
Choosing the right frontend framework for PWA development is crucial. By utilizing the strengths of these leading frameworks, you can create impressive PWAs that offer fast, engaging, and reliable experiences across platforms.
Though the choice of framework depends on the project’s goals, but with multiple options available, building awesome PWAs is now more accessible and exciting than ever.
For more updates on the latest tools and technologies, follow the Simform Engineering blog.
