What caching technique to use for my situation?

user_5356432 0
Viewed 104

I have a question regarding the best offline caching technique to use for a simple progressive web application that I'm currently building.

So in short, I'm building a medication explainer app in which the user needs to type in a barcode, click on 'get medication' and then the user will be redirected to a result.php file containing some basic info about the medication that I queried from a MySQL database (the barcode is the key in this simple database).

What I want to do now is implement offline caching. So the first time when user types in this barcode and gets to the result page, I want this data linked with that barcode to be saved in a cache. The next time when the person is offline and types in that same barcode in the index.html file and clicks submit, it should then send him again to that result page and display the cache data that was saved earlier.

The problem now is that I don't really know what the best caching technique is. I've found a website that explains each of the techniques with an example on how to implement it, but I don't really what to chose: https://jakearchibald.com/2014/offline-cookbook

Anyone who can give me some tips for my situation?

This is the html and php file that I have (everything works so far):

<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>

I also started making a service-worker to at least cache the app shell (which works as well so far). So I succeeded in caching all my files, I only need help in the data caching part.

service-worker html php javascript
3 Answers

It sounds like an interesting project.

There are a number of ways you could approach this but I think the below would be the simplest. You've found a great resource in https://jakearchibald.com, he is one of the thought leaders in offline first and PWAs and is definitely a good one to follow.

In your case, it sounds like you should be using IndexedDB, the build in DB within modern browsers which allows for significant amounts of structured data to be stored in the browser's cache, including JSON. (https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) Then you can extend your service worker to intercept the request and first check the IndexedDB for data before making a call to the backend. I come from a NodeJS background so it may be slightly different in PHP world but I think the below basic steps should be the same:

  1. The first call made retrieve data on pill X
  2. Data rendered on page, data also cached to IndexedDB as JSON
  3. User searches for pill X again
  4. Service worker entry will intercept the call and first check if there is a valid IndexedDB for that search, i.e. pill X. If there is then the data from the cache should be used, if not then the service call should be allowed to complete.

I understand that this is a very simplified answer but I believe that would be your basic journey to achieve this.

user_4023920

I'd say Use indexDB because it'll be helpful you in querying and fetching a particular result in term of performance and development too .

your mysql data will be server to browser in form of JSON (if not that do it, because i don't see any reason not to use it), so you can directly save in indexDB.

2nd thing indexDB in a NoSql database so it's easy to store Mysql (SQL) data in any NoSql database because they are already structured and NoSql databases are dynamic.

localStorage would be a problem if suppose uses uses large number of barcode , you'll store in local-storage , so local storage size will grow , now for query you have to go through by every entry until you get request barcode but in indexDB you can use indexing .

Cookies are for tracker, analytic data etc.

so Finally go with indexDB.

if you have any query , feel free to drop a note

user_75295320

How about storing the data in the localStorage?

You take the barcode as key and put the stringifed data there.

user_10237790
Related