What caching technique to use for my situation?
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.
javascript php html service-worker
asked Nov 12 '18 at 14:48
ToufikToufik
287
add a comment |
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.
javascript php html service-worker
asked Nov 12 '18 at 14:48
ToufikToufik
287
Google suggest IndexedDB - might be worth checking those links if you haven't already... this isn't something I've looked into before so it was useful to me anyway :)
– CD001
Nov 12 '18 at 15:28
I see that more people are suggesting this IndexedDB. I will look more into this, Thank you!
– Toufik
Nov 13 '18 at 11:38
add a comment |
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.
javascript php html service-worker
asked Nov 12 '18 at 14:48
ToufikToufik
287
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.
javascript php html service-worker
javascript php html service-worker
asked Nov 12 '18 at 14:48
ToufikToufik
287
asked Nov 12 '18 at 14:48
ToufikToufik
287
asked Nov 12 '18 at 14:48
ToufikToufik
287
asked Nov 12 '18 at 14:48
ToufikToufik
287
asked Nov 12 '18 at 14:48
ToufikToufik
287
287
Google suggest IndexedDB - might be worth checking those links if you haven't already... this isn't something I've looked into before so it was useful to me anyway :)
– CD001
Nov 12 '18 at 15:28
I see that more people are suggesting this IndexedDB. I will look more into this, Thank you!
– Toufik
Nov 13 '18 at 11:38
add a comment |
Google suggest IndexedDB - might be worth checking those links if you haven't already... this isn't something I've looked into before so it was useful to me anyway :)
– CD001
Nov 12 '18 at 15:28
I see that more people are suggesting this IndexedDB. I will look more into this, Thank you!
– Toufik
Nov 13 '18 at 11:38
Google suggest IndexedDB - might be worth checking those links if you haven't already... this isn't something I've looked into before so it was useful to me anyway :)
– CD001
Nov 12 '18 at 15:28
Google suggest IndexedDB - might be worth checking those links if you haven't already... this isn't something I've looked into before so it was useful to me anyway :)
– CD001
Nov 12 '18 at 15:28
I see that more people are suggesting this IndexedDB. I will look more into this, Thank you!
– Toufik
Nov 13 '18 at 11:38
I see that more people are suggesting this IndexedDB. I will look more into this, Thank you!
– Toufik
Nov 13 '18 at 11:38
add a comment |
3 Answers
3
active
oldest
votes
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:
- The first call made retrieve data on pill X
- Data rendered on page, data also cached to IndexedDB as JSON
- User searches for pill X again
- 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.
answered Nov 12 '18 at 15:35
JonnyIrvingJonnyIrving
4612616
1
Thank you JonnyIrving. I indeed think it will come to these basic steps. The only thing that I don't know yet is how to display the results of the database in my php file. I understand that the barcode could serve as the keypath (because these are unique) but the moment that submit button is hit again in offline modus, it should display the earlier saved data retrieved from MySQL into my textboxes and not in the console of the browser.
– Toufik
Nov 13 '18 at 11:42
Well if you go by the above steps then you wouldn’t need the code to handle offline vs online sessions differently because the service worker would simple intercept and resolve the call that would have been made to the service and instead respond with data from IndexedDB.
– JonnyIrving
Nov 13 '18 at 22:28
add a comment |
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
answered Nov 12 '18 at 15:49
Meena PintuMeena Pintu
1357
I think this will work. There are plenty of examples on how to use IndexDB. I only need to find a way on how to display the results of this DB in the page of desire (in this case, my .php file). So far I only see that the results are displayed inside the console of the browser.
– Toufik
Nov 13 '18 at 11:37
php won't work as indexDB is a client side database , only javascript will work . you need to write code in javascript with will store data in indexDB and fetch data from indexDB and then display on browser . but not .php as php get executed server side and output html served to browser by php interpreter .
– Meena Pintu
Nov 13 '18 at 13:42
I know, but I dont meant that I will use php to store the data in indexDB. My PHP file contains a bit of HTML code and I want to display whatever I stored in indexDB into those HTML tags (in this case, my form). How would I do that? Cant find some good examples on this.
– Toufik
Nov 13 '18 at 15:43
Or..should I create a new HTML page with the same styling and everything as the result.php page which will show the indexDB results. This page should only be fired when the browser is offline. Is that what you meant?
– Toufik
Nov 13 '18 at 15:45
@Toufik as you mentioned , that your app should work offline too, in this case php won't work because page won't be cached . so yes it's a good idea to create a separate html file . in php only do processing the return your data in json format and for that data too with index DB data use same html file with help of javascript
– Meena Pintu
Nov 13 '18 at 16:04
|
show 3 more comments
How about storing the data in the localStorage?
You take the barcode as key and put the stringifed data there.
answered Nov 12 '18 at 15:31
jacksboxjacksbox
6071821
Apparantly this won't work as nice as indexedDB because of the weakness that the cache can increase rapidly in size with this kind of data. IndexedDB can handle this better from what I understand.
– Toufik
Nov 13 '18 at 11:43
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53264610%2fwhat-caching-technique-to-use-for-my-situation%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
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:
- The first call made retrieve data on pill X
- Data rendered on page, data also cached to IndexedDB as JSON
- User searches for pill X again
- 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.
answered Nov 12 '18 at 15:35
JonnyIrvingJonnyIrving
4612616
1
Thank you JonnyIrving. I indeed think it will come to these basic steps. The only thing that I don't know yet is how to display the results of the database in my php file. I understand that the barcode could serve as the keypath (because these are unique) but the moment that submit button is hit again in offline modus, it should display the earlier saved data retrieved from MySQL into my textboxes and not in the console of the browser.
– Toufik
Nov 13 '18 at 11:42
Well if you go by the above steps then you wouldn’t need the code to handle offline vs online sessions differently because the service worker would simple intercept and resolve the call that would have been made to the service and instead respond with data from IndexedDB.
– JonnyIrving
Nov 13 '18 at 22:28
add a comment |
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:
- The first call made retrieve data on pill X
- Data rendered on page, data also cached to IndexedDB as JSON
- User searches for pill X again
- 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.
answered Nov 12 '18 at 15:35
JonnyIrvingJonnyIrving
4612616
1
Thank you JonnyIrving. I indeed think it will come to these basic steps. The only thing that I don't know yet is how to display the results of the database in my php file. I understand that the barcode could serve as the keypath (because these are unique) but the moment that submit button is hit again in offline modus, it should display the earlier saved data retrieved from MySQL into my textboxes and not in the console of the browser.
– Toufik
Nov 13 '18 at 11:42
Well if you go by the above steps then you wouldn’t need the code to handle offline vs online sessions differently because the service worker would simple intercept and resolve the call that would have been made to the service and instead respond with data from IndexedDB.
– JonnyIrving
Nov 13 '18 at 22:28
add a comment |
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:
- The first call made retrieve data on pill X
- Data rendered on page, data also cached to IndexedDB as JSON
- User searches for pill X again
- 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.
answered Nov 12 '18 at 15:35
JonnyIrvingJonnyIrving
4612616
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:
- The first call made retrieve data on pill X
- Data rendered on page, data also cached to IndexedDB as JSON
- User searches for pill X again
- 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.
answered Nov 12 '18 at 15:35
JonnyIrvingJonnyIrving
4612616
answered Nov 12 '18 at 15:35
JonnyIrvingJonnyIrving
4612616
answered Nov 12 '18 at 15:35
JonnyIrvingJonnyIrving
4612616
answered Nov 12 '18 at 15:35
JonnyIrvingJonnyIrving
4612616
4612616
1
Thank you JonnyIrving. I indeed think it will come to these basic steps. The only thing that I don't know yet is how to display the results of the database in my php file. I understand that the barcode could serve as the keypath (because these are unique) but the moment that submit button is hit again in offline modus, it should display the earlier saved data retrieved from MySQL into my textboxes and not in the console of the browser.
– Toufik
Nov 13 '18 at 11:42
Well if you go by the above steps then you wouldn’t need the code to handle offline vs online sessions differently because the service worker would simple intercept and resolve the call that would have been made to the service and instead respond with data from IndexedDB.
– JonnyIrving
Nov 13 '18 at 22:28
add a comment |
1
Thank you JonnyIrving. I indeed think it will come to these basic steps. The only thing that I don't know yet is how to display the results of the database in my php file. I understand that the barcode could serve as the keypath (because these are unique) but the moment that submit button is hit again in offline modus, it should display the earlier saved data retrieved from MySQL into my textboxes and not in the console of the browser.
– Toufik
Nov 13 '18 at 11:42
Well if you go by the above steps then you wouldn’t need the code to handle offline vs online sessions differently because the service worker would simple intercept and resolve the call that would have been made to the service and instead respond with data from IndexedDB.
– JonnyIrving
Nov 13 '18 at 22:28
1
1
Thank you JonnyIrving. I indeed think it will come to these basic steps. The only thing that I don't know yet is how to display the results of the database in my php file. I understand that the barcode could serve as the keypath (because these are unique) but the moment that submit button is hit again in offline modus, it should display the earlier saved data retrieved from MySQL into my textboxes and not in the console of the browser.
– Toufik
Nov 13 '18 at 11:42
Thank you JonnyIrving. I indeed think it will come to these basic steps. The only thing that I don't know yet is how to display the results of the database in my php file. I understand that the barcode could serve as the keypath (because these are unique) but the moment that submit button is hit again in offline modus, it should display the earlier saved data retrieved from MySQL into my textboxes and not in the console of the browser.
– Toufik
Nov 13 '18 at 11:42
Well if you go by the above steps then you wouldn’t need the code to handle offline vs online sessions differently because the service worker would simple intercept and resolve the call that would have been made to the service and instead respond with data from IndexedDB.
– JonnyIrving
Nov 13 '18 at 22:28
Well if you go by the above steps then you wouldn’t need the code to handle offline vs online sessions differently because the service worker would simple intercept and resolve the call that would have been made to the service and instead respond with data from IndexedDB.
– JonnyIrving
Nov 13 '18 at 22:28
add a comment |
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
answered Nov 12 '18 at 15:49
Meena PintuMeena Pintu
1357
I think this will work. There are plenty of examples on how to use IndexDB. I only need to find a way on how to display the results of this DB in the page of desire (in this case, my .php file). So far I only see that the results are displayed inside the console of the browser.
– Toufik
Nov 13 '18 at 11:37
php won't work as indexDB is a client side database , only javascript will work . you need to write code in javascript with will store data in indexDB and fetch data from indexDB and then display on browser . but not .php as php get executed server side and output html served to browser by php interpreter .
– Meena Pintu
Nov 13 '18 at 13:42
I know, but I dont meant that I will use php to store the data in indexDB. My PHP file contains a bit of HTML code and I want to display whatever I stored in indexDB into those HTML tags (in this case, my form). How would I do that? Cant find some good examples on this.
– Toufik
Nov 13 '18 at 15:43
Or..should I create a new HTML page with the same styling and everything as the result.php page which will show the indexDB results. This page should only be fired when the browser is offline. Is that what you meant?
– Toufik
Nov 13 '18 at 15:45
@Toufik as you mentioned , that your app should work offline too, in this case php won't work because page won't be cached . so yes it's a good idea to create a separate html file . in php only do processing the return your data in json format and for that data too with index DB data use same html file with help of javascript
– Meena Pintu
Nov 13 '18 at 16:04
|
show 3 more comments
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
answered Nov 12 '18 at 15:49
Meena PintuMeena Pintu
1357
I think this will work. There are plenty of examples on how to use IndexDB. I only need to find a way on how to display the results of this DB in the page of desire (in this case, my .php file). So far I only see that the results are displayed inside the console of the browser.
– Toufik
Nov 13 '18 at 11:37
php won't work as indexDB is a client side database , only javascript will work . you need to write code in javascript with will store data in indexDB and fetch data from indexDB and then display on browser . but not .php as php get executed server side and output html served to browser by php interpreter .
– Meena Pintu
Nov 13 '18 at 13:42
I know, but I dont meant that I will use php to store the data in indexDB. My PHP file contains a bit of HTML code and I want to display whatever I stored in indexDB into those HTML tags (in this case, my form). How would I do that? Cant find some good examples on this.
– Toufik
Nov 13 '18 at 15:43
Or..should I create a new HTML page with the same styling and everything as the result.php page which will show the indexDB results. This page should only be fired when the browser is offline. Is that what you meant?
– Toufik
Nov 13 '18 at 15:45
@Toufik as you mentioned , that your app should work offline too, in this case php won't work because page won't be cached . so yes it's a good idea to create a separate html file . in php only do processing the return your data in json format and for that data too with index DB data use same html file with help of javascript
– Meena Pintu
Nov 13 '18 at 16:04
|
show 3 more comments
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
answered Nov 12 '18 at 15:49
Meena PintuMeena Pintu
1357
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
answered Nov 12 '18 at 15:49
Meena PintuMeena Pintu
1357
answered Nov 12 '18 at 15:49
Meena PintuMeena Pintu
1357
answered Nov 12 '18 at 15:49
Meena PintuMeena Pintu
1357
answered Nov 12 '18 at 15:49
Meena PintuMeena Pintu
1357
1357
I think this will work. There are plenty of examples on how to use IndexDB. I only need to find a way on how to display the results of this DB in the page of desire (in this case, my .php file). So far I only see that the results are displayed inside the console of the browser.
– Toufik
Nov 13 '18 at 11:37
php won't work as indexDB is a client side database , only javascript will work . you need to write code in javascript with will store data in indexDB and fetch data from indexDB and then display on browser . but not .php as php get executed server side and output html served to browser by php interpreter .
– Meena Pintu
Nov 13 '18 at 13:42
I know, but I dont meant that I will use php to store the data in indexDB. My PHP file contains a bit of HTML code and I want to display whatever I stored in indexDB into those HTML tags (in this case, my form). How would I do that? Cant find some good examples on this.
– Toufik
Nov 13 '18 at 15:43
Or..should I create a new HTML page with the same styling and everything as the result.php page which will show the indexDB results. This page should only be fired when the browser is offline. Is that what you meant?
– Toufik
Nov 13 '18 at 15:45
@Toufik as you mentioned , that your app should work offline too, in this case php won't work because page won't be cached . so yes it's a good idea to create a separate html file . in php only do processing the return your data in json format and for that data too with index DB data use same html file with help of javascript
– Meena Pintu
Nov 13 '18 at 16:04
|
show 3 more comments
I think this will work. There are plenty of examples on how to use IndexDB. I only need to find a way on how to display the results of this DB in the page of desire (in this case, my .php file). So far I only see that the results are displayed inside the console of the browser.
– Toufik
Nov 13 '18 at 11:37
php won't work as indexDB is a client side database , only javascript will work . you need to write code in javascript with will store data in indexDB and fetch data from indexDB and then display on browser . but not .php as php get executed server side and output html served to browser by php interpreter .
– Meena Pintu
Nov 13 '18 at 13:42
I know, but I dont meant that I will use php to store the data in indexDB. My PHP file contains a bit of HTML code and I want to display whatever I stored in indexDB into those HTML tags (in this case, my form). How would I do that? Cant find some good examples on this.
– Toufik
Nov 13 '18 at 15:43
Or..should I create a new HTML page with the same styling and everything as the result.php page which will show the indexDB results. This page should only be fired when the browser is offline. Is that what you meant?
– Toufik
Nov 13 '18 at 15:45
@Toufik as you mentioned , that your app should work offline too, in this case php won't work because page won't be cached . so yes it's a good idea to create a separate html file . in php only do processing the return your data in json format and for that data too with index DB data use same html file with help of javascript
– Meena Pintu
Nov 13 '18 at 16:04
I think this will work. There are plenty of examples on how to use IndexDB. I only need to find a way on how to display the results of this DB in the page of desire (in this case, my .php file). So far I only see that the results are displayed inside the console of the browser.
– Toufik
Nov 13 '18 at 11:37
I think this will work. There are plenty of examples on how to use IndexDB. I only need to find a way on how to display the results of this DB in the page of desire (in this case, my .php file). So far I only see that the results are displayed inside the console of the browser.
– Toufik
Nov 13 '18 at 11:37
php won't work as indexDB is a client side database , only javascript will work . you need to write code in javascript with will store data in indexDB and fetch data from indexDB and then display on browser . but not .php as php get executed server side and output html served to browser by php interpreter .
– Meena Pintu
Nov 13 '18 at 13:42
php won't work as indexDB is a client side database , only javascript will work . you need to write code in javascript with will store data in indexDB and fetch data from indexDB and then display on browser . but not .php as php get executed server side and output html served to browser by php interpreter .
– Meena Pintu
Nov 13 '18 at 13:42
I know, but I dont meant that I will use php to store the data in indexDB. My PHP file contains a bit of HTML code and I want to display whatever I stored in indexDB into those HTML tags (in this case, my form). How would I do that? Cant find some good examples on this.
– Toufik
Nov 13 '18 at 15:43
I know, but I dont meant that I will use php to store the data in indexDB. My PHP file contains a bit of HTML code and I want to display whatever I stored in indexDB into those HTML tags (in this case, my form). How would I do that? Cant find some good examples on this.
– Toufik
Nov 13 '18 at 15:43
Or..should I create a new HTML page with the same styling and everything as the result.php page which will show the indexDB results. This page should only be fired when the browser is offline. Is that what you meant?
– Toufik
Nov 13 '18 at 15:45
Or..should I create a new HTML page with the same styling and everything as the result.php page which will show the indexDB results. This page should only be fired when the browser is offline. Is that what you meant?
– Toufik
Nov 13 '18 at 15:45
@Toufik as you mentioned , that your app should work offline too, in this case php won't work because page won't be cached . so yes it's a good idea to create a separate html file . in php only do processing the return your data in json format and for that data too with index DB data use same html file with help of javascript
– Meena Pintu
Nov 13 '18 at 16:04
@Toufik as you mentioned , that your app should work offline too, in this case php won't work because page won't be cached . so yes it's a good idea to create a separate html file . in php only do processing the return your data in json format and for that data too with index DB data use same html file with help of javascript
– Meena Pintu
Nov 13 '18 at 16:04
|
show 3 more comments
How about storing the data in the localStorage?
You take the barcode as key and put the stringifed data there.
answered Nov 12 '18 at 15:31
jacksboxjacksbox
6071821
Apparantly this won't work as nice as indexedDB because of the weakness that the cache can increase rapidly in size with this kind of data. IndexedDB can handle this better from what I understand.
– Toufik
Nov 13 '18 at 11:43
add a comment |
How about storing the data in the localStorage?
You take the barcode as key and put the stringifed data there.
answered Nov 12 '18 at 15:31
jacksboxjacksbox
6071821
Apparantly this won't work as nice as indexedDB because of the weakness that the cache can increase rapidly in size with this kind of data. IndexedDB can handle this better from what I understand.
– Toufik
Nov 13 '18 at 11:43
add a comment |
How about storing the data in the localStorage?
You take the barcode as key and put the stringifed data there.
answered Nov 12 '18 at 15:31
jacksboxjacksbox
6071821
How about storing the data in the localStorage?
You take the barcode as key and put the stringifed data there.
answered Nov 12 '18 at 15:31
jacksboxjacksbox
6071821
answered Nov 12 '18 at 15:31
jacksboxjacksbox
6071821
answered Nov 12 '18 at 15:31
jacksboxjacksbox
6071821
answered Nov 12 '18 at 15:31
jacksboxjacksbox
6071821
6071821
Apparantly this won't work as nice as indexedDB because of the weakness that the cache can increase rapidly in size with this kind of data. IndexedDB can handle this better from what I understand.
– Toufik
Nov 13 '18 at 11:43
add a comment |
Apparantly this won't work as nice as indexedDB because of the weakness that the cache can increase rapidly in size with this kind of data. IndexedDB can handle this better from what I understand.
– Toufik
Nov 13 '18 at 11:43
Apparantly this won't work as nice as indexedDB because of the weakness that the cache can increase rapidly in size with this kind of data. IndexedDB can handle this better from what I understand.
– Toufik
Nov 13 '18 at 11:43
Apparantly this won't work as nice as indexedDB because of the weakness that the cache can increase rapidly in size with this kind of data. IndexedDB can handle this better from what I understand.
– Toufik
Nov 13 '18 at 11:43
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53264610%2fwhat-caching-technique-to-use-for-my-situation%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Google suggest IndexedDB - might be worth checking those links if you haven't already... this isn't something I've looked into before so it was useful to me anyway :)
– CD001
Nov 12 '18 at 15:28
I see that more people are suggesting this IndexedDB. I will look more into this, Thank you!
– Toufik
Nov 13 '18 at 11:38