Skip to content

Commit

Permalink
Fix typo (mdn#38184)
Browse files Browse the repository at this point in the history
* Fix typo

* Update manifest_file

Better readability

* Update index.md

Editing for clarity

* Update files/en-us/web/progressive_web_apps/tutorials/cycletracker/service_workers/index.md

* Undo the manifest removal

---------

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
  • Loading branch information
hecerinc and Josh-Cena authored Feb 17, 2025
1 parent 230f3d9 commit 5dc85ad
Show file tree
Hide file tree
Showing 3 changed files with 4 additions and 4 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ page-type: tutorial-chapter

A PWA manifest file is a JSON file that provides information about the features of that app to make it look and behave like a native app when installed on the user's device. The manifest contains metadata for your app, including its name, icons, and presentational directives.

While according to the spec, all of the manifest keys, or members, are optional, some browsers, operating systems, and app distributors have [require specific members](/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable#required_manifest_members) for a web app to be a PWA. By including a name or short name, the start URL, an icon meeting some minimum requirements, and the type of application viewport in which the PWA should be viewed, your app will meet the manifest requirements of a PWA.
While, according to the spec, all of the manifest keys (or members) are optional, some browsers, operating systems, and app distributors have [specific required members](/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable#required_manifest_members) for a web app to be a PWA. By including a name or short name, the start URL, an icon meeting some minimum requirements, and the type of application viewport in which the PWA should be viewed, your app will meet the manifest requirements of a PWA.

A minimalist manifest file for our menstrual cycle tracking app could look like this:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ By default, entering `localhost:8080` in the browser URL bar will load the page.

You can choose a different port number. Entering `npx http-server /user/yourName/CycleTracker -p 8787` will start local server at port `8787` if available. If not, if you enter a port number that is already being used, you will get an `address already in use` or similar error. If successful, entering `localhost:8787` in the browser URL bar will render the index file stored as `~/user/yourName/CycleTracker/index.html`, or will display the directory contents of `~/user/yourName/CycleTracker/` if no index file is present.

This non-configurable static HTTP server suffices for our basic app. Apps served via `localhost` and `127.0.0.1` are exempt from https and always considered secure. Browser insecure warnings, if given, can be bypassed. While not necessary, to configurable your local web server to be served over HTTPS, you can [add a built-in TLS certificate](https://github.com/lwsjs/local-web-server/wiki/How-to-get-the-%22green-padlock%22-using-the-built-in-certificate). With the certificate, you will be able to install and run [local-web-server](<https://github.com/lwsjs/local-web-server/wiki/How-to-launch-a-secure-local-web-server-(HTTPS)>) from the command line to serve your project locally over `https`, preventing any security warning.
This non-configurable static HTTP server suffices for our basic app. Apps served via `localhost` and `127.0.0.1` are exempt from https and always considered secure. Browser insecure warnings, if given, can be bypassed. While not necessary, to configure your local web server to be served over HTTPS, you can [add a built-in TLS certificate](https://github.com/lwsjs/local-web-server/wiki/How-to-get-the-%22green-padlock%22-using-the-built-in-certificate). With the certificate, you will be able to install and run [local-web-server](<https://github.com/lwsjs/local-web-server/wiki/How-to-launch-a-secure-local-web-server-(HTTPS)>) from the command line to serve your project locally over `https`, preventing any security warning.

```bash
npm install -g local-web-server
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ The service worker is what makes the application work offline while making sure
The service worker is also responsible for:

- Installing the cache when the app is installed.
- Updating itself and the other application file as needed.
- Updating itself and the other application files as needed.
- Removing cached files that are no longer used.

We achieve these tasks by reacting to three service worker events, including the
Expand Down Expand Up @@ -67,7 +67,7 @@ const APP_STATIC_RESOURCES = [
];
```

You don't need to include the various icons that are used by all the different operating systems and devices in the list. But do include any images that are used within the app, including assets to used within any splash pages that may be visible if the app is slow as the app loads or used in any "you need to connect to the internet for the full experience" type pages.
You don't need to include the various icons that are used by all the different operating systems and devices in the list. But do include any images that are used within the app, including assets to be used within any splash pages that may be visible if the app is slow to load or used in any "you need to connect to the internet for the full experience" type pages.

Do not include the service worker file in the list of resources to be cached.

Expand Down

0 comments on commit 5dc85ad

Please sign in to comment.