CycleTracker: Secure connection
PWAs can only be installed using a manifest file when served with the https:// protocol, or when served locally from 127.0.0.1 and localhost URLs with the http:// protocol.
They also commonly use APIs that are restricted to secure contexts.
In the previous section, we used HTML and CSS to create the shell of our period tracking application. In this section, we'll open the CycleTracker static content in a browser, view the content from a locally started development environment, and view the content on a remote, secure server.
Viewing with the file:// protocol
Any browser will render your HTML. To view the HTML file with the CSS applied you created in the previous section, open the index.html file by navigating to it via your computer's file structure or from your browser using the "Open File" menu option.
With the index.html updated, and the style.css housed in the same directory, viewing the page in a narrow browser window should look similar to this screenshot:
We are viewing our page using the file:// protocol, which provides a secure context.
This ensures that the pages can be viewed with the current state of our codebase, and will continue to work as we add JavaScript functionality that requires a secure context.
Note:
Serving your app over https isn't only good for PWAs, but for all websites as it ensures the information that transits between your web server and the user's browser is encrypted end to end. Several Web APIs require secure contexts. Even if you aren't creating installable PWAs, as you add features to any web app, you may run into cases where a secure context is required.
While we can view and test most application functionality using the file:// protocol, we can't use it to test application installation using our manifest file.
We need a local development environment to test the whole tutorial including installation. Part of making a PWA installable is a secure server. The files will need to be served over a secure connection on the web to access the benefits PWAs provide and to distribute our application as a PWA.
localhost
The default method for setting up a local development environment varies by operating system. While the default location for the index and configuration files on your operating system may differ, most desktop operating systems enable a server configuration accessible to you, the developer.
For example, on macOS, at least on Sierra and Monterey, entering sudo apachectl start enables an Apache HTTP server. Once the server is started, entering http://localhost in the browser displays an basic web page that reads "It works!". By default, the HTML file displayed is Library/WebServer/Documents/index.html.en. To enable file extensions other than .html.en or to change the root directory away from Library/WebServer/Documents/, you have to edit the apache http configuration file, located at /etc/apache2/httpd.conf. The server can be stopped with sudo apachectl stop.
The OS's default localhost has an easy-to-remember URL, but a difficult to remember server root location and configuration process. It also only allows for one local server in one location at a time. Fortunately, there are more intuitive server set up method options to create one or more local development environments on multiple ports.
localhost with a port number
There are several IDE extensions and programming-language specific packages that enable starting a development environment with a single click or terminal command. You can even start multiple local servers, each with a different port number.
You can run a local HTTP server using a VS Code plugin, which enables running a local server on a single or different port. The Preview on Web Server extension for the VS Code IDE creates a server at the root of the directory currently opened by the editor, with a default port of 8080. VS Code extensions are configurable. The previewServer.port setting is the port number of the web server. The extensions default setting of 8080 can be edited and changed. By default, entering localhost:8080 in the browser URL bar will load the page.
Note:
The Preview on Web Server extension uses Browsersync. When your development environment is started by this extension, localhost:3001 provides a user interface for Browsersync, providing an overview of the current server environment.
Learn how to