- Published on
Make your website like an application with PWA
Viblo: Tạo ứng dụng Web với PWA
Make your website like an application with PWA
When I used Lighthouse to analyze my website, I found out that there was one criterion that my website could not meet, and that was PWA.
I'm starting to wonder what PWA is.
PWA (Progressive Web Apps) is a web app that uses progressive enhancement to provide users with a more reliable experience, uses new capabilities to provide a more integrated experience, and can be installed. And, because it's a web app, it can reach anyone, anywhere, on any device, all with a single codebase.
You can find out more about PWA here
Why are PWAs necessary?
You can see today's people focus on their phones. Developing apps with compatibility on phones helps web developers make their products more accessible to the majority of users.
Some examples of websites that use PWA are:
- X (Twitter)
- Spotify
PWAs offer a number of benefits over traditional websites and native mobile apps. For users, PWAs provide a faster and more reliable experience. They are also more engaging and easier to use. For developers, PWAs are easier and faster to develop than native mobile apps. They are also more cost-effective to maintain and deploy.
Setup PWA for your website
Build with NextJS
I currently have a website built with nextJS, so I'll explain how I built my app with nextJS. (document)
yarn add next-pwa
Then, update or create next.config.js with
const withPWA = require('next-pwa')({
dest: 'public'
})
module.exports = withPWA({
// next.js config
})
After running next build, this will generate two files in your public: workbox-*.js and sw.js, which will automatically be served statically.
Add manifest.json and service worker.js files
- manifest.json file contains information about your PWA application, such as name, icon and landing page.
- The service worker.js file is a JavaScript script that a web browser uses to provide PWA features, such as offline accessibility and push notifications.
The manifest.json and service worker.js files are two important files to have for any PWA application. You can create these files using a text editor or a PWA generator.
Manifesto file.json must contain the following information:
- Name of your PWA application.
- short_name: Short name of your PWA application.
- start_url: The landing page of your PWA application.
- icons: A list of icons for your PWA application.
- background_color: The background color of your PWA application.
- display: The display mode of your PWA application.
{
"short_name": "BunBlog",
"name": "Bunhere: Discorvery technical with Emma N.",
"icons": [
{
"src": "/images/icons-vector.svg",
"type": "image/svg+xml",
"sizes": "512x512"
},
{
"src": "/images/icons-192.webp",
"type": "image/webp",
"sizes": "192x192"
},
{
"src": "/images/icons-512.webp",
"type": "image/webp",
"sizes": "512x512"
}
],
"id": "/?source=pwa",
"start_url": "/?source=pwa",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/",
"theme_color": "#3367D6",
"shortcuts": [
{
"name": "What's the new blog for today?",
"short_name": "Today",
"description": "View the latest blog.",
"url": "/today?source=pwa",
"icons": [
{
"src": "/images/today.webp",
"sizes": "192x192"
}
]
}
],
"description": "Author information",
"screenshots": [
{
"src": "/images/screenshot1.webp",
"type": "image/webp",
"sizes": "540x720",
"form_factor": "narrow"
},
{
"src": "/images/screenshot2.webp",
"type": "image/webp",
"sizes": "720x540",
"form_factor": "wide"
}
]
}
The service worker.js file must contain the following function calls:
- register(): Register service worker with the web browser.
- install(): Download the resources needed for your PWA application to work offline.
- activate(): Enable service worker.
Create a icon for your web app
Create icons and miniatures for your PWA application. These icons and miniatures will be displayed on the main screen of your mobile device.
You can create icons and miniatures for your PWA application using a design tool or an online icon generator.
Icons and miniatures must have the following sizes:
- Icons: 512x512 pixels
- Miniature: 192x192 pixels, 144x144 pixels and 96x96 pixels
Add Head Meta
Add the following into _document.jsx or _app.tsx, in <Head>:
<meta name="application-name" content="BunBlog" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="BunBlog" />
<meta name="description" content="With bun, you can learn and discover interesting things about web programming technologies." />
<meta name="format-detection" content="telephone=no" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="msapplication-config" content="/icons/browserconfig.xml" />
<meta name="msapplication-TileColor" content="#2B5797" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="theme-color" content="#000000" />
<link rel="apple-touch-icon" href="/static/favicons/touch-icon-iphone.webp" />
<link rel="apple-touch-icon" sizes="152x152" href="/static/favicons/touch-icon-ipad.webp" />
<link rel="apple-touch-icon" sizes="180x180" href="/static/favicons/touch-icon-iphone-retina.webp" />
<link rel="apple-touch-icon" sizes="167x167" href="/static/favicons/touch-icon-ipad-retina.webp" />
<link rel="icon" type="image/webp" sizes="32x32" href="/static/favicons/favicon-32x32.webp" />
<link rel="icon" type="image/webp" sizes="16x16" href="/static/favicons/favicon-16x16.webp" />
<link rel="manifest" href="/manifest.json" />
<link rel="mask-icon" href="/static/favicons/safari-pinned-tab.svg" color="#5bbad5" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:url" content="https://bunhere.com" />
<meta name="twitter:title" content="BunBlog" />
<meta name="twitter:description" content="With bun, you can learn and discover interesting things about web programming technologies." />
<meta name="twitter:image" content="/static/favicons/android-chrome-192x192.webp" />
<meta name="twitter:creator" content="@EmmaNgo" />
<meta property="og:type" content="website" />
<meta property="og:title" content="BunBlog" />
<meta property="og:description" content="With bun, you can learn and discover interesting things about web programming technologies." />
<meta property="og:site_name" content="BunBlog" />
<meta property="og:url" content="https://bunhere.com" />
<meta property="og:image" content="/static/favicons/apple-touch-icon.webp" />
Link to your app's installation page
These links will allow users to install your PWA app on their mobile devices. You can add installed links to your website by using the <link> tags.
Example:
<link rel="manifest" href="manifest.json">
<link rel="icon" type="image/webp" href="icon.webp">
<link rel="shortcut icon" type="image/webp" href="icon.webp">
Verifying PWA validity & Tips
After following these steps, you can check if your PWA application is working properly. To do this, visit your website then Inspect (F12) > Lighthouse tab > Analyze page load. If the PWA application works correctly, you will see a message that the application has been installed.
Here are some additional tips for building a PWA from the available web:
- Using modern technologies: PWA is built on modern technologies, such as HTML5, CSS3 and JavaScript. If your website is built using older technologies, you may need to update it to support PWA.
- Mobile optimization: PWA must be mobile optimized. This means that your website must be responsive and designed for use on a small screen.
- Add PWA Features: You can add additional PWA features to your application, such as push notifications and offline access
How to download a Progressive Web App?
Here is how to download a Progressive Web App on an Apple
For Android
End.
References: web.dev
I am always looking for feedback on my writing, so please let me know what you think. ❤️