Hi there!
Thinking about how to convert any website/webpage to an installable progressive web app? read on.
In this tutorial, we are going to convert an HTML5 based game into an installable web application, which can be installed on Android or iOS devices.
Made this classic simon game, which is really simple in nature but quite addictive. You can fork or star this repository to make it your own or suggest any further improvements.
What is a PWA?
A progressive web app (PWA) is the set of mobile web application development techniques that entails building apps that feel and look like native ones. Using a web stack (JS, HTML, and CSS), progressive web apps combine rich functionality and a smooth user experience associated with native apps. Simply put, PWA is the web app with the native-app flavor: After the installation, a user clicks on its icon on a device's home screen and gets straight to the website.
One of the best features of PWA's is that it is installable on user's devices like native apps, and work in offline mode too.
Steps to take -
- Create a service worker file.
- Update the main document to check if the functionality is supported.
- Create manifest.json for app metadata.
- Use Chrome dev tools to debug the app.
1. Service worker
Create a service-worker.js
file in the root directory of the project, it is important to put it in the root directory to help us store static content in cache storage. You can almost store any kind of media in cache storage like mp3, mp4, video maybe? and obviously the static file HTML, CSS, and JS.
// Installing service worker
const CACHE_NAME = 'Simon-game';
/* Add relative URL of all the static content you want to store in
* cache storage (this will help us use our app offline)*/
let resourcesToCache = ["./", "./img/game.png", "./game.js", "./styles.css"];
self.addEventListener("install", e=>{
e.waitUntil(
caches.open(CACHE_NAME).then(cache =>{
return cache.addAll(resourcesToCache);
})
);
});
NOTE: change the
CACHE_NAME
const to your own app's name
Add two more event listeners -
// Cache and return requests
self.addEventListener("fetch", e=>{
e.respondWith(
caches.match(e.request).then(response=>{
return response || fetch(e.request);
})
);
});
// Update a service worker
const cacheWhitelist = ['Simon-game'];
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
);
});
NOTE: Replace the
cacheWhiteList
variable with your own app's name
2. Check for availability (update index.html)
In the case of a static website, update the main HTML document to check for the availability of service workers, and register our app using the service-worker.js
file.
<script>
if('serviceWorker' in navigator){
navigator.serviceWorker.register('/service-worker.js');
} else {
console.log("Service worker is not supported");
}
</script>
3. Create manifest.json file
Create a manifest.json
file, we need to link that to our main HTML document.
<link rel="manifest" href="manifest.json">
Now, this file contains metadata about our app, like App name, icons reference, URL to open on the opening of the app, etc.
{
"name": "Simon Game",
"short_name": "Simon Game",
"start_url": "/",
"background_color": "#FFDCB5",
"theme_color": "#1E003D",
"icons": [
{
"src": "img/512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "img/192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable any"
}
],
"display": "standalone",
"orientation":"portrait"
}
Copy/paste the above code in the manifest and change your app details. You can reference a single icon or use icons of multiple sizes, as devices differ in screen sizes.
4. Use dev tools to debug
Now open the chrome dev tool (ctrl+shirt+i
) and click on the applications tab to check if the service worker and manifest file are detected by the browser.
As you can see below the logo and name of the app are shown.
The background_color
property sets the splash screen color and theme_color
the notification bar.
You can also check if your app meets the standard for PWA, in the lighthouse tab and click generate the report.
This will also help you to add things that you might forget like adding this line for iPhone/Apple users.
<link rel="apple-touch-icon" href="img/game.png"/>
BOOM, we are done! You have successfully converted a website/game into a PWA.
How to install on devices?
On chrome, you'll have this small add icon on the URL bar, which prompts you to install the app on your device.
On mobile devices, you'll get a prompt (Chrome)
If not then click on the 3 dots in the top right corner, an "Install app" option appears.
Perfectly installed on Android.
Hope it helped. Give a like :)
Cheers,
Shashwat
Follow me on twitter
Top comments (24)
I've been wanting to try this. Thanks for the excellent instructions!
Glad you found it helpful
Fabulously laid down the instructional content..... Found it really easy to follow the instructions and get the task done
Thanks, bro, will write more in the future. I spend enough time writing these and I enjoy helping people.
Epic post. I'll definitely be using it in the near future.
Means a lot to me, Thanks!
Thanks for sharing , very much needed for web devs,who want to create app like experience to their users.
Your welcome, Indeed. Try it you'll love it
Thank you
Your welcome!
What if my site uses flash??? Hehehe
Can you send me your website? however, flash is discontinued
timesofindia.indiatimes.com/gadget...
I was joking. Would be interesting if you could though.
we may find a way but will prove futile its support is discontinued.
Great writing here
I appreciate it
Hello mate, thanks for sharing! What do you think to use Workbox from web worker?
Thanks for this guide! Excited to try this out for my personal projects.
Your welcome, try it you'll love it.
Does this work also for a web app to be installed on PC / windows?
Yes, bro, absolutely. Works Like butter on PC