Bunhere

Create a Tarot View App with the Gemini API in just 15 minutes.

Emma Ngo — Mon, 03 Jun 2024 03:43:07 GMT

It's a little old, but I still believe I'm GenZ, and when it comes to trouble, GenZ always finds answers from the universe 🤓.

I was introduced to a friend to watch the Tarot, but because he was waiting too long to watch, I happened to see a prompt to watch Tartot on Tiktok. I tried through both ChatGPT and Gemini and found output on both sides attributed to a problem that we're experiencing 😝.

Anyone who is too serious can drop this content. All three of you, cosmic energy!

Ideas

The contents of the prompt are like this:

Generate 3 random numbers between 1 and 78. Next, look up the corresponding tarot cards, and their meanings. Finally, put together an overall reading for me, based on the 3 cards. Answer in Vietnamese

And here's what we got (it's a little bit different because I added a note to show the results in Vietnamese):

In conclusion, both results suggest that we need to "see and listen to the inner voice".

From the idea that I decided to write an app instead of randomly taking three of the 78 Tarot cards, I showed 78 cards out (of course a random show), and then everyone picked out three cards with three numbers. Then re-adjust the prompt call API to get the results from Gemini (because the installation from the GeminiAPI is quite simple) and then return them to the user.

That way, people can be more proactive in choosing cards.

Deploy

Interface

Techstack: I've been using NextJS a lot lately, because it's easy to deploy as well. (Vercel).

First, we need to render the layout of the 78 cards for the user to play.

Resources

To get the UI of your Tarot cards up Dribbble search, DriBBble is the website that the designer visits for ideas.

After we download the Tarot set, we choose to upload it and access it via S3 (you can store it right in src).

In the image section, we go through the data section, create a data set of tarot cards in the form of JSON queries.

Note: You can skip this section and initialise an array from 1-78 for processing, because what we need is three numbers "picked" but we want to show more information about the cards so we create this json data set.

And of course, we generate data by using Gemini 🤪. I'm using the prompt:

Create a data set of objects containing the contents of all tarot cards. The main contents of the objects are the id, the name of the card, the main and reverse meaning and further description of the cards. To help us create additional contents for the card, the src is '/[alias-name-of-the-card].png'.

Result:

[
    {
        "id": 0,
        "name": "The Fool",
        "mainMeaning": "Beginnings, naivety, spontaneity, freedom.",
        "reverseMeaning": "Restraint, recklessness, risk.",
        "description": "The Fool represents a new beginning, believing in the future, inexperienced, not knowing what's going to happen, lucky beginners, transformers, and believers in the universe.",
        "src": "/the-fool.png",
        "type": "major-arcana"
    },
    {
        ...
    },
    ...
]

Full source: cards.json

Random Tarot Cards

Write the function to randomly display the order of the tarot cards.

import { Card } from "@/types/card";

