Thoughts about Progressive Web App
Onmy way to step into a senior web developer, I find out the most important thing is thinking like a pro, which means optimization and proficiency are the priority not only the coding processing. I’ve gotten interested in the Progressive Web App which is created in 2015 by Google. And the idea of a PWA is invented by Steve Jobs in 2007.
When talking about App, you may relate the apps in Apple or Android app store. This is kind of in the middle between the web and a real full-size App.
What are the good parts of PWA?
Progressive: A PWA works in most modern web browsers with the power of progressive enhancement principles.
Connectivity Independent: It can run offline, even in the absence of a stable internet connection it works smoothly due to service workers.
App-like Experience: Though they are not real apps they offer the same level of user experience as native mobile apps with app-like navigation and interactions.
Responsive: PWAs work on every device be it a mobile phone, desktop, laptop, or tablet.
Shareable: The app can be shared with a URL or link and is easy to install.
Always up-to-date: With the service worker update process, a PWA is always fresh and doesn’t need to update.
Re-engageable: It has the ability to maintain user engagement like native apps by sending push notifications to users.
Discoverable: PWAs are search engine friendly so they can be explored, discovered, and opened directly.
Safe: These apps are served via HTTPS, so they are highly secure just like the web browsers and apps we use.
Installable: These apps can be installed on mobile devices without any complex installation process.
Fast speed: PWAs are designed for faster loading speed, after the first use, the content will load in no time in the apps.
That’s why it gets more and more popular, and is good enough for users’ requirements.
Frankly says, you can get the resources fast, and looks like a mobile app with security provided. Even when you have no internet after loaded, it can run smoothly.
- To install it on a mobile home screen
- To access it when offline
- To access the camera
- To get push notifications
- To do background synchronization
How to build one?
- requirement of HTTPS. Security is important. You can see a lock secure logo when running on an HTTPS website, which can encrypt the passwords. Such as when you deploy the website on Github, it will automatically run the secure website for you.
When you want to do it on your own site, you can try free services like Let’s Encrypt or Cloudflare.
2. App manifest file.
in manifest.json:
{
"name": "...",
"short_name": "..",
"start_url": "index.html",
"display": "standalone",
"background_color": "#fdfdfd",
"theme_color": "#db4938",
"orientation": "portrait-primary",
"icons": [
{
"src": "/images/icons/icon-72x72.png",
"type": "image/png", "sizes": "72x72"
},
{
"src": "/images/icons/icon-96x96.png",
"type": "image/png", "sizes": "96x96"
}
]
}display: It tells the browser how to display the app. There are several modes like minimal-ui, fullscreen, browser etc.
For different size devices with different size icons, required as needed.
Btw, you can generate the favicons here.
or npx pwa-asset-generator logo.png icons
And add the viewport meta tag to make sure it scales to screen size.
<!DOCTYPE html>
<html lang=”en”>
<head>
…
<meta name=”viewport” content=”width=device-width, initial-scale=1">
…
</head>
…
3. Service worker
When you build a react app with npx create-react-app my-app, you must notice it will create the registerServiceWork file for you(previous version). Now If you notice, you need run npx create-react-app my-app --template cra-template-pwa, then the files generated.
The process is like the user asking for data from the server, the service worker will get the request first, and check if there is cache available in API storages, not directly to the networker.
in index.js : you can turn on the register from serviceWorker.unregister(); to
serviceWorker.register();Then you can manipulate the serviceWork.js file with Workbox.
npx serve
Chrome Ctrl+Shift+I to open the console, Application — ->manifest to check.
Run Lighthouse to see the performance scores and try to refine them better.
I found some resources about PWA:
Fireship 100 seconds about PWA
web.dev full documents about PWA
How the Lighthouse scores your app, you need to check this up. What makes a good PWA
The future about PWA:
PWAs will go as far as service workers, and they are far from dead. … Apple refuses to implement PWA features in Safari, and they don’t allow you to run other web browsers unless they are skins over Safari’s WebKit.
Today, Progressive Web Apps are accessible via smartphones and desktops across a variety of browsers (For iOS users, only Safari can be used to add a PWA to the home screen). PWAs also support many of the same features or functions that native apps support.
It is a potential future for web development. It’s similar functionality to the native app, but more lightweight and convenient. For the app needed hardware requirement, still, work with Native App development though.
