A Progressive Web App served from LoopBack that:

• ⚙️ Uses a Service Worker to enable the app to work whether or not the end user's device has an internet connection (this is what is referred to as an Offline First approach)
• 📱 Contains a web app manifest to control how the app is experienced by end users
• 🔐 Is served over HTTPS for security
• 🚀 Is served over HTTP/2 for performance
• 💯 Scores 100s in all categories within the Lighthouse web app audit tool

Install Node.js if it is not already installed:

• Download Node.js or
• Install Node.js via a package manager

Clone or download the loopback-pwa repository from GitHub.

Navigate to the loopback-pwa directory:

$ cd loopback-pwa

Install npm dependencies:

$ npm install

Run the generate-key script to generate a new private key:

$ npm run generate-key

Run the generate-cert script to generate a new self-signed certificate:

$ npm run generate-cert

Alternatively, run the generate-csr script to generate a new certificate signing request to send to a certificate authority:

$ npm run generate-csr

Optionally, install the self-signed certificate (server/private/localhost.cert.pem) as trusted by your computer. The steps needed for this will vary by operating system. If you skip this step then your web browser will warn you that the certificate is not trusted.

To install the self-signed certificate on macOS:

1. Open the server/private directory in Finder. This can be done in Finder or with the following command:

$ open server/private

2. Open the Keychain Access utility app. This can be done in Finder or with the following command:

$ open "/Applications/Utilities/Keychain Access.app"

3. In Keychain Access, ensure that "System" is selected under "Keychains" and that "Certificates" is selected under "Category."
4. Drag-and-drop the localhost.cert.pem file from the server/private directory in Finder into Keychain Access. Enter your password if prompted.
5. Double-click the self-signed certificate in Keychain Access (it should be named "LoopBack PWA (localhost)").
6. Under the "Trust" section, change the value of "When using this certificate" to "Always Trust."
7. Close the "LoopBack PWA (localhost)" certificate window in Keychain Access. Enter your password when prompted.
8. You can now close Keychain Access and the server/private directory in Finder.

Run the LoopBack app:

$ node .

Go to https://localhost:8443/ in your web browser.