The scope and start_url properties of a PWA manifest are used to control the behavior of the PWA when it is launched and displayed to the user.

The start_url property

The start_url property specifies the URL of the page that opens when the PWA is launched from the homescreen. This can be a relative URL, in which case it will be relative to the scope, or an absolute URL.

The scope property

The scope property specifies the URL prefix for all the URLs that the PWA will handle. This determines which pages the PWA can be launched from, and which pages it can control while running.

Troubleshooting

Common issue #1: not ending the scope with a trailing slash

Make sure to end the scope property (either in your hard-coded manifest or your Progressier settings) with a trailing slash (/).

✅ example.com/app/ is a valid scope.

🚫 example.com/app is NOT a valid scope. Browsers will silently fall back to considering your app's scope to be the root domain (example.com/) instead.

Progressier automatically shields you from this potential issue. The dashboard won't let you set a scope that doesn't end with a trailing slash.

Common issue #2: The start_url isn't comprised within the scope.

✅ example.com/app/ as a scope and example.com/app/home as a start_url is a valid combination

🚫 example.com/app/ as a scope and example.com/another-page as a start_url is invalid.

✅ example.com/ as a scope and example.com/another-page as a start_url is a valid combination.

Progressier automatically shields you from this potential issue. You'll see a helpful error message if you attempt to set a start_url that's outside the scope.

In-scope vs out-of-scope

If you navigate to pages located outside the scope of your PWA, they'll open within an in-app browser to indicate that they're not part of the app.

In scope:

Out of scope:

Together, the scope and start_url properties determine which pages the PWA can handle and control, and which page should be displayed when the PWA is launched. They are important for maintaining the user experience and ensuring that the PWA behaves as expected.