How To ‘Progressify’ Your Moodle Site Into A Progressive Web Application (Lesson One)

AI in Education Leaderboard Post Page
Ai In Education Square Post Page

--- Advertisement ---

Mobile browsers for Android such as Firefox, Opera, or Chrome support Progressive Web Applications. PWAs are somewhere between a mobile page and a native Android app. Unless the features involve real-time graphics processing or other features that require high-use computational resources, a PWA is surprisingly capable of offering an experience indistinguishable from mobile apps. It can handle virtually every one of their features, from a menu icon to offline access, notifications, and use of the mobile device’s camera and sensors.


Moodle users can take advantage of the Moodle Mobile apps to access their site (provided it’s enabled) and enjoy features such as offline access to many activities and notifications. But a Moodle PWA could offer some additional benefits:


  • Moodle PWA could be lighter than the native Moodle Mobile app. (Large offline content such as videos notwithstanding.) PWAs can offer offline content without a problem.
  • Updating the PWA could be easier and quicker, and the updates would not have to wait for the bi-monthly release of Moodle Mobile updates.

  • It could be easier to entice users to turn a website visit into a direct installation of the PWA without having to take the extra step of going to the app store.

But before we get started, I would like to ask you to let me know if this is useful or interesting to you. It is the only way we can be sure to continue this series.

The ‘Progressification’ of a Moodle site

Turning a site into a progressive web app offers additional advantages in the development roadmap. The core elements that would make the website a full-fledged PWA can be added one by one. It could also be considerably easier to start building a PWA than a native Android app. (To date, no other mobile operating systems support PWA.) Besides, any additions to the code of the site will not affect how it looks on desktop on other browsers.

Here are the elements that would make your Moodle site a PWA:

  • The New HTML <Head> Tags (Lesson One)
  • The App Manifest
  • The Service Worker
  • The Push Notifications
  • The Caches
  • General Troubleshooting

This series of lessons follows the tutorial available at, adapted to Moodle options.

Lesson one: New HTML <Head> Tags

To get started is very easy, all you will do in this lesson is add some elements to the header of your Moodle site. The following snippet of code needs to appear on every page. Access the Additional HTML page from the administration panel and paste the following code:

<meta name="viewport" content="width=device-width, user-scalable=no" />
<link rel="manifest" href="manifest.json" />

The first line after the opening tag adds choices to the page that will let it change its appearance depending on the size of the screen and the specific browser or device, as well as control the response to users’ actions. These are the same tags used for responsive web sites.

The second line introduces the App Manifest (the manifest.json file), which is the subject of our next lesson. For now, if you add the code to your site and nothing else, you should not see any changes at this point.

Moonami LogoThis Moodle Technology related post is made possible by: Moonami a company that provides a full range of Moodle services that combine the flexibility, scalability, and power of Amazon’s world-leading cloud platform (AWS) with fanatical Moodle support. Click here to learn more.


4 Responses

  1. Hi Niels! Did you find this lesson useful? Frankly we did not see much traction on this so we repurposed our resources elsewhere.
    Thanks for your comment! Let us know if there’s anything we can do for you. Cheers!

  2. Sorry about that, Igor. Indeed, more lessons never came to be. In addition to the low readership for this topic, Moodle has radically modified the architecture, especially when it comes to mobile.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

The Latest

The eLearn Podcast

--- Advertisement ---

Subscribe to our newsletter

Education technology has the power to change lives. 

To get the latest news, information and resources about online learning from around the world by clicking on the button below.