It's been a year now since I've been working as a Frontend developer role at a startup.
It hasn't been the easiest since delivering a "well-performing" frontend product is generally a hard work. However, with the help of SPAs such as React I have been to develop products faster and easier. Web-apps are good. They make it feel for our users that they are not looking at a web-site, but a more Application-like website.
It seemed like it was enough, having a fast frontend product with responsive layouts supporting multiple browsers looked like I have done possibly everything I could using Javascript.
However, lately I've seen a lot of increase in our mobile users. That many of them actually don't stay longer than those who are using our service through a desktop. It was too obvious that even ~~~~though my company's product offered mobile layouts it certainly wasn't good enough.
Hense enters PWA.
PWA stands for progressive web app.
Progressive Web Apps (PWAs) are web apps built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device, all with a single codebase.
Simply speaking it's your frontend product, created using something like React, Vue, Angular, Next that can be turned into a native friendly app that can be installed on a native machine.
When you create a PWA and deploy it, you'll get benefits like using the notification API and other OS close APIs that are offered from the device. There are no top browsing bar, so it feels like a normal app.
Well, according to the document, it ain't that simple.
Because it's a concept and a set of rules that meet the spec of a PWA, there are some sort of checklists for creating a PWA.
Core Progressive web app checklists are
There are more lists that you can find out here.
These days a lot of frontend developers are creating their products using React. My company also delivers products using React.
Here are some guidelines to create a PWA using React.
First, you start by creating a manifest.json file inside the public directory. This manifest file should be writing under this guideline
The key manifest properties include
after writing the manifest it should look something like this,
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
After adding the manifest add it as a link to your app.
<link rel="manifest" href="manifest.json" />
and it should be good to go. Now it's readt to be deployed on the web.
On next post, I'll research of how to really make this PWA work and be usefull to users.