Welcome to the Forge beginner's guide!


What is a PWA? 🤷

The term Progressive Web Application (PWA) refers to a collection of paradigms and best practices for making a website or web application that functions similarly to a native mobile application.

All Progressive Web Apps are:

Reliable
- Capable of running and providing a UI without internet connection
- Cross-platform loading on different browsers and desktop/mobile platforms
Fast
- Available on a mobile home screen without downloading from an app service
- Loads rapidly and can cache assets to be served immediately
Engaging
- Fluid UI that looks and feels like a traditional mobile application

Progressive Web Apps need to have the following properties:

  1. Served on HTTPS
  2. Mobile and desktop friendly
  3. All URL's load offline - Service workers cache all URL routes
  4. Have a web app manifest - JSON file with info for running on mobile platforms
  5. Load fast on bad connections - Initial download when the app starts up is small and fast
  6. Works across all major browsers
  7. Page transitions are snappy - Rendered as a single-page app with front end frameworks

Navigating the Code Base 🗺

Here is a quick guide to get you familiar with what's going on in the browser and codebase we just forged for you.

Accessing the developer console

In Chrome, open the developers tools with Cmd + Option + J (Mac) or Ctrl + Shift + J (Windows).

Where can I find the service workers in the browser?

Navigate to the "Application" tab in the dev tools. On the left hand side, under the Application sub menu, click on "Service Workers".

Chrome Dev Tools

Registering/Unregistering service workers

Click on "Unregister" to remove the service worker that was installed when you loaded this HTML page. Refreshing the page should automatically reinstall the service worker.

Service workers in the code

If you open up the directory we forged for you, you'll see a "client" folder. In that folder, there is a file named "sw.js". This file is your service worker.

Seeing your cached files

Back in the Application tab of dev tools, you can find a section labeled "Cache". Click on "Cache Storage" and select "beginners-guide" to see the cached files. For now, there is only one HTML file and one CSS file. Your service workers can cache up to 30 MB of files (depending on your browser)!

Clearing the cache

Just under the "Service Workers" on the Application tab, click the "Clear Storage" option. At the bottom, you can click "Clear site data" to both clear all cached files and unregister your service workers.

Try Offline! 🤯

Try turning off your WiFi and refreshing the page. Notice that you can still navigate the site. This is because of the service workers in sw.js! If you deployed using AWS, you'll have to configure HTTPS routing and obtain an SSL certificate to enable this feature.

Service Worker Cache Information

Resources 📚

If you'd like to learn more about PWAs, check out these links:

Thank you for using the Forge!

the Forge logo