OSP Progressive Web App Help
Installation & FAQ

What is a Progressive Web App?

A Progressive Web Application (PWA) is a type of mobile app that is delivered through the web, that can work off-line, and that can be installed on a user's home screen. PWAs are built using industry-standard web technologies including HTML, CSS and JavaScript. They are intended to work on any platform that has a standards-compliant browser. Although a PWA behaves much like a native app, it has limited access to the mobile (or desktop) hardware and software. The PWA is merely an undecorated browser window that is installed in the browser's persistent cache, similar to cookies. Although PWAs function without an internet connection, they will update automatically when a new version is released. No changes are made to the operating system and they can be uninstalled by dragging the PWA's icon into the trash.

All major operating systems (Windows 10, OS X, Linux, iOS and Android) and browsers (Edge, Chrome, Safari, Firefox and Opera) support the core technologies needed for PWAs. Ideally, a PWA will automatically prompt the user to install itself on a home screen when the PWA URL is accessed. However, the API to automatically request permission to install a PWA on a home screen has not (yet) been standardized and users may need to manually perform the installation. This help file provides operating system specific information and suggestions for how to do this installation.

All Browsers and All Devices

ComPADRE supports the secure HTPS protocol.

Because PWAs install files in the browser cache, they require a secure network connection using the HTTPS protocol. Look the lock icon in the website URL or explicitly specify the HTTPS protocol when entering the url. Note that some, but not all, websites support both insecure (HTTP) and secure (HTTPS) protocols and may automatically redirect traffic. For example, the AAPT ComPADRE webstie automatically redirects http://www.compadre.org/OSP/ automatically redirects users to https://www.compadre.org/OSP/.

In order to avoid scrolling on mobile screens, many Open Source Physics PWAs link to supplemental documents such as html pages and PDF files. Disable pop blocking for the site hosting the PWA to ensure access these supplemental documents.

The Solar and Lunar Eclipse PWA has HTML buttons that load supplemental docs.

Android Devices

Three ways to install a PWA onto a home screen using the Chrome browser on Android.

It is not surprising that Android has extensive support for PWAs because this technology was pioneered by Google. Enter the PWA URL into the Chrome browser and you will see a banner at the top that allows you to install the app. If you close the browser and visit the PWA site a second time after a 5 minute delay, Chrome usually shows a message at the bottom of the screen asking that can also be used to install the app. If neither of these options appear, a user can always install the PWA by select the Add to Home item in the More Options menu in the upper right hand corner of the browser.

Android Pixel home screen showing six installed PWAs.

iOS Devices

On iOS devices, use the Safari browser. Select the share icon in the upper right hand corner of Safari to show a list of options.
Safari Setings

Although Apple does not yet fully support all PWA standards, it is still easy to install a PWA on an iOS device using the Share option in the upper right hand corner of Safari. Entering the PWA URL, select the Share icon in the upper right hand corner of browser, and choose the Add to Home Screen item.

Unfortunately, PWAs cannot yet be installed on the iOS desktop using Google Chrome on iOS devices.

Motion and Orientation Sensors

When running PWAs on Apple iOS devices that require access to motion sensors, users must first enable the Motion and Orientation Access property in Safari Settings. To do so, open the device Settings and select Safari to enable the accelerometer as shown in the screen shot to the right. that record data from iOS sensors, users must enable Motion and Orientation Access in Safari Settings. Open the device Settings and select Safari to enable the accelerometer as shown in the screen shot to the right.

PWA Cache
The Apple share icon in Safari is used to install PWAs on iOS devices.

Selecting a PWA icon on the iOS home screen and dragging it to the trash makes the app inaccessible but the files may remain in the Safari cache. To force an iOS device to delete these cached files, use the Advanced | Website Data panel in Safari Settings. Note that deleting the cache data does not remove the PWA from the home screen. Clicking on the PWA's icon on the home screen reloads the latest version of the PWA from the original URL.

Desktop Testing

PWAs can be installed on Apple and Windows desktops using Chrome.

Although the PWAs are often run on mobile devices, they can be installed on Microsoft Windows or Apple OS X desktops using the Google Chrome browser. Enter the PWA URL and select either the Install App or the Install item from the "Customize and control" menu in Google Chrome located in the upper right hand corner of the browser window. By default, the PWA is installed in the Chrome Apps directory but it behaves like a native app and it can be moved or copied to another more convenient location.

PWAs in the Chrome Apps directory can be moved or copied to another more convenient location.

Credits:

Many of the OSP PWA simulations mentioned on this page were first developed as standard web pages using the Easy Java/JavaScript Simulations modeling and authoring tool. Although EJS is a Java program, EJS 5 creates stand alone JavaScript programs that run in almost any browser. Information about EJS is available at: <http://www.um.es/fem/Ejs/> and in the AAPT-ComPADRE Open Source Physics collection <http://www.compadre.org/OSP/>.

Additional Open Source Physics PWAs are under development. In particular, we are using the SwingJS transpiler developed at St. Olaf College to convert Opens Source Physics Java code to JavaScript. The Optics Bench PWAs is an example of this collaboration.

Contact W. Christian for adiitonal information about Open Source Physics PWAs. author image