WordPress to app: How to transform your WordPress websites to apps

The documentation for the miTT PWA Plugin for WordPress provides a detailed guide on how to configure the plugin's settings, with step-by-step instructions.

miTT PWA Documentation for WordPress

The following instructions will provide a comprehensive guide to setting up the miTT PWA plugin for WordPress and which WordPress app that can be installed as a mobile or desktop app. Many users believe that a PWA is exclusively a mobile app. And you, as a user, could send push notifications from the WordPress Backend. This process involves several steps, including configuring the necessary settings, installing the required plugins and setting up the PWA manifest file. Following these instructions, you can create an engaging and user-friendly WordPress app that can be easily installed on any device. So, let's create an excellent WordPress app experience for your users and convert your WordPress website to an app. miTT PWA is one of the leading PWA in Joomla and brings the background to the WordPress PWA Plugins.

Table of content

  1. Installation WordPress miTT PWA
  2. PWA General Settings
  3. Service Worker and App Scope
  4. Caching Settings
  5. Manifest
  6. Push Notifications
  7. Firebase Settings
  8. Additional
  9. Server
  10. Conclusion

Installation of the WordPress Plugin miTT PWA

The installation process of the miTT PWA plugin is the same as for any other plugin. Upload the miTT PWA zip file and active miTT PWA.

miTT PWA WordPress Plugin installieren

Once activated, you can locate the miTT PWA on the right menu bar.

Menu Bar WordPress Dashboard

Update the Service Worker

The Time Interval feature updates the Service Worker in the background. The service worker saves the static cache files using the Cache API. The service worker will delete the old files if a custom name becomes available and a new file version becomes available.

Pull To Refresh the WordPress App

As native apps know, a screen pull refreshes content and updates the saved cache.

Service Worker and App scope make any WordPress app possible

To hold the WordPress installation clean, the Service Worker will be located the Service Worker in the miTT PWA plugin folder. This needs settings to the Apache or NGINX server. Occasionally, you cannot access these settings to overwrite the service worker. In this case, the service worker will be saved in the root folder.

The app can be accessed at domain.com/app instead of domain.com. The PWA is located below the root folder "app".

Debug Mode and unregister Service Worker

The browser's debug mode displays console.log to identify errors. If you no longer require the app, you may unregister the Service Worker.

Network First or Cache First for app performance

WordPress PWA Cache

When selecting a cache strategy for your application, it's essential to consider two main options: Network First and Cache First. Network First loads all files from the server, while Cache First prioritizes the browser's cache and loads from the network if the requested files are not found there. If you choose Network First, you can specify the network quality for loading available files and data using the Cache API.

Advanced PWA Caching with Static Files

Static Cache Files Wordpress PWA

miTT PWA can handle static browsing of different pages. When the service worker is installed, all static files are saved in the browser Cache API, making the mobile app compatible with offline use. Offline content can be provided if saved in the browser's Cache API. Here is on request before it is necessary to exclude the start page. "Static Files" is a key feature of miTT PWA.

If you want to exclude certain pages from being cached, such as a login page, you can do so in the "Cache Exception" setting. You don't need to enter the entire URL in the input field. For example, if you enter "login", all URLs with the expression included will be excluded from the cache.

In some cases, excluding some files from the Service Worker fetch request could be necessary. This could be set up in the Fetch Exceptions field. The debug settings allow us to see precisely what happens in the fetch request.

The Caching part, such as Static files, Cache First, or Network First, is reliable for the app's performance.

Manifest, the definition of the app

We started from the App Namen to the Start Url. Choose the Start Url, which website will open, if the app starts.

The App ID should be unique; the app description lets the user know the key features you offer with the app.

"App Shortcuts" are quick links to your favorite websites

App Shortcuts can be accessed easily with a single click. Here, you can define names, descriptions, URLs, and icons. Please consider using an icon in PNG format with a size of 192 x 192 px.

Theme, colours, and display mode of the app

