In this guide, I will walk you through the steps to convert your Next.js application into a Progressive Web App (PWA) and publish it on the Google Play Store. This process involves creating a PWA, validating it, packaging it, and uploading it to the Play Store.
What are Progressive Web Apps?
Progressive Web Apps have revolutionised the mobile web experience by bridging the gap between traditional websites and native apps.
Progressive Web Apps are web applications that leverage modern web technologies to provide an app-like experience to users. They are designed to work across various platforms and devices, eliminating the need for separate native apps for different operating systems.
One of the standout features of PWAs is their ability to function offline. By utilising service workers, PWAs can cache data and resources, allowing users to access content even when they are offline or experiencing poor network conditions. This capability makes PWAs highly reliable and convenient for users.
Fast and Responsive
PWAs are designed to be fast and responsive, providing a smooth user experience similar to native apps. They load quickly, even on slower networks, and respond instantaneously to user interactions. The use of caching and optimised resource loading techniques contributes to their exceptional performance.
Cross-Platform Compatibility
Unlike native apps that require separate development efforts for each platform, PWAs are platform-agnostic. They can be accessed on any device with a modern web browser, be it a smartphone, tablet, or desktop computer. This cross-platform compatibility significantly reduces development and maintenance costs.
Improved User Experience
PWAs excel in delivering an enhanced user experience. With features like push notifications, offline access, and seamless navigation, PWAs offer a cohesive and immersive experience that rivals native apps. Users can add PWAs to their home screens, providing quick access and a sense of ownership.
How Progressive Web Apps Work
Progressive Web Apps leverage modern web technologies to deliver an app-like experience. They utilise service workers to cache resources, enable offline access, and handle background synchronisation. When a user visits a PWA-enabled website, the service worker installs in the background and caches the necessary files. The next time the user accesses the PWA, it loads quickly from the local cache, creating a seamless and responsive experience.
Converting your NextJS app to a Progressive Web App
To implement a progressive web app, the following steps are typically involved:
1. Web App Manifest:
Create a web app manifest, which is a JSON file containing metadata about the PWA, such as its name, description, icons, and display preferences. The manifest enables the PWA to be installed on a user’s device and appear on their home screen.
You can head over to → pwabuilder.com and enter your URL to generate a web manifest file
You can upload icons and edit other important details and get the manifest file ⬇️
It also gives you recommendations, make sure to have green tick on all the required conditions
Create a manifest.json file in the public directory of your Next.js app and copy the JSON obtained from above process
Link the manifest in your layout.tsx:
<link rel="manifest" href="/manifest.json" />
2. Service Worker Registration
Implement a service worker that handles caching, offline access, and other advanced features. The service worker should be registered in the web page to intercept network requests and provide the necessary functionality.
You can generate different different service workers according to your offline strategy ⬇️
You may use a simple service worker strategy ⬇️
importScripts('https://storage.googleapis.com/workbox-cdn/releases/7.1.0/workbox-sw.js');
workbox.routing.registerRoute(
({request}) => request.destination === 'image',
new workbox.strategies.NetworkFirst()
);
Create a service-worker.js file in the public directory of your Next.js app and copy the code obtained from above process
Register the service worker in your layout.tsx ⬇️
return (
<html lang="en">
<head>
{/* pwa register service worker */}
<script>
if(`serviceWorker` in navigator)
navigator.serviceWorker.register(`/service-worker.js`)
</script>
</head>
</html>
);
3. Generate Icons
Use PWABuilder or another tool to generate the necessary icons and place them in the public/icons directory. Ensure your manifest.json links to these icons.
4. Lighthouse audit
Do a light house audit using chrome dev tools ⬇️
You should see the installable button in green, that means your website is eligible for PWA installation
Process of publishing the PWA to Google playstore
Prerequisites
Before you start, ensure you have the following:
A Valid PWA: Your app must be a PWA with a web manifest, service worker and be accessible via HTTPS.
Google Developer Account: Sign up for a Google developer account, which has a one-time fee of $25.
Be compliant with Google Play Policies
Achieve a lighthouse performance of 80+
Have a privacy policy page on your website
PWABuilder
For packaging the PWA for the Google Play Store, I will use PWABuilder. This powerful tool is designed to simplify the process of converting Progressive Web Apps (PWAs) into platform-specific apps, such as those for Android, iOS, Microsoft and Meta Quest. Created by Microsoft, PWABuilder offers an intuitive and straightforward way for developers to package their web applications and make them available across various app stores, enhancing the app's accessibility and user reach.
Packaging Your PWA App
To package the PWA into an Android app, I will use PWABuilder, which simplifies the process for us. Follow these steps to package the APEX app using PWABuilder.
Enter Your PWA URL: Input the URL of your PWA and click Start button.
Select Packaging Option: Click "Package for stores".
Generate Android Package: Choose "Generate Package" under the Android section.
Configure Package Options: On the Google Play tab, fill out the necessary information. Check if all the settings under "All Settings" is correct.
Ensure your package ID is unique. If you get the same package ID that already exist for some of your apps e.g. com.myapp.www.twa, modify it to e.g. com.myapp.www.twa.pwa.
Download Package: Click "Download Package" to get your Android package.
In the package you will have a signing keystore file, keep it safe, you would need it when you will be releasing a newer version of your app.
Under PWABuilder .zip, you will find - assetlinks.json is a JSON file used to establish a relationship between your PWA and your website. It proves that you own the domain from which your PWA is served and allows the PWA to be installed without the browser URL bar, making it look more like a native app.
Upload the assetlinks.json file to your web server to prove ownership of your PWA. Place this file in the public folder of your server, making it accessible at https://<URL to your PWA>/.well-known/assetlinks.json.
Key Elements of assetlinks.json
relation:
Purpose: Specifies the permissions or actions that are allowed.
Importance: Ensures the PWA has the necessary permissions, such as handling all URLs related to the domain.
target:
Purpose: Defines the target app and its properties.
Importance: Establishes the connection between your web app and the Android app package.
Within the target, there are several important fields:
namespace:
Purpose: Identifies the type of target. For Android apps, this is always "android_app".
Importance: Confirms the target is an Android application.
package_name:
Purpose: Specifies the package name of the Android app.
Importance: Uniquely identifies your app in the Play Store.
sha256_cert_fingerprints:
Purpose: Lists SHA-256 fingerprints of the app’s signing certificate.
Importance: Ensures the app is securely linked to your web domain.
Example of assetlinks.json
[
{
"relation": ["delegate_permission/common.handle_all_urls"],
"target": {
"namespace": "android_app",
"package_name": "com.myapp.www",
"sha256_cert_fingerprints": [
"SHA256",
"SHA256" // to be replaced later for production
]
}
}
]
Log into the Google Play Console: Sign in and create a new app, providing the app name and other details.
Complete Dashboard Tasks: Follow the tasks listed on the Dashboard page. It will ask for some details of your app.
Create a New Release: Under Internal Testing > New Release. In the release creation step, you’ll need to upload an Android App Bundle (.aab) file from the zip file downloaded from PWABuilder.
Generate Google Signing Key: Follow the prompts to generate this key.
Prepare app screenshots: You will need app screenshots for different devices, that will be listed on the Play Store.
Add Testers: You’ll be asked to add Gmail accounts for internal testers, so App will be available for those account on the Play Store.
3. Update assetlinks.json For Production
Copy SHA-256 String: Go to the App Signing page in the Google Play Console and copy the SHA-256 string. Menu > Setup > App Signing > Copy - SHA-256 certificate fingerprint
Before applying for the production, Google will ask you for 20 testers that will test your app for 14 days, so it might be your employees, friends, family... a bit boring.
