Definitions
Progressive Web Application (PWA): A Progressive Web Application is a website that looks and behaves as if it is a mobile app.
Background
Welcome to the PWA User Manual. This manual will cover how to install on different browsers, how to update your desktop application, as well as FAQs regarding PWA’s.
Table of Contents
Process - How to Install
This section will include a full browser support list for reference and how to install in these various environments.
Browser Support List
Apple Desktop
Chrome - Yes
Edge - Yes
Firefox - No
Safari - No
Windows Desktop
Chrome - Yes
Edge - Yes
FireFox - No
Safari - No
Apple Mobile/Tablet
Chrome - No
Edge - No
Firefox - No
Safari - Yes
Android Mobile/Tablet
Chrome - Yes
Edge - No
Firefox - No
Safari - No
Desktop Installation
Chrome
The following steps for Chrome are the same whether on Windows or Apple
1. Upon opening the website on the browser, there will be a new symbol in the address bar which is the ‘Install’ button:
2. Click the ‘Install’ button.
3. Accept the prompt to ‘Install’ on the ‘Install app?’ modal.
4. The application will launch into the open applications. It can be found on the taskbar / dock .
5. The desktop application is ready to use as usual.
Edge
The following steps for Edge are the same whether on Windows or Apple
Upon opening the website on the browser, click the button with three dots on the top right.
Select the ‘Apps’ tab.
The ‘Apps’ tab will open a drawer
Select ‘Install OrderGrid’
5. Accept the prompt to ‘Install’ on the ‘Install OrderGrid app’ modal.
6. The app is now installed.
7. There is an automatic prompt to set preferences for the ‘pin-to / shortcuts’ and ‘Auto-start on device login’.
8. Select allow once preferences have been saved.
9. The desktop application is ready to use as usual.
Mobile/Tablet Installation
Android
The following steps are consistent for both mobile devices and tablets.
Chrome
Upon opening the website on the browser, click the button with three dots on the top right.
Select the ‘Install App’’ button - it will have this symbol:
Accept the prompt to ‘Install’ on the ‘Install app’ modal.
4. Accept the prompt to ‘Add to home screen’ on the ‘Chrome’ modal.
5. The mobile application is ready to use as usual.
Apple
The following steps are consistent for both iPhones and iPads.
Safari
Upon opening the website on the browser, select the ‘share’ symbol under the address bar:
Select the ‘Add to Home Screen’ option in the menu with this symbol:
3. Select the ‘Add’ on the ‘Add to Home Screen’ menu. Here the name can be set to the user's preference, and the default is ‘OrderGrid’.
4. The mobile application is ready to use as usual.
What to Expect for Updates
This section will include how to update your desktop application and what the expected behaviour is.
Once the application is installed there may be updates in the future. To ensure the update is received a notification will be sent to the application.
It will appear in the bottom right hand corner of the application:
Upon selecting ‘Update’ the application will install the update and reload.
The application is now up-to-date.
Good To Know:
If ‘Update’ is not selected, and the user continues using the application, on the next reload of the application the update will persist.
The purpose of this behaviour is to offer the user some control.
Example:
The user is filling out a ‘New Order’ form. During this process the user gets a notification about an ‘Update’.
The user may want to delay the update until the ‘New Order’ form is completed as an update reload at that time would cause their form to be reset resulting in the user having to fill out the form again.
If the user chooses to ignore this update prompt, the application will persist the update on the next safe reload of the application. Which in this example would be once the user submits their ‘New Order’ form and the application reloads to the ‘Order’ page.
Congratulations! You have successfully installed OrderGrid as a Progressive Web App!
If you need any additional help regarding this topic, please reach out to us at info@ordergrid.com.