Tutorial: How to Implement Voice Search into PWA

Searching by voice has become an integral part of the modern web experience, providing users with a hands-free and efficient way to interact with applications. Integrating voice search into your Progressive Web Application (PWA) can enhance user engagement and accessibility. 

In this guide, we will explore the benefits of voice search and provide a step-by-step tutorial on how to implement it into your PWA seamlessly.

What is Voice Search?

Searching by voice is a technology that allows users to interact with a computer or application using spoken language rather than traditional keyboard inputs. Users can issue commands, perform searches, or navigate through an interface by speaking naturally.

Benefits of Voice Search

While it may not be a novel concept for tech enthusiasts, not everyone knows its advantages and its crucial role in enhancing the customer experience, particularly in online stores. Here are some main benefits of searching by voice function in your PWA:

1. Convenience and Speed

• Users can perform actions hands-free, making it convenient for multitasking.
• Voice commands often lead to faster interactions compared to typing.

2. Accessibility

• Your PWA will be more accessible to users with physical disabilities.
• It provides an inclusive experience for a broader audience.

3. Enhanced User Experience

• It adds a modern and innovative touch to your PWA, impressing users.
• It aligns with the evolving user expectations for seamless and intuitive interactions.

How to Implement Voice Search into PWA

1. Install environment

Initially, ensure your Node.js version surpasses 14 before commencing the implementation of this feature. We will use the library react-speech-recognition and you need to run the command below to install the library to project PWA.

npm i react-speech-recognition

Anh then, import the necessary regenerator-runtime into your project’s root index.js file:

import GeneratorRuntime from 'regenerator-runtime';

2. Integrate Voice Search Component

To add the voice search component to your PWA’s search bar, making it an integral part of the user experience, you can apply the command below:

// Inside your search bar component file
module.exports = targetables => {
   const searchBar = targetables.reactComponent('{path to your search bar component}');

   const voiceSearch = searchBar.addImport(
       `VoiceSearch from {path to your voice search component}`
   );
   searchBar.insertAfterJSX('SearchField', `${voiceSearch}`);
};

And you will receive the result similar to the image below:

About the component Voice Search, you need to create it using a button that triggers voice recognition, offering a customizable and engaging experience:

import React, { useMemo } from 'react';
import { useVoiceSearch } from '../../talons/useVoiceSearch';
import Button from '@magento/venia-ui/lib/components/Button';
import { useStyle } from '@magento/venia-ui/lib/classify';


const VoiceSearch = props => {
   const classes = useStyle(props.classes);
   const talonProps = useVoiceSearch();
   const {
       browserSupportsSpeechRecognition,
       startListening,
       stopListening,
       listening,
   } = talonProps;


   const content = useMemo(() => {
       if (listening) {
           return <p onClick={stopListening}>...</p>;
       }


       return (
           <Button classes={classes} onClick={startListening}>
               {text of icon voice search here} 
           </Button>
       );
   }, [listening, startListening, stopListening]);


   if (!browserSupportsSpeechRecognition) {
       return null;
   }


   return <div className={classes.root}>{content}</div>;
};


export default VoiceSearch;

Next, we also need to create Talons Voice Search. This talon encapsulates the necessary logic to seamlessly integrate voice search capabilities into your PWA, enhancing the user experience with hands-free interaction.

To do this, we will use hook useSpeechRecognition. This hook encompasses several key values that play crucial roles in this functionality:

• listening: Indicates whether the voice recognition system is actively running or not.
• transcript: Represents the state value returned during the search process.
• browserSupportsSpeechRecognition: Checks whether the user’s browser supports voice recognition.

Additionally, the language value is employed to verify the language used in voice interactions.

import SpeechRecognition, {
   useSpeechRecognition
} from 'react-speech-recognition';
import { useCallback, useEffect } from 'react';
import { useQuery } from '@apollo/client';
import { useFieldApi, useFormApi } from 'informed';


const STORE_CODE_MAPPING_LANGUAGE = {
   default: 'en-US',
   en: 'en-US',
   th: 'th-TH'
};


export const useVoiceSearch = props => {
     const language = STORE_CODE_MAPPING_LANGUAGE[default];
   const searchFieldApi = useFieldApi('search_query');
   const { submitForm } = useFormApi();




   const {
       listening,
       transcript,
       browserSupportsSpeechRecognition
   } = useSpeechRecognition();


   const startListening = useCallback(() => {
       return SpeechRecognition.startListening({
           language
       });
   }, [SpeechRecognition, language]);


   const stopListening = useCallback(() => {
       submitForm();
       return SpeechRecognition.stopListening();
   }, [SpeechRecognition, submitForm]);


   useEffect(() => {
       searchFieldApi.setValue(transcript);
   }, [transcript]);


   useEffect(() => {
       if (!listening) {
           submitForm();
       }
   }, [listening]);


   return {
       startListening,
       stopListening,
       listening,
       browserSupportsSpeechRecognition
   };
};

Conclusion

Beyond modernizing your application, voice search aligns seamlessly with the evolving expectations of today’s digital users. By harnessing the power of voice technology, you not only enhance accessibility but also unlock new possibilities that can propel your PWA to new heights of success. 
With a decade of expertise, Tigren has a rich history of successfully implementing this feature across numerous websites. Feel free to reach out to us if you aspire to deliver an exceptional experience for your customers as well.