【发布时间】：2024-04-12 11:00:02
【问题描述】：
我有一个关于用于我当前正在构建的简单渐进式 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 来至少缓存应用程序外壳（到目前为止效果也很好）。所以我成功缓存了我所有的文件，我只需要数据缓存部分的帮助。
【问题讨论】：
-
我看到越来越多的人推荐这个 IndexedDB。我会对此进行更多研究，谢谢！
标签： javascript php html service-worker