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 codelabs.developers.google.com, 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:
<head>
<meta name="viewport" content="width=device-width, user-scalable=no" />
<link rel="manifest" href="manifest.json" />
</head>
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.
This 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
So where are the other lessons?
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!
Well, im like crrazy looking on how to setup The Service Worker so this is probably the lesson 2 that never came to be…
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.