When choosing colours for your WordPress theme and brand identity, ensure they align and use the "standalone" display mode. Test the app thoroughly, as browser navigation is not supported.

Protocol Handler - open the app via URL in Mail

The protocol handler allows you to open the app via URL. For example, if you send a newsletter and refer to the app, you could define a URL that will open the app.

Your URL could look like this:

<a href="web+blog://2">Wordpress page</a>

WordPress PWA Protocol Handler

The above example demonstrates how to define a page by its ID using "%s" as a placeholder.

PWA App icons and Splash screens for iOS and Android apps

You have to set up different app icons for the WordPress app plugin, and two icons are necessary for it.

  • App icon named manifest-icon-512.png
  • Maskable app icon named manifest-icon-512.maskable.png
  • SVG Icon (optional) namedmanifest-icon.svg
  • Apple Icon (optional) calledapple-icon-180.png

Please follow the naming conventions mentioned above when creating the icons. You can create the icons using any app you prefer or use the PWA Asset Generator . , which provides all icons and iOS Splash Screenimages in a single step. To use the generator, simply install it and run the following command.

pwa-asset-generator /yourFolder/mitt_pwa_blank.png ~/yourFolder/assets -b "#323232"

If you need help creating all Icons and Splash Screens, send me an email with your desired Icons included, and I will help you.

To get the best result for the Maskable Icon, it's recommended to use the Maskable-App-Editor. While an SVG icon is not necessary, it can improve compatibility. Don't forget to upload your icon via FTP.

To upload your icon via FTP, upload it via the plugin's assets/icons/ folder.

The splash screen for Android is built from the background colour of the manifest. The iOS Splash screen will be made from the generated Screen over the PWA Asset Generator.

App Screenshots for App preview

For a better installation experience, use the app screenshot feature to preview your app before installing. Also, the Android device shows install prompt displays with an "Install" button. After installation, the WordPress website transforms into an Android app.

WordPress PWA Installation Prompt Android device WordPress PWA Installation Prompt Android device with app preview

iOS WordPress App Settings

WordPress PWA Installation notice banner iOS device

Various options are available to display the iOS Install banner or the iOS Status bar. This banner helps the user understand how to install the app. Additionally, you can link your custom website ("custom page") to provide detailed instructions on installing the iOS app on iOS devices.

App Installation Prompt

WordPress PWA Installation notice banner Android device

There are different possibilities to install the Android app or desktop app. The standard on Android devices is the installation prompt. If you want an additional button to install the Android app, then there is a possibility of preventing the install prompt from being set up. So this allows you to install mobile apps and desktop apps easily.

Push notifications with the WordPress website

With miTT PWA for WordPress, you can send push notifications directly from the WordPress dashboard, including from blog posts and pages. You could set the push notification title at the push notification tab of the WordPress plugin. You could set up different push messaging channels, like news or events. The technique behind this is the Firebase topic.

Creation of Push notification subscribe buttons

The user needs to subscribe to a push messaging channel so that he can receive the push notifications. To do this, create a button in your WordPress theme, widget, or article which has the following structure:

<button class=" btn btn-secondary mittpwapush__subscribe NewsChannel">Subscribe</button>
<button class=" btn btn-primary mittpwapush__unsubscribe NewsChannel">Unsusbsribe</button>

<button class=" btn btn-primary mittpwapush__unsubscribeFromAll NewsChannel">Unsusbsribe</button>

The last example above demonstrates this if you provide an "Unsubscribe" button for all push notification channels.

Mobile app badge icon

This white square icon with a transparent background appears on the top bar of your Android device and in the push notifications list.

WordPress PWA Installation Prompt Android device WordPress PWA Installation Prompt Android device with app preview

Firebase Setting for the WordPress App

The notification service works with Firebase Cloud Messaging. The price list

The notification service works with Firebase Cloud Messaging. The price list shows "no cost" for unlimited push notifications. The service worker registration and Firebase Messaging are linked, so you must set up Firebase settings, even if you don't need them initially.

