index.rst (2299B)
1 ============================ 2 Inspecting web app manifests 3 ============================ 4 5 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>`. 6 7 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: 8 9 .. image:: no-manifest.jpg 10 :alt: default manifest view saying that you need to add a manifest to inspect it. 11 :class: border 12 13 14 Deploying a manifest 15 ******************** 16 17 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: 18 19 20 .. code-block:: html 21 22 <link rel="manifest" href="/manifest.webmanifest"> 23 24 25 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``). 26 27 You also need to make sure the JSON inside the file is of the correct format. 28 29 30 Inspecting your manifest 31 ************************ 32 33 If your manifest is deployed successfully, you should end up with a display like the following on the *Manifest* view: 34 35 .. image:: manifest-deployed.jpg 36 :alt: manifest view showing a deployed manifest, with identity, presentation, and icon information shown 37 :class: border 38 39 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. 40 41 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. 42 43 44 List of manifest members 45 ************************ 46 47 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>`_.