У меня есть вопрос, касающийся лучшей техники автономного кэширования, которую можно использовать для простого прогрессивного веб-приложения, которое я сейчас создаю.
Короче говоря, я создаю приложение для объяснения лекарств, в котором пользовательнеобходимо ввести штрих-код, нажать «получить лекарство», после чего пользователь будет перенаправлен в файл 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>
Я также начал делать сервис-работника, чтобы хотя бы кэшировать оболочку приложения (которая работает до сих пор).Поэтому мне удалось кэшировать все мои файлы, мне нужна только помощь в части кэширования данных.