To start, you must register at Firebase and create a new web project with the project name. After the project creation, you get mostly all the Firebase setting data. The Firebase Measurement ID is joined with Google Analytics if you choose it during the project creation.

Firebase Vapid Key

The Vapid Key for Firebase cloud messaging could be generated over the Firebase Console by clicking Generate Key Pair in the Cloud Messaging Tab. Create a new Web Push Certificate and copy the code to the WordPress plugin Firebase Vapid Key Setting.

Firebase Cloud Messaging Vapid Key

Firebase Service Account File

Service Account File Firebase

To send push notifications from the backend, you require a Service Account file. You can generate this file through the Firebase console by going to your project's "Service accounts" tab and selecting "Generate new private key". This will create a JSON file to place above your root folder. These are the recommended settings.

If the root folder is inaccessible, select "Custom" in the miTT PWA Plugin settings, save your changes, and place the file in the plugins folder mittpwawp/firebase. In the case of an Apache server, there is a .htaccess file that can be used to protect the folder. For NGINX servers, please ensure that you protect the folder yourself.

Service Account File Path Wordpress PWA

Sync your content with the app users

If the registration process for the service is successful, your WordPress website will be converted into an app or a Progressive Web App (PWA). Once this is done, a background sync will be available for pages and images. This means that the content will be updated in the background of the app user's device, even if the website or installed PWA is not opened.

Statistic counts the app installations

This graph shows the number of installations on Android and Add to Homescreen on iOS.

WordPress Plugin Updates

To see and update miTT PWA, you must grab the update key from the miTT PWA Plugin site and put it in the update key field.

The server of the PWA

To hold the WordPress root folder clean, the Service Worker will be placed in the miTT PWA Plugins folder. This could be overwritten by setting up the following configuration.

Overwrite Service Worker File Scope

The following Server settings are necessary if there any problems with the Service Worker and recommended general settings.

Apache Server

If you use an Apache server, the following lines should be added to the .htaccess file during installation to prevent scope errors. If you have the scope, please check whether the lines already exist.

  <Files "(serviceworker\.js|OneSignalSDKUpdaterWorker\.js|OneSignalSDKWorker\.js)"> 
      Header Set Service-Worker-allowed "/"
 </Files>

NGNIX Server

If your website uses an NGINX server, add the following to the NGINX configuration. The same applies to Plesk Configuration if you use Nginx as a proxy.

  location ~* /(serviceworker\.js|OneSignalSDKUpdaterWorker\.js|OneSignalSDKWorker\.js) {
        add_header 'Service-Worker-Allowed' '/';
 }

In Plesk, you can find the option to add custom Apache and Nginx directives under "Hosting & DNS" and "Apache and Nginx settings". The field to add the directives is at the bottom of the page.

LiteSpeed Server

LiteSpeed sets the necessary header for the Service Worker as follows:

   
   service-worker-allowed: /
 

If you use Cloudflare, you must clear the cache when you change this type of setting.

Conclusion of the WordPress to App Conversion

To turn your WordPress website with WordPress PWA into an app, is miTT PWA for WordPress a low-cost and easy alternatives instead of traditional app development as other WordPress plugins. If need any help to set up the WordPress PWA, feel free to email me.

Please inquire if you require assistance publishing your app on the Apple App Store or Google Play Store. The Stores could be a additional Marketing Channel for all Smartphone Users. PWA Builder and Bubblewrap are valuable tools for this purpose.

Documentation miTT PWA FIRE PUSH

advanced settings for miTT PWA FIRE PUSH

Read more...

FAQ

Frequently Questions

Read More...

Progressive Web App iOS Integration

iOS is still an important part of the mobile market.

Read more...

miTT PWA for WP

PWA Solution for WordPress with Push Notifications

Read more...

miTT PWA for Joomla

Joomla PWA Solution for Joomla

Read more...