No Manifest Detected on a PHP Progressive Web Application

I'm trying to make my PHP web application into a Progressive Web Application, but when I open Chrome DevTools into the application tab, it tells me there is 'No Manifest Detected' when I have put the manifest.json at the root but my ServiceWorker.js is successfully running.

<!DOCTYPE html>
<html lang="en">

<?php
//php code
?>

<head>
    <title>php</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="manifest" href="/manifest.json">
    <link rel="stylesheet" type="text/css" href="css/util.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">

</head>

<body>
//body code
</body>

</html>

{
"name": "php",
"version": "1.0",
"short_name": "php",
"start_url": "./index.php",
"background_color": "#000000",
"display": "standalone",
"orientation": "any",

"default_locale": "en",
"description": "example",
"icons": [

    {
        "src": "512x512.png",
        "sizes": "512x512",
        "type": "image/png"
    },

    {
        "src": "192x192.png",
        "sizes": "192x192",
        "type": "image/png"
    }

]}

I have validated the manifest.json file here and it works in a test HTML file; it's just trying to put it into a PHP file is where I don't see anything happening.

Solution

Move your <head></head> block directly below the opening <html> tag, so that your <?php //php code ?> is below it. The manifest won't be detected, if there is any output before the document head.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>php</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="manifest" href="/manifest.json">
    <link rel="stylesheet" type="text/css" href="css/util.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<?php
  //php code
?>

<body>
  //body code
</body>

</html>