A Progressive Web App is a web application that leverages modern web technologies to provide a more app-like experience to users. PWAs offer the following key features: Offline Access: PWAs can work offline or in low-network conditions, thanks to service workers that cache content and assets. Installable: Users can “install” a PWA on their devices,… Continue reading What is a Progressive Web App (PWA)?
Tag: pwa
Next js Authentication by credentials using APP ROUTER Method
Create .env file with the following domain URL like NEXTAUTH_URL=http://localhost:3000/ Create the route.js file app/api/auth/[…nextauth] in the following path import NextAuth from “next-auth/next”; import CredentialsProvider from “next-auth/providers/credentials”; import GoogleProvider from “next-auth/providers/google”; export const authOptions = { providers: [ CredentialsProvider({ name: “Credentials”, credentials: { username: { label: “Username”, type: “text”, placeholder: “User Name” }, password: {… Continue reading Next js Authentication by credentials using APP ROUTER Method
Build a Simple Static page in GraphCommerce – Magento PWA
Create a new route Add the page GraphQL queries required to render the layout (header, footer) Create a new file, /pages/about/about-us.tsx: export default function AboutUs() { return <>About Us</> } Add GraphQL query In /about/about-us.tsx, replace the previous code with the following: import { PageOptions } from ‘@graphcommerce/framer-next-pages’ import { StoreConfigDocument } from ‘@graphcommerce/magento-store’ import… Continue reading Build a Simple Static page in GraphCommerce – Magento PWA
Overide the product description componenet in magento PWA
In the project, create a new component that extends or replaces the default product description component. For example, you might create a custom component called CustomProductDescription: import React from ‘react’; import { useProductDescription } from ‘@magento/peregrine/lib/talons/ProductFullDetail/useProductDescription’; import defaultClasses from ‘@magento/peregrine/lib/talons/ProductFullDetail/productFullDetail.css’; import { mergeClasses } from ‘@magento/venia-ui/lib/classify’; const CustomProductDescription = props => { const classes =… Continue reading Overide the product description componenet in magento PWA
What is a fetch event in Magento PWA?
After a service worker is installed and the user navigates to a different page or refreshes, the service worker will begin to receive. A event fires every time any resource controlled by a service worker is fetched, which includes the documents inside the specified scope, and any resources referenced in those documents (for example if… Continue reading What is a fetch event in Magento PWA?
Magento PWA Setting Storefront
Setup a storefront project using yarn In your terminal, navigate to the directory where you want to install your storefront project and run yarn create @magento/pwa Select a directory for the installation cd pwa-studio-fundamentals Adding the Custom hostname and SSL Cert. yarn buildpack create-custom-origin ./ NOTE: If you encounter any errors while creating a custom… Continue reading Magento PWA Setting Storefront