In this step by step guide we'll walk you through creating a Progressive Web App using WordPress. For more information about PWA and their benefits, check out our article about PWAs.
Sign in to your Shifter account
Start your WordPress site
Click [Start WordPress] button to boot up WordPress.
Navigate to the WordPress Plugins page, Search, install and activate PWA plugin
Search PWA XWP and install the PWA plugin and activate it.
What does the PWA Plugin do?
This PWA plugin automatically inserts rel="manifest" into header section once it's activated.
<link rel="manifest" href="https://a5428a7f-f529-4fab-8b8c-76877f696f7f.static.getshifter.net/wp-json/app/v1/web-manifest">
Check "Cache visited pages in the browser so visitors can re-access them when offline." under Offline browsing to cache contents visitors' webbrowser.
Build an artifact and deploy
After activating the PWA plugin, go back to Shifter console then click [Build Deploy] to begin creating a static version of your WordPress site and deploy.
If you've already activated auto-deploy, when your artifact is ready it will automatically be published after it's generated.
If you do not have auto-deploy enabled, you'll need to deploy the newly created artifact.
Check the PWA app manifest
PWAs include a file called a manifest. This is where the information about your Progressive Web App is stored.
There are a few ways to confirm your manifest file is there.
Using Lighthouse by Google (Recommended)
Lighthouse by Google is similar to Google PageSpeed Insights (but better) as it's actively developed and offers up more data.
Using Lighthouse requires their Google Chrome Extension, the service is free and it will offer up more info than just PWA support.
Using Google Chrome or your browsers dev tools.
To check manifest, open your site with Google Chrome.
Click [View] --> [Developer] --> [Developer Tools], then click [Application].
There you will see a Manifest tab displaying the PWA information.
That's all for setting up PWA on Shifter!