diff options
Diffstat (limited to 'devtools/docs/user/application/manifests/index.rst')
| -rw-r--r-- | devtools/docs/user/application/manifests/index.rst | 47 |
1 files changed, 47 insertions, 0 deletions
diff --git a/devtools/docs/user/application/manifests/index.rst b/devtools/docs/user/application/manifests/index.rst new file mode 100644 index 0000000000..2a17057cd0 --- /dev/null +++ b/devtools/docs/user/application/manifests/index.rst @@ -0,0 +1,47 @@ +============================ +Inspecting web app manifests +============================ + +In this article we will look at inspecting `app manifests <https://developer.mozilla.org/en-US/docs/Web/Manifest>`_ using the Firefox DevTools :doc:`Application panel <../index>`. + +When you open the Application panel’s *Manifest* view on a page that doesn't have an app manifest successfully deployed, you'll get the following output shown: + +.. image:: no-manifest.jpg + :alt: default manifest view saying that you need to add a manifest to inspect it. + :class: border + + +Deploying a manifest +******************** + +To get a manifest deployed successfully, you need to include a `<link> <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link>`_ element in the `<head> <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head>`_ of your document that points to your ``.webmanifest`` file: + + +.. code-block:: html + + <link rel="manifest" href="/manifest.webmanifest"> + + +The ``.webmanifest`` extension is recommended in the spec, and should be served with an ``application/manifest+json`` mime type, although browsers generally tend to support manifests with other appropriate extensions like ``.json`` (mime type: ``application/json``). + +You also need to make sure the JSON inside the file is of the correct format. You can test this using the `Web Manifest Validator <https://manifest-validator.appspot.com/>`_. + + +Inspecting your manifest +************************ + +If your manifest is deployed successfully, you should end up with a display like the following on the *Manifest* view: + +.. image:: manifest-deployed.jpg + :alt: manifest view showing a deployed manifest, with identity, presentation, and icon information shown + :class: border + +From here, you can inspect all the information in the manifest in an easy-to-digest way, making sure that it is all correct. It provides a link to the manifest file at the top which when clicked on brings up the JSON in a new tab. + +It also loads all the icon files into the view, so you can see the relative size of them all, and any other information associated with them. + + +List of manifest members +************************ + +We won't provide an exhaustive list of all the members that can appear in a web manifest here; you can already find that in our `web manifest documentation <https://developer.mozilla.org/en-US/docs/Web/Manifest#members>`_. |