Skip to content

Progressive Web App

martin-henz edited this page Mar 24, 2021 · 8 revisions

Progressive Web App

The mobile-friendly web edition comes with support for progressive web apps: The first time you visit the textbook site with a mobile device, the embedded JS in index.html tries to install a "web app" on the device. Here is how this is done, adapting the instructions here: https://blog.heroku.com/how-to-make-progressive-web-app

App Manifest

Located in rails/public/static/manifest.json. The manifest needs to be linked in the generated index.html. This is done in: rails/app/views/layouts/application.html.erg. Added there is the line:

    <link rel="manifest" href="/static/manifest.json">

in HEADER.

Offline support

Created file offline.html to be placed in root directory. This file is in folder rails/public for Ruby-on-Rails to find it.

Service Worker

Create a service worker script sw.js to be placed in root directory. This file is in folder rails/public for Ruby-on-Rails to find it.

The manifest needs to be run in the generated index.html. This is done in: rails/app/views/layouts/application.html.erg. Added there are the lines:

    <script>
      if (!navigator.serviceWorker.controller) {
          navigator.serviceWorker.register("/sw.js").then(function(reg) {
              console.log("Service worker has been registered for scope: " + reg.scope);
          });
      }
    </script>

in BODY.

App icon for mobile device

The folder rails/public/favicon has some Powerpoint sources. Design what you like and place the result in folder rails/public/<filename>.png. Make sure the name and resolution is as stated in the manifest.

Clone this wiki locally