- 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.
The ‘Progressification’ of a Moodle site
Turning a site into a progressive web app offers additional advantages in the 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, other mobile systems do not support PWA.) More advanced functionality is another issue. Besides, any additions to the code of the site will not affect how it looks on desktop on other browsers.
- The New HTML <Head> Tags (Lesson One)
- The App Manifest
- The Service Worker
- The Push Notifications
- The Caches
- General Troubleshooting
This series of lessons follow 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:
<meta name="viewport" content="width=device-width, user-scalable=no" />
<link rel="manifest" href="manifest.json" />
The first line before 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.