Make your website like an application with PWA

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](https://web.dev/learn/pwa)

Why are PWAs necessary?

You can see that 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:

• Instagram
• X (Twitter)
• Spotify
• Pinterest

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. (source)

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.

next build

Add manifest.json and service worker.js files

• The manifest.json file contains information about your PWA application, such as your 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.png",
            "type": "image/png",
            "sizes": "192x192"
        },
        {
            "src": "/images/icons-512.png",
            "type": "image/png",
            "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.png",
                    "sizes": "192x192"
                }
            ]
        }
    ],
    "description": "Author information",
    "screenshots": [
        {
            "src": "/images/screenshot1.png",
            "type": "image/png",
            "sizes": "540x720",
            "form_factor": "narrow"
        },
        {
            "src": "/images/screenshot2.jpg",
            "type": "image/jpg",
            "sizes": "720x540",
            "form_factor": "wide"
        }
    ]
}

The service worker.js file must contain the following function calls:

• register(): Register a service worker with the web browser.
• install(): Download the resources needed for your PWA application to work offline.
• activate(): Enable service worker.

Create an 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.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/static/favicons/touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/static/favicons/touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="167x167" href="/static/favicons/touch-icon-ipad-retina.png" />

<link rel="icon" type="image/png" sizes="32x32" href="/static/favicons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/static/favicons/favicon-16x16.png" />
<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.png" />
<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.png" />

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/png" href="icon.png">
<link rel="shortcut icon" type="image/png" href="icon.png">

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.

pwa valid

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 do I download a progressive web app?

Here is how to download a Progressive Web App on an Apple

download ios

For Android

download android

End.

References: https://web.dev/articles/what-are-pwas

You can find all of my blog posts on my website: bunhere.com

I am always looking for feedback on my writing, so please let me know what you think. ❤️