FAQ
General questions
What is Progressive Web Application (PWA)?
Progressive Web Apps (PWAs) are web applications that are regular web pages or websites, but can appear to the user like traditional applications or native mobile applications.
What are the costs of using Appify PWA?
You can use each functionalities of this application for $9.99 per month. There is no extra fees on additional costs.
Do you offer a trial period?
Our app if free for development stores and for real stores we offer 14-day free trial to check our application.
Installation and uninstallation
How to install application manually?
- Go to "Online Store" -> "Themes" and click "Edit code" in actions dropdown on active theme.
- Open theme.liquid file (the file is located in the Layout directory).
- Copy below code and paste it before </head> tag. Save the file.
{% include 'appify-pwa-snippet' %}
- Go to "Snippets" directory and click "Add a new snippet". Call it appify-pwa-snippet
- Copy below code and paste it to created snippet. Save the file.
<link rel="manifest" href="/apps/appify/manifest.json">
- Done, now you can verify your installation.
Below you can see video how to do this:
How can I verify app is correctly installed?
Go to app dashboard and click "Verify installation" in "Help" dropdown in upper-right corner. Wait for a check. If your installation is correct, you should see green message with this information.
Below you can see video how to do this:
How can I uninstall the app?
- Go to Apps and click trash icon on the right from Appify PWA logo and name.
- Go to "Online Store" -> "Themes" and click "Edit code" in actions dropdown on active theme.
- Open theme.liquid file (the file is located in the Layout directory).
- Find and remove code shown below (it should be after <head> tag). Save the file.
{% include 'appify-pwa-snippet' %}
- Go to Snippets directory and find file with name "appify-pwa-snippet.liquid".
- Open this file and click "Delete" button in upper-right corenr.
- That's all, Appify PWA is fully uninstalled.
Below you can see a video on how to do it:
App settings and features
How add to home screen works?
Add to home screen allows your customers adding your store to home screens on their mobile devices. Below you can see video how this works on Android devices:
How subpage caching works?
When the user is viewing your store, the whole page is saved. On next viewing page is being served from browser, not from server. This allows to browse the page faster and even offline. Below you can see video how this works:
What is precache and how this works?
If you don't want use subpage caching for some reasons (for example you pages are often updated and you don't want your customers see outdated data) you can use precache to cache some assets of your website (CSS stylesheets, JavaScript code or images). After adding URL of this assets to precache, when your customers visit your store, their browsers automaticly cache this assets and on each next subpage serve it from cach, not from server. This can speed up your website.
How to add URLs of assets to precache?
- Open your home page source (open home page in browser and click CTRL/CMD + U)
- In source code find URLs of assets (should start with //cdn.shopify and finish with big number)
- Copy this URLs and paste it to precache field (URLs should be comma-separrated)
Below you can see video how to do this:
How to set up events tracking?
If you use some tracking service on your site, for example Google Analytics, you can add events tracking when your customers add your app to home screen or open it from home screen. Only you must to do is add tracking code in app settings. More about how to get tracking code you can read here https://developers.google.com/analytics/devguides/collection/analyticsjs/events.
Below you can find the code to paste into the appropriate fields (if you are using Google Analytics):
Tracking code to execute when customer install PWA:
gtag('event', 'installed', {
'event_category': 'PWA'
})
Tracking code to execute when customer open PWA:
gtag('event', 'opened', {
'event_category': 'PWA'
})
How can I check Google PWA Audit?
Open online store in Chrome browser, open Developer Tools (F12) and go to Audits tab. Next check "Progressive Web App" Audit and click "Run Audits". The result should be 100 / 100 points. Below you can see video how to do this: