我有一个问题，关于构建一个简单的渐进式Web应用程序时使用最佳离线缓存技术的选择。
简而言之，我正在构建一款药品说明应用程序，用户需要输入条形码，点击“获取药品”，然后用户将被重定向到一个result.php文件，其中包含我从MySQL数据库中查询到的有关药品的一些基本信息（该条形码是这个简单数据库中的关键字）。
现在我想要实现离线缓存。第一次用户输入此条形码并进入结果页面时，我希望将与该条形码相关联的数据保存在缓存中。下一次当用户处于离线状态并在index.html文件中输入相同的条形码并单击提交时，它应该再次将其发送到那个结果页面，并显示先前保存的缓存数据。
现在的问题是，我不知道最好的缓存技术是什么。我找到了一个网站，解释了每种技术以及如何实现它的示例，但我不知道该选择哪个：https://jakearchibald.com/2014/offline-cookbook
有人可以给我一些适合我情况的提示吗？
这是我拥有的HTML和PHP文件（目前一切正常）：
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progressive Web Application - MAM11</title>
<link rel="stylesheet" href="styles/main.css">
<script src="scripts/app.js" async></script>
</head>
<body>
<h1>Pill-Explainer</h1>
<p>Please enter the European Article Number (EAN) of your medication below. <br>
You can find the EAN at the outside of your medication box often starting with the number 8 and containing 13 digits in total. </p>
<img src="images/barcode.jpg"> <br>
<form action="http://192.168.0.104/MedicationProject/result.php" method="post">
<input type="number" placeholder="Enter barcode" name="barcode" id="barcode"> <br>
<input type="submit" value="Get medication" id="submit">
</form>
</body>
<?php
// 1. database credentials
$host = "sql7.freemysqlhosting.net";
$db_name = "sql7264357";
$username = "sql7264357";
$password = "*********";
// 2. connect to database
$con = new PDO("mysql:host={$host};dbname={$db_name}", $username, $password);
// 3. get barcode value from inputfield in previous document
$search=$_POST['barcode'];
// 4. prepare select query
$query = 'SELECT ProductName, ActiveIngredient, Description, Leaflet
FROM Medications WHERE Barcode = "'.$search.'"';
$stmt = $con->prepare( $query );
// 5. execute our query
$stmt->execute();
// 6. store retrieved row to the 'row' variable
$row = $stmt->fetch(PDO::FETCH_ASSOC);
?>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progressive Web Application - MAM11</title>
<link rel="stylesheet" href="styles/result.css">
</head>
<body>
<h1>Pill-Explainer</h1>
<form action="/action_page.php">
<label>Productname:</label>
<textarea type="text" id="productname"><?php echo $row['ProductName']?></textarea>
<label>Active ingredient:</label>
<textarea type="text" id="ingredient"><?php echo $row['ActiveIngredient']?></textarea>
<label>Description:</label>
<textarea type="text" id="description"><?php echo $row['Description']?></textarea>
</form>
<div id="buttons">
<a href="index.html">
<img src="images/back-button.jpg">
</a>
<a href="<?php echo $row['Leaflet']?>">
<button type="button">Download leaflet <br> (Internet only)</button>
</a>
</div>
</body>
我也开始制作一个 service-worker，至少可以缓存应用程序的外壳（到目前为止也有效）。因此，我已经成功地缓存了所有文件，现在只需要在数据缓存部分得到帮助。