Remove PWA installability requirement to have a Service Worker (#34127)

mdn · Jun 21, 2024 · 1c8c727 · 1c8c727
1 parent b9f3d08
commit 1c8c727
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 21 deletions.
diff --git a/files/en-us/web/progressive_web_apps/guides/making_pwas_installable/index.md b/files/en-us/web/progressive_web_apps/guides/making_pwas_installable/index.md
@@ -21,6 +21,9 @@ We'll discuss each of these features in this guide. First, though, we'll discuss
 
 For a web app to be promoted for installation by a supporting browser, it needs to meet some technical requirements. We can consider these the minimum requirements for a web app to be a PWA.
 
+> **Note:** While not a requirement for a PWA to be installable, many PWAs use [service workers](/en-US/docs/Web/API/Service_Worker_API) to provide an offline experience.
+> See the [CycleTracker: Service workers](en-us/web/progressive_web_apps/tutorials/cycletracker/service_workers/index.md) tutorial for more information.
+
 ### The web app manifest
 
 A web app manifest is a JSON file that tells the browser how the PWA should appear and behave on the device. For a web app to be a PWA it must be installable, and for it to be installable it must include a manifest.
@@ -70,10 +73,6 @@ For a full description of every member, see the [web app manifest reference docu
 
 For a web app to be installable, it must be served in a [secure context](/en-US/docs/Web/Progressive_web_apps). This usually means that it must be served over HTTPS. Local resources, such as localhost, `127.0.0.1` and `file://` are also considered secure.
 
-### Service worker
-
-For a web app to be installable, it must include a [service worker](/en-US/docs/Web/API/Service_Worker_API) with a [`fetch` event handler](/en-US/docs/Web/API/ServiceWorkerGlobalScope/fetch_event) that provides a basic offline experience.
-
 ## Installation from an app store
 
 Users expect to find apps in the app store for their platform, like the Google Play Store or the Apple App Store.

diff --git a/files/en-us/web/progressive_web_apps/guides/what_is_a_progressive_web_app/index.md b/files/en-us/web/progressive_web_apps/guides/what_is_a_progressive_web_app/index.md
@@ -75,7 +75,7 @@ Because PWAs are websites, they have the same basic features as any other websit
 Beyond that, a PWA has some additional features:
 
 - A [web app manifest](/en-US/docs/Web/Manifest) file, which, at a minimum, provides information that the browser needs to install the PWA, such as the app name and icon.
-- A [service worker](/en-US/docs/Web/API/Service_Worker_API), which, at a minimum, provides a basic offline experience.
+- Optionally, a [service worker](/en-US/docs/Web/API/Service_Worker_API) to provide an offline experience.
 
 #### Web app manifest
 
@@ -85,7 +85,7 @@ The manifest can define many other aspects of the PWA's appearance, such as [the
 
 #### Service worker
 
-A PWA must have a service worker, and the service worker must implement at least a minimal offline experience.
+Although a PWA does not need a service worker to be installed, service workers are often used with PWAs in order to provide at least a minimal offline experience.
 
 Service workers encourage an architecture in which the app's pages - that is, the traditional part of a website - implement the user interface, and the service worker implements a backend which can support [offline and background operation](/en-US/docs/Web/Progressive_web_apps/Guides/Offline_and_background_operation), making the PWA behave more like an app than a website. This is because service workers can be started by the browser in the background when they are needed (for example, to handle a push notification).
 

diff --git a/files/en-us/web/progressive_web_apps/tutorials/cycletracker/index.md b/files/en-us/web/progressive_web_apps/tutorials/cycletracker/index.md
@@ -8,11 +8,11 @@ page-type: tutorial
 
 {{PWASidebar}}
 
-This intro-level tutorial walks through all the steps of building a basic progressive web app, or PWA. We will be using web technologies — HTML, CSS, and JavaScript — to build a period tracking web app called "CycleTracker". Like all web apps, CycleTracker is designed to work in all browsers on all devices.
+This intro-level tutorial walks through all the steps of building a basic progressive web app, or PWA. We will be using web technologies — HTML, CSS, and JavaScript — to build a menstruation cycle tracking web app called "CycleTracker". Like all web apps, CycleTracker is designed to work in all browsers on all devices.
 
-We will walk through the steps of building a fully functional web app, then progressively enhance CycleTracker to make it installable and to work even when the user is offline.
+By default, PWAs are regular websites, built with the same technologies. Just like regular websites, PWAs are linkable, discoverable via search engines, and visible in a browser. By including a manifest file, and serving the website over TLS, any website can become a PWA.
 
-By default, PWAs are regular websites, built with the same technologies. Just like a regular websites, PWAs are linkable, discoverable via search engines, and visible in a browser. By including a manifest file and service worker, and serving the website over TLS, any website can become a PWA.
+We will first cover the steps of building a fully functional web app, then progressively enhance CycleTracker to [make it installable](/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable), and to work even when the user is offline.
 
 ## PWA benefits
 
@@ -62,7 +62,7 @@ The steps include:
 
 - [Local development environment or secure connection](/en-US/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Secure_connection)
 
- - : While all websites should be served over https, with PWAs, https is a requirement. Service workers, and therefore PWAs, are restricted to secure contexts including TLS contexts served with the `https://` protocol and locally-delivered resources, including `127.0.0.1` and `localhost` URLs served with the `http://` protocol. We will look at the page in the current state with the `file://` protocol, then cover options for creating a secure localhost connection to test your code as we progress through the tutorial steps. We also look at serving your PWA with GitHub pages.
+ - : While all websites should be served over HTTPS, with PWAs, HTTPS is a requirement. PWAs are restricted to secure contexts including TLS contexts served with the `https://` protocol, and locally-delivered resources such as `127.0.0.1` and `localhost` URLs served with the `http://` protocol. We will look at the page in the current state with the `file://` protocol, then cover options for creating a secure localhost connection to test your code as we progress through the tutorial steps. We also look at serving your PWA with GitHub pages.
 
 - [JavaScript and LocalStorage](/en-US/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality)
 

diff --git a/files/en-us/web/progressive_web_apps/tutorials/cycletracker/manifest_file/index.md b/files/en-us/web/progressive_web_apps/tutorials/cycletracker/manifest_file/index.md
@@ -238,7 +238,7 @@ The {{HTMLelement("head")}} of `index.html` may now look similar to:
 
 View the [`cycletracker.json` file](https://mdn.github.io/pwa-examples/cycletracker/manifest_file/cycletracker.json) and view the [project source code](https://github.com/mdn/pwa-examples/blob/main/cycletracker/manifest_file/) on GitHub.
 
-With a manifest file, Safari will recognize your site as a web app. For the web app to be a full PWA, we will still need to add a service worker.
+With a manifest file and a secure context, [most browsers](/en-US/Web/Progressive_web_apps/Guides/Making_pwas_installable#Browser_support) will recognise your site as a PWA and some will prompt to install it. To make our PWA to work offline, we'll still need to add a service worker.
 
 ## Debugging manifest files
 
@@ -252,8 +252,6 @@ The Manifest App pane provides the name of the manifest file as a link, and iden
 
 Supported manifest members are displayed, along with all included values. In this screenshot, while we did not include the `orientation` or `id` members, they are listed. The App panel can be used to see the manifest members and even learn: in this example, we learn that to specify an App Id that matches the current identity, set the `id` field to "/".
 
-![Installability shows that because we don't have a service worker, our app is not an installable PWA. yet.](manifest_installability.jpg)
-
 Chrome and Edge also provide errors and warnings, protocol handlers, and information to improve the manifest and icons.
 
 Our web app doesn't have any protocol handlers; a topic not covered in this tutorial. Had we included some, they would be found under "Protocol Handlers". As that section is empty, the developer tools link to more information on the topic.
@@ -268,6 +266,6 @@ The developer tools are useful in identifying which manifest members are support
 
 ## Up next
 
-To get the PWA benefits from other browsers and all operating systems that support PWAs, we need to [add a service worker](/en-US/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers), which we'll do without using a framework.
+To make our PWA work offline, we need to [add a service worker](/en-US/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers), which we'll do without using a framework.
 
 {{PreviousMenuNext("Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality", "Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers", "Web/Progressive_web_apps/Tutorials/CycleTracker")}}
diff --git a/...ssive_web_apps/tutorials/cycletracker/manifest_file/manifest_installability.jpg b/...ssive_web_apps/tutorials/cycletracker/manifest_file/manifest_installability.jpg
diff --git a/...n-us/web/progressive_web_apps/tutorials/cycletracker/secure_connection/index.md b/...n-us/web/progressive_web_apps/tutorials/cycletracker/secure_connection/index.md
@@ -9,7 +9,7 @@ page-type: tutorial-chapter
 
 {{PWASidebar}}
 
-Service workers, and therefore PWAs, are [restricted to secure contexts](/en-US/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts). Secure contexts include TLS contexts served with the `https://` protocol and locally-delivered resources, including `127.0.0.1` and `localhost` URLs served with the `http://` protocol. In this section, we will discuss ways of serving the application locally and remotely with a secure connection.
+PWAs are [restricted to secure contexts](/en-US/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts). Secure contexts include TLS contexts served with the `https://` protocol and locally-delivered resources, including `127.0.0.1` and `localhost` URLs served with the `http://` protocol. In this section, we will discuss ways of serving the application locally and remotely with a secure connection.
 
 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.
 
@@ -21,7 +21,9 @@ With the `index.html` updated, and the `style.css` housed in the same directory,
 
 ![Light green web page with a large header, a form with a legend, two date pickers and a button. The bottom shows two placeholder menstrual cycles and a header.](filefile.jpg)
 
-We are viewing our page using the `file://` protocol. This works for the current state of our codebase, and will continue to suffice as we [add JavaScript functionality](/en-US/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality). However, manifest files and service workers, both PWA requirements, require a secure connection, as do several other APIs. PWAs need to be served from a web server over `https` or a local development environment, using `localhost`, `127.0.0.1`, with or without a port number. If we view our finished app using the `file://` protocol, our [manifest file](/en-US/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Manifest_file) will be ignored and any [service workers](/en-US/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers) we add will fail.
+We are viewing our page using the `file://` protocol. This works for the current state of our codebase but not suffice as we [add JavaScript functionality](/en-US/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality).
+The reason for this is that PWAs and some of their commonly used APIs, such as the Service Worker API, require a secure connection.
+For this reason PWAs must be served using the `https` protocol, or from a local development environment using `localhost` or `127.0.0.1` — with or without a port number. If we view our finished app using the `file://` protocol, our [manifest file](/en-US/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Manifest_file) will be ignored and any [service workers](/en-US/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers) we add will fail.
 
 > **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](/en-US/docs/Web/Security/Secure_Contexts/features_restricted_to_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.
 
@@ -69,7 +71,7 @@ In the above, you may need to prefix the install with `sudo`.
 
 The previous options are fine, and necessary, for testing your application as you progress through this PWA tutorial, or any web development project. While you can host your web app on your device and make it available to anyone with an Internet connection, this is not recommended.
 
-To get the added features of PWAs, including single click installation, a standalone UI, and admission to app stores, it needs to be a PWA, which means it needs a service worker, which means we will need a secure connection. To distribute your app, enabling others to view, use, and install your PWA, you'll want to have your content hosted and available on a secure _remote_ server.
+To get the added features of PWAs, including single click installation, a standalone UI, admission to app stores, and optionally offline functionality through service workers, we will need a secure connection. To distribute your app, enabling others to view, use, and install your PWA, you'll want to have your content hosted and available on a secure _remote_ server.
 
 When officially publishing a PWA, you will likely want to invest in a [domain name and web hosting](/en-US/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost#hosting). For open source projects, where developers can learn from the codebase and even contribute back to the project, you can host your progress on [GitHub Pages](https://pages.github.com/).
 

diff --git a/.../en-us/web/progressive_web_apps/tutorials/cycletracker/service_workers/index.md b/.../en-us/web/progressive_web_apps/tutorials/cycletracker/service_workers/index.md
@@ -9,7 +9,7 @@ page-type: tutorial-chapter
 
 {{PreviousMenu("Web/Progressive_web_apps/Tutorials/CycleTracker/Manifest_file", "Web/Progressive_web_apps/Tutorials/CycleTracker")}}
 
-Thus far, we've written the HTML, CSS, and JavaScript for CycleTracker. We added a manifest file defining colors, icons, URL, and other app features. We have a working web app! But it isn't yet a PWA. In this section, we will write the JavaScript required to convert our fully functional web application into a PWA that can be distributed as a standalone app and works seamlessly offline.
+Thus far, we've written the HTML, CSS, and JavaScript for CycleTracker. We added a manifest file defining colors, icons, URL, and other app features. We have a working PWA! But it doesn't yet work offline. In this section, we will write the JavaScript required to convert our fully functional web application into a PWA that can be distributed as a standalone app and works seamlessly offline.
 
 If you haven't already done so, copy the [HTML](https://github.com/mdn/pwa-examples/tree/main/cycletracker/manifest_file/index.html), [CSS](https://github.com/mdn/pwa-examples/tree/main/cycletracker/manifest_file/style.css), [JavaScript](https://github.com/mdn/pwa-examples/tree/main/cycletracker/manifest_file/app.js), and [manifest](https://github.com/mdn/pwa-examples/tree/main/cycletracker/manifest_file/cycletracker.json) JSON file. Save them to files called `index.html`, `style.css`, `app.js`, and `cycletracker.json`, respectively.
 
@@ -117,7 +117,7 @@ We have successfully declared our constants; a unique identifier, the list of of
 
 ### Saving the cache on PWA installation
 
-When a user installs a PWA or simply visits a website with a service worker, an `install` event is fired in the service worker scope. We want to listen for this event, filling the cache with the PWA's static resources upon installation. Every time the service worker version is updated, the browser installs the new service worker and the install event occurs.
+When a user installs or simply visits a website with a service worker, an `install` event is fired in the service worker scope. We want to listen for this event, filling the cache with the PWA's static resources upon installation. Every time the service worker version is updated, the browser installs the new service worker and the install event occurs.
 
 The `install` event happens when the app is used for the first time, or when a new version of the service worker is detected by the browser. When an older service worker is being replaced by a new one, the old service worker is used as the PWA's service worker until the new service work is activated.
 
@@ -388,7 +388,7 @@ In some developer tools, you can manually unregister a service worker, or you ca
 
 The service worker window within the DevTools' application panel, provides a link to access to pop up window containing a list of all the registered service workers for the browser; not just the service worker for the application opened in the current tab. Each service worker list of workers has buttons to stop, start, or unregister that individual service worker.
 
-![Two service workers exist at localhost:8080. The can be unregistered from the list of service workers](edge_sw_list.jpg)
+![Two service workers exist at localhost:8080. They can be unregistered from the list of service workers](edge_sw_list.jpg)
 
 In other words, as you are working on your PWA, you don't have to update the version number for every app view. But remember, when you are done with all your changes, update the service worker VERSION value before distributing the updated version of your PWA. If you forget, no one who has already installed your app or even visited your online PWA without installing it will ever get to see your changes!
 

diff --git a/...s/en-us/web/progressive_web_apps/tutorials/js13kgames/installable_pwas/index.md b/...s/en-us/web/progressive_web_apps/tutorials/js13kgames/installable_pwas/index.md
@@ -21,7 +21,6 @@ To make our example application installable, the following things are needed:
 - A web application manifest, with the [correct members filled in](/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable#the_web_app_manifest).
 - The website to be served from a secure (HTTPS) domain.
 - An icon to represent the app on the device.
-- A [service worker](/en-US/docs/Web/API/Service_Worker_API) registered, to allow the app to work offline.
 
 ### The web app manifest file