export function shuffleArray<Card>(array: Card[]): Card[] {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

Suhffle source: src/common/shuffle.ts

Random display of tarot cards

import { useEffect, useState } from "react";
import tarotCards from "@/data/cards.json";
import TarotCard from "@/components/TarotCard";
import { shuffleArray } from "@/common/shuffle";
import { Card } from "@/types/card";

...
const rootCards: Card[] = tarotCards
const [cards, setCards] = useState(rootCards)

useEffect(() => {
    setCards(shuffleArray(rootCards)) // Call shuffleArray when loading
}, [rootCards])

const handleRefresh = () => {
    setCards(shuffleArray(rootCards)) // Call shuffleArray when refreshing pick
}

return (
    <>
        {cards && cards.map((card) => (
            
        ))}
        
    
);

Page source: src/app/page.tsx

Logic Processing

Connect to Gemini API

Step 1: Go to aistudio.google and create the API Key. Add to file .env

Details:

NEXT_PUBLIC_S3_ENDPOINT=sAIza...ICYp

Settings:

yarn add @google/generative-ai

Step 2: Edit Prompt

With 3 cards: [card], [card 2], and [card 3]. Next, look up the corresponding tarot cards and their meanings. Finally, put together an overall reading for me based on the three cards.

Step 3: Process code to connect to GeminiAPI

You can learn more about using GeminiAPI with document.

Note: You need to note the billing information in order to process it accordingly. Because I'm using account FREE, there's a 15 request/minute limit, so I created a request limit API MAX_CALLS_PER_MINUTE.

'use client'
import { useEffect, useState } from "react"

import tarotCards from "@/data/cards.json"
import { shuffleArray } from "@/common/shuffle"
import { Card } from "@/types/card"

import TarotCard from "@/components/TarotCard"
import DefaultCard from "@/components/DefaultCard"

import { GoogleGenerativeAI } from "@google/generative-ai"

const API_KEY = process.env.NEXT_PUBLIC_GEMINI_API_KEY || ''
const MAX_CALLS_PER_MINUTE = 10

export default function Home() {
  const rootCards: Card[] = tarotCards
  const [cards, setCards] = useState(rootCards)
  const [pickCards, setPickCards] = useState([])
  const [prompt, setPrompt] = useState("")
  const [result, setResult] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const [callCount, setCallCount] = useState(0)
  const [timer, setTimer] = useState(null)

  useEffect(() => {
    setCards(shuffleArray(rootCards))
  }, [rootCards])

  useEffect(() => {
    if (pickCards.length > 2) { // Pick enough 3 cards
      setPrompt(`With 3 cards: ${pickCards[0]}, ${pickCards[1]}, and ${pickCards[2]}. Next, look up the corresponding tarot cards and their meanings. Finally, put together an overall reading for me based on the three cards.`)
    }
  }, [pickCards, cards])

  const handlePickCard = (cardId: number) => {
    if (pickCards.length > 2) {
      console.log('You only can choose 3 cards')
      return
    }
    setPickCards([...pickCards, cardId])
  }

  const handleResetPick = () => {
    setCards(shuffleArray(rootCards))
    setPickCards([])
    setPrompt("")
    setResult("")
  }

  useEffect(() => {
    if (timer === null) {
      const newTimer = setInterval(() => {
        setCallCount(0)
      }, 60000) // Reset count every 60 seconds
      setTimer(newTimer)

      // Clean up timer on component unmount
      return () => clearInterval(newTimer)
    }
  }, [timer])

  const handleReadCards = async () => {
    if (prompt === "") {
      alert('Please choose all three cards!')
      return
    }

    if (callCount >= MAX_CALLS_PER_MINUTE) {
      alert('System overload! Please wait a minute and then try again.')
      return
    }

    setCallCount(callCount + 1)
    await handleSendPromptToGemini(prompt)
  }

  const handleSendPromptToGemini = async (prompt: string) => {
    setIsLoading(true);
    try {
      const genAI = new GoogleGenerativeAI(API_KEY)
      const model = genAI.getGenerativeModel({ model: "gemini-pro" })

      const result = await model.generateContent(prompt)
      const response = result.response
      const text = response.text()

      setResult(text)
    } catch (error) {
      setResult('Failed to fetch response.')
    }
    setIsLoading(false)
  }

  return (
    
      {isLoading &&
        loading...
      }
      
      {result &&
        {result}
      }
      
        {cards && cards.filter((card) => !pickCards.includes(card.id)).map((card: Card) => (
          
            
          
        ))}
      
      

      
    
  )
}

Page source: src/app/page.tsx

Deloy

Create repo and push your project to Github
Log in to Vercel if you already have an account; connect to your Github account.
- Select New project
- Select repo from your Github account
- Deloy project (if failed in Settings > Environment > Add variable NEXT_PUBLIC_GEMINI_API_KEY and corresponding value)

Details: Deloy Vercel For Github

Demo

Access tarot1.bunhere.com for the demo. Official edition at tarot.bunhere.com

View full source code here.

End.

Happy coding!!! 👩🏼‍💻

References:

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

Firebase Genkit — AI Application by Javascript/Typescript

Emma Ngo — Tue, 28 May 2024 15:54:42 GMT

Google recently launched the Firebase Genkit as an open source framework to build, deploy, and monitor AI applications.

Overall, you guys are constantly launching AI-related technology, and you see it's just like an arms race, everyone wants their products to be better than others from OpenAI with the GTP-4o that was just launched, and Google with the Gemini that's parallel to the Build with AI series of events to learn technology with Vertex AI...

Back to the main content of this article, Genkit is used to create custom content creation applications, semantic searches, input processing, and answering questions based on the data you set up, automated decision-making, command coordination, and more. You can find out more on Firebase's home page about Genkit attached here.

Genkit currently supports JavaScript/TypeScript development (Node.js).

Key Features

From the information page of Firebase Genkit there are highlights 10 features that are considered as key features so in this article let's find out what those 10 features are!

1. Many models, one interface

That means you can use this feature to integrate image recognition models, text translation models, and text creation models into the same application.

2. Structured output

This means that the data returned from Genkit will be a structured output, so returning it will make it easier for you to handle the data. For example, when using an image recognition model, the results you can get are information about the objects detected in the image, including location, size, etc.

import { generate } from "@genkit-ai/ai";
import { geminiPro } from "@genkit-ai/vertexai";
import { z } from "zod";

const LocationSchema = z.object({
  name: z.string().describe('Location name'),
  address: z.string().describe('Address'),
  reviews: z.array(z.object({
    name: z.string(),
    goodReview: z.number().describe('Number of good review'),
    badReview: z.number().describe('Number of bad review'),
  })).describe('3 properties that model can be response!')
});

const createLocation = defineFlow({
    name: "createLocation",
    inputSchema: z.string(),
    outputSchema: LocationSchema,
  },
  (habitat) => {
    const result = await generate({
      model: geminiPro,
      prompt: `You were created successfully for the location: ${habitat}.`,
      output: {schema: LocationSchema}
    });
    // strongly typed and ready to go
    return result.output();
  }
)

console.log(await createCreature("a developer conference"));

3. Multimodal, multimedia

Genkit supports working with different types of input and output data, such as text, images, audio and video. Simply understand, this feature can be applied to create an image object recognition app, translate text into speech, and create music based on text.

import { imagen2, geminiProVision } from '@genkit-ai/vertexai';
import { generate } from '@genkit-ai/ai';

const imageResult = await generate({
  model: imagen2,
  prompt: 'Create image include time, location and history information of that location',
});
const generatedImage = imageResult.media();

const descriptionResult = await generate({
  model: geminiProVision,
  prompt: [
    {
      text: 'What is the time, location and history information the image express?',
    },
    { media: generatedImage },
  ],
});
console.log(descriptionResult.text());

4. LLM

Genkit provides special tools for the LLM, such as the ability to access memory and context to generate better results. For example, when you build a chatbot, you can apply this feature to improve accuracy and fluidity for outputs based on the LLM you provide in the application.

import { generate, defineTool } from "@genkit-ai/ai";
import { geminiPro } from "@genkit-ai/vertexai";
import { z } from "zod";

const createReminder = defineTool({
  name: "createReminder",
  description: "Create Reminder",
  inputSchema: z.object({
    time: z.string().describe('ISO timestamp string, e.g. 2024-04-03T12:23:00Z'),
    reminder: z.string().describe('The content of reminder'),
  }),
  outputSchema: z.number().describe('ID of reminder'),
  (reminder) => db.reminders.create(reminder)
});

const searchNotes = defineTool({
  name: "searchNotes",
  description: "Use this to find the person or the note content",
  inputSchema: z.string().describe('the search query'),
  outputSchema: z.object({notes: z.array(NoteSchema)}),
  (query) => db.notes.search(query)
});

const result = await generate({
  model: geminiPro,
  tools: [createReminder, searchNotes],
  prompt: `
  You're a note assistant. Use the tools available, try to answer the question.
  If you create a reminder, describe your reminder in writing as a feedback.

  Question: I've recorded my appointment with my friend - can you put a time reminder?
  `
});
console.log(result.text());

5. Manage Prompt with Dotprompt

Dotprompt is an integrated tool in Genkit that can easily create, manage and test prompt for machine learning models. In the document on the Firebase page, it explains that Dotprompt is a reminder file format that allows you to put it all into a single file for easier organization and checking.

Note: Prompt is a text that is used to guide the model on the task you want it to perform.

The key is to use Dotprompt to create different prompt for text-generating patterns such as "Write a status sentence when traveling at sea to post a photo on Facebook" or "Writ an article to promote the Google IO 2024 event in Ho Chi Minh City on June 16, 2024".

---
model: vertexai/gemini-1.0-pro
config:
  temperature: 0.9
input:
  schema:
    properties:
      location: {type: string}
      time: {type: string}
      name: {type: string}
    required: [location]
  default:
    location: Ho Chi Minh city
---

Google IO 2024 is Google's upcoming highlight event will come to {{location}}.  

For special guests {{name}} {{/if}}{{#if time}} occurred at the time {{time}}{ {/ if}}.

6. Run flows locally

Genkit allows you to run local application flows on your computer without deploying applications to the Cloud, making it easier for you to check and fix bugs during development.

7. Inspect traces

Debugging complex, multi-step workflows with AI can be difficult due to randomness and hidden processes. Genkit provides tools to track your application. Tracks are detailed records of how your application interacts with Firebase services and machine learning models. This helps you debug your application and improve performance.

If you're building a chatbot, you can see your chatbot processing user requests and identifying any accuracy or performance issues.

Note: It's hard to imagine the interpretation in words, so for a better understanding, you can see how it works based on the descriptive image here

8. Open & extensible

Simply put, Genkit is designed to enable scaling and customization so it can add new functions and integrate third-party services. For example, it's possible to use third-party voice recognition services to develop applications.

Or you can use Genkit and then develop it into a separate plugin and then upload it to npm.

9. Built for production

Easily expand your streams to any platform, Genkit is fully equipped with OpenTelemetry and customizes metadata to monitor production.

Additionally, there are official Google Cloud and Firebase plugins that allow you to export Google Cloud activity data and integrate firebase services such as Cloud for FireBase, Firebaze Authentication, Application Testing, and Firestore.

To illustrate this feature, imagine you're developing an app like Google Trans. This application will have to handle a huge volume of translation requests and in the long run this application will emerge and there will be a huge number of users you need to respond to how to keep your application running stable with such a large volume of users instead of thinking and solving such problems Genkit will take care of this.

10. Authorization & security handling

When building any public application, it is important to protect the data stored in your system. When it comes to LLM, there is a need for further in-depth to ensure that the model only accesses the necessary data, the tool call commands are defined to the appropriate range for the user calling LLM and the streams are only called by the validated client applications.

Genkit supports a variety of authentication methods, such as Firebase and OAuth, combined with authorization policies and contexts management mechanisms.

The Genkit app creates an application that users need to log in to use and decentralize content that can be used by that user.

import { defineFlow, runFlow } from '@genkit-ai/flow';

export const selfSummaryFlow = defineFlow(
  {
    name: 'selfSummaryFlow',
    inputSchema: z.object({uid: z.string()}),
    outputSchema: z.string(),
    authPolicy: (auth, input) => {
      if (!auth) {
        throw new Error('Authorization required.');
      }
      if (input.uid !== auth.uid) {
        throw new Error('You may only summarize your own profile data.');
      }
    }
  },
  async (input) => { ... });

Review

Genkit is a new technology introduced recently, so the above article is based on the main information on the page Firebase documents and edited in my own way 😎, so if there are any errors, please contribute to the comments below.

I don't have time to study Genkit in depth either, and if you have any articles or information about the Firebase Genkit, please do not hesitate to share it below!

References: firebase.google.com/docs/genkit

Author: bunhere.com

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

License Your Code Right: A GitHub Must-Do

Emma Ngo — Wed, 31 Jan 2024 07:35:40 GMT

Introduction

When you create a repo on GitHub, you will see the license option for your project. Although license selection is not mandatory, it can be important to determine how others can use your source code.

Has anyone ever wondered what this license means?

A license is a legal document that defines the rights of users to the source code of a project. There are many different types of licenses, each with different rights and restrictions.

GitHub Licenses

Each type of license has its own terms and conditions, but they are generally divided into two main categories.

Copyleft licenses require that all copies of the source code be distributed under the same license. This means that software licensed under GPL is always open source and free.
Permissive licenses allow users to use and distribute the source code in any way they want, as long as they give credit to the author.

When choosing a license, you need to consider the following factors:

How do you want others to be able to use your source code? Can they use it in commercial projects? Can they modify and redistribute your source code?
How do you want to protect your copyright (intellectual property)? Some licenses can help you protect your copyright better than others.

Popular GitHub Licenses

Apache License 2.0

Type: Permissive

Allows: Others to use, copy, modify, distribute, and sell your source code without your permission. However, this license requires you to give credit to the author of the source code.

Commonly used by: Apache software projects, Android, OpenSSL, etc.

GNU General Public License v3.0

Type: Copyleft

Allows: Others to use, copy, modify, distribute, and sell your source code. However, this license requires that any software built on top of your source code also be licensed under GPLv3.

Commonly used by: Linux, GNU utilities, LibreOffice, etc.

MIT License

Type: Permissive

Allows: Others to use, copy, modify, distribute, and sell your source code without your permission. The main condition is to keep the copyright notice and not make any warranty.

Commonly used by: jQuery, Ruby on Rails, Node.js, etc.

BSD 2-Clause "Simplified" License

Type: Permissive Allows: Others to use, copy, modify, distribute, and sell your source code without your permission. This license requires you to give credit to the author of the source code, but does not require you to distribute your source code under the same license. Commonly used by: BSD operating system, OpenBSD, SQLite, etc.

BSD 3-Clause "New" or "Revised" License

Type: Permissive

Allows: Others to use, copy, modify, distribute, and sell your source code without your permission. Expanding from BSD 2-Clause, this license requires you to give credit to the author of the source code and distribute your source code under the same license, as well as requiring you not to use the names of the authors or organizations to promote the product.

Commonly used by: BSD operating system, Lua, Nginx, etc.

Boost Software License 1.0

Type: Permissive

Allows: Others to use, copy, modify, distribute, and sell your source code without your permission. This license requires you to give credit to the author of the source code, but does not require you to distribute your source code under the same license. Similar to MIT, but has an additional condition to avoid using the name, logo, or trademark of the authors or development organizations to promote the product.

Commonly used by: Boost libraries, many C++ projects

Creative Commons Zero v1.0 Universal

Type: Public

Allows: Others to use, copy, modify, distribute, and sell your source code without your permission. Why is the type of this license not under the two definitions above? It belongs to the public domain type, which means that all copyright and related rights are waived, maximizing the ability to reuse without restrictions.

Commonly used by: Creative works, open data, scientific publications

Eclipse Public License 2.0

Type: Copyleft

Allows: Others to use, copy, modify, distribute, and sell your source code without your permission. This license requires you to give credit to the author of the source code, but does not require you to distribute your source code under the same license. Commonly used by: Eclipse IDE, projects in the Eclipse Foundation.

GNU Affero General Public License v3.0

Type: Copyleft

Allows: Others to use, copy, modify, distribute, and sell your source code without your permission, but they must also distribute their source code under the same license.

Meaning: Software licensed under AGPL is always free and open source software, even if it is distributed as a SaaS application.

GNU General Public License v2.0

Type: Copyleft

Allows: Others to use, copy, modify, distribute, and sell your source code without your permission, but they must also distribute their source code under the same license.

Meaning: Software licensed under GPL is always free and open source software.

GNU Lesser General Public License v2.1

Type: Copyleft

Allows: Others to use, copy, modify, distribute, and sell your source code without your permission, but only in free software applications. Meaning: The modified code can be modified and distributed, even in proprietary software, as long as the modified code is clearly separated from the proprietary components.

Mozilla Public License 2.0

Type: Permissive

Allows: Users to use, modify, and distribute the code, for both commercial and non-commercial purposes. Meaning: This license is compatible with other open source licenses, including GPL and Apache.

Commonly used by: This license is commonly used for web-based and browser-related software.

The Unlicense

Allows: Code licensed under The Unlicense can be used in any software project, for any purpose. The code can also be modified and distributed without the author's permission.

Meaning: This license allows for unlimited use, modification, and distribution of the code, even for commercial purposes.

Add license to your project

After you have selected license, you can add license to your repo using the LICENSE.md file. This file should contain the name of the license, the version of a license and a link to the full text of the licence.

For example: If you choose to use MIT License, you can add the following LICENSE.md file to your repo:

# MIT License
Copyright (c) bunhere.com

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

End

By choosing the right license for your repo, you can help ensure that your source code is used the way you want.

Research more here: licensing-a-repository

Find me: bunhere.com

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

Make your website like an application with PWA

Emma Ngo — Sun, 29 Oct 2023 17:00:00 GMT

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:

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

![next build(https://miro.medium.com/v2/resize:fit:1184/format:webp/1*HOK7eY_6wHrQWyIjYFwdTw.png)

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 :

"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 tags.

Example:

"manifest" href="manifest.json">

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. ❤️

Follow me on:

Website: bunhere.com
Medium: bunhere.medium.com