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 Mobile apps to access their site (provided it’s enabled) and enjoy features such as offline access to many activities and notifications. But a PWA could offer some additional benefits:
- It could be lighter than the native 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 only have to follow the Moodle™ release date.
-
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.
6 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.
Hello, does this mean that the current Moodle app is not PWA?
Thank you
Hi Nikol, this is correct. I believe Moodle uses Angular as its mobile framework.