PWA Setup
Last updated
Was this helpful?
Last updated
Was this helpful?
PWA stands for Progressive Web Application. It is a type of application software delivered through the web, built using common web technologies including HTML, CSS, and JavaScript. It is intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices.
Progressive web App (PWA) are web applications that can be accessed through a web browser and provide a similar experience to a native mobile app. They can be used in Nexthour to provide a more seamless and engaging user experience for students.
Some ways PWA can be used in Nexthour include:
Add to Home Screen: PWAs can be installed directly onto a user's device and accessed from the home screen, just like native apps. This increases visibility and encourages users to engage with the platform more frequently.
Cross-platform compatibility: PWAs are designed to work seamlessly across different platforms and devices, including desktops, tablets, and smartphones. This ensures that Nexthour users can access the platform regardless of the device they are using.
Mobile compatibility: Mobile devices primarily rely on touch interactions, and PWAs are designed with touch-friendly interfaces.
Cost-effective: PWAs are cheaper to develop and maintain than traditional mobile apps, which can be beneficial for organizations with limited budgets.
It's worth nothing that not all Nexthour are compatible with PWA, it's important to check if the platform you are using supports this technology before implementing it. Also, it's important to test the PWA on different devices and browsers to ensure that it provides a consistent user experience across all platforms.
Note: The website is to be served from a secure (HTTPS) domain.
https://yourdomain.com/public/
Note: The trailing slash ("/") is necessary for proper directory resolution.
One reason users love apps is they generally offer better experiences than web applications. However, developing and maintaining native apps is a lot of work, not to mention the expenses involved.
If your users use different platforms (Android, iOS, etc.), you have to code your app for each platform.
PWAs, however, don’t require you to code for each platform. They were designed with the philosophy of “code once, use everywhere.” Once you code your PWA, it can be used in-browser (as a website or web app), on desktops, and on mobile devices.
Go to your project and log in as Admin.
Go to Admin Dashboard->Setting ->Site Customization ->PWA Settings.
Here, you will be able to change the PWA Settings like PWA enable or not, App Name, Theme color for header, Background color, and shortcut icon, etc.
Here, you can update the icon, and also icons size should be 512*512.
Splash icon size should be 2048*2732
App URL Like : https://yourdomain.com/public/ Change App URL Go to Dashboard->Site Customization ->PWA Settings
Splash icon size should be 2048*2732. Path: (public -> images -> icons)
for Change icons directly in files: Go to public -> images -> icons and change icons
for Change URL directly in files: go to .env and add app url its required Like:
Tips: Splash Screen works only on Apple Device.
You can watch also Video this feature
