Question

我对用于当前正在构建的简单渐进式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>

我还开始让服务人员至少缓存应用程序外壳（到目前为止，它仍然有效）。因此，我成功地缓存了所有文件，只需要数据缓存部分的帮助。

Answer 1

听起来像是一个有趣的项目。

您可以通过多种方法来解决此问题，但是我认为以下是最简单的方法。您在https://jakearchibald.com中发现了很多资源，他是离线优先和PWA中的思想领袖之一，并且绝对是一个很好的跟随者。

在您的情况下，听起来您应该使用IndexedDB，它是现代浏览器中的内置DB，它允许将大量结构化数据存储在浏览器的缓存中，包括JSON。（https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API）然后，您可以扩展服务工作者以拦截请求，并在对后端进行调用之前首先检查IndexedDB中的数据。我来自NodeJS，因此在PHP世界中可能略有不同，但是我认为以下基本步骤应该相同：

第一个电话进行了关于X药丸的数据检索
页面上呈现的数据，数据也以JSON缓存到IndexedDB
用户再次搜索药丸X
服务人员条目将拦截该呼叫，并首先检查该搜索是否存在有效的IndexedDB，即药丸X。如果存在，则应使用来自缓存的数据，否则，应允许服务调用完成。

我知道这是一个非常简单的答案，但我相信这将是您实现这一目标的基本旅程。

Answer 2

我之所以说使用indexDB，是因为它在性能和开发方面也将帮助您查询和获取特定结果。

您的mysql数据将以JSON的形式存储到浏览器中（如果不是这样做，因为我看不到任何不使用它的理由），因此您可以直接保存在indexDB中。

NoSql数据库中的第二件事indexDB，因此很容易将Mysql（SQL）数据存储在任何NoSql数据库中，因为它们已经结构化并且NoSql数据库是动态的。

如果假设使用大量条形码，

localStorage将会是一个问题，您将存储在本地存储中，因此本地存储大小将增加，现在对于查询，您必须按每个条目进行遍历，直到获得请求的条形码，但在indexDB中，可以使用indexing。

Cookie用于跟踪器，分析数据等。

所以最后使用indexDB。

如果有任何疑问，请随时留言

Answer 3

如何将数据存储在localStorage中？

您将barcode作为密钥并将stringifed数据放在此处。

我的情况可以使用哪种缓存技术？

3 个答案: