Add support for persistent storage

This commit is contained in:
toasted-nutbread 2019-10-11 19:08:54 -04:00
parent 2bfc7e3972
commit 6014fe5344
3 changed files with 52 additions and 4 deletions

View File

@ -137,6 +137,17 @@
white-space: pre;
}
.btn-inner-middle {
vertical-align: middle;
}
.storage-persist-button-inner {
pointer-events: none;
}
input[type=checkbox]#storage-persist-button-checkbox {
margin: 0 0.375em 0 0;
padding: 0;
}
[data-show-for-browser] {
display: none;
}

View File

@ -724,14 +724,13 @@ async function storageEstimate() {
storageEstimate.mostRecent = null;
async function storageInfoInitialize() {
storagePersistInitialize();
const browser = await getBrowser();
const container = document.querySelector('#storage-info');
container.setAttribute('data-browser', browser);
await storageShowInfo();
container.classList.remove('storage-hidden');
document.querySelector('#storage-refresh').addEventListener('click', () => storageShowInfo(), false);
}
@ -770,6 +769,35 @@ function storageSpinnerShow(show) {
}
}
async function storagePersistInitialize() {
if (!(navigator.storage && navigator.storage.persist)) {
// Not supported
return;
}
const info = document.querySelector('#storage-persist-info');
const button = document.querySelector('#storage-persist-button');
const checkbox = document.querySelector('#storage-persist-button-checkbox');
info.classList.remove('storage-hidden');
button.classList.remove('storage-hidden');
let persisted = await navigator.storage.persisted();
if (persisted) {
checkbox.checked = true;
}
button.addEventListener('click', async () => {
if (persisted) {
return;
}
if (await navigator.storage.persist()) {
persisted = true;
checkbox.checked = true;
}
}, false);
}
/*
* Information

View File

@ -395,12 +395,20 @@
</div>
</div>
<div id="storage-info" class="storage-hidden">
<div id="storage-info">
<div>
<img src="/mixed/img/spinner.gif" class="pull-right" id="storage-spinner" />
<h3>Storage</h3>
</div>
<div id="storage-persist-info" class="storage-hidden">
<p class="help-block">
Web browsers may sometimes clear stored data if the device is running low on storage space.
This can result in the stored dictionary data being deleted unexpectedly, causing Yomichan to stop working for no apparent reason.
In order to prevent this, persistent storage must be enable by clicking the "Persistent Storage" button below.
</p>
</div>
<div id="storage-use" class="storage-hidden">
<p class="help-block">
Yomichan is using approximately <strong id="storage-usage"></strong> of <strong id="storage-quota"></strong>.
@ -425,7 +433,8 @@
</div></div>
<div>
<button class="btn btn-default" id="storage-refresh">Refresh</button>
<button class="btn btn-default" id="storage-refresh"><span class="btn-inner-middle">Refresh</span></button>
<button class="btn btn-default storage-hidden ignore-form-changes" id="storage-persist-button"><span class="storage-persist-button-inner"><input type="checkbox" class="btn-inner-middle" id="storage-persist-button-checkbox" readonly /><span class="btn-inner-middle">Persistent Storage</span></span></button>
</div>
</div>