This is an automated email from the ASF dual-hosted git repository. wangzx pushed a commit to branch pwa in repository https://gitbox.apache.org/repos/asf/echarts-website.git
commit b5a558922b83d9f539b7fbfaa3946558adce7d0e Author: plainheart <[email protected]> AuthorDate: Tue Apr 19 20:56:30 2022 +0800 fix: remove tips for offline ready --- .scripts/pwa/i18n.json | 2 -- .scripts/pwa/main.js | 30 ++++++++++-------------------- .scripts/pwa/style.css | 8 +------- 3 files changed, 11 insertions(+), 29 deletions(-) diff --git a/.scripts/pwa/i18n.json b/.scripts/pwa/i18n.json index 757cd0d5..3938ce63 100644 --- a/.scripts/pwa/i18n.json +++ b/.scripts/pwa/i18n.json @@ -2,13 +2,11 @@ "zh": { "Reload": "刷新", "Close": "关闭", - "ReadyOffline": "当前页面已可以离线访问", "NewContent": "有更新可用，点击”刷新“按钮获取最新内容" }, "en": { "Reload": "Reload", "Close": "Close", - "ReadyOffline": "App ready to work offline", "NewContent": "New content available, click on reload button to update" } } \ No newline at end of file diff --git a/.scripts/pwa/main.js b/.scripts/pwa/main.js index ffeb5253..9ded0adc 100644 --- a/.scripts/pwa/main.js +++ b/.scripts/pwa/main.js @@ -13,10 +13,9 @@ window.addEventListener('load', () => { const pwaToast = document.createElement('div') pwaToast.className = 'pwa-toast' pwaToast.setAttribute('role', 'alert') - pwaToast.innerHTML = `<div class="message"></div><button id="pwa-refresh">${lang['Reload']}</button><button id="pwa-close">${lang['Close']}</button>` + pwaToast.innerHTML = `<div class="pwa-msg">${lang['NewContent']}</div><button id="pwa-close">${lang['Close']}</button><button id="pwa-refresh">${lang['Reload']}</button>` document.body.appendChild(pwaToast) - const pwaToastMessage = pwaToast.querySelector('.message') const pwaCloseBtn = pwaToast.querySelector('#pwa-close') const pwaRefreshBtn = pwaToast.querySelector('#pwa-refresh') @@ -24,34 +23,25 @@ window.addEventListener('load', () => { const refreshCallback = () => refreshSW && refreshSW(true) - const hidePwaToast = () => { - if (pwaToast.classList.contains('refresh')) { - pwaRefreshBtn.removeEventListener('click', refreshCallback) - } - - pwaToast.classList.remove('show', 'refresh') + const hideToast = () => { + pwaToast.classList.remove('show') } - const showPwaToast = (offline) => { - hidePwaToast() - - if (!offline) { - pwaRefreshBtn.addEventListener('click', refreshCallback) - pwaToast.classList.add('refresh') - } + const showToast = () => { + hideToast() pwaToast.classList.add('show') } - pwaCloseBtn.addEventListener('click', hidePwaToast) + pwaRefreshBtn.addEventListener('click', refreshCallback) + pwaCloseBtn.addEventListener('click', hideToast) + refreshSW = registerSW({ immediate: true, onOfflineReady() { - pwaToastMessage.innerHTML = lang['ReadyOffline'] - showPwaToast(true) + console.log('Page is ready to work offline') }, onNeedRefresh() { - pwaToastMessage.innerHTML = lang['NewContent'] - showPwaToast(false) + showToast() } }) }) \ No newline at end of file diff --git a/.scripts/pwa/style.css b/.scripts/pwa/style.css index 4bad92e2..f919388b 100644 --- a/.scripts/pwa/style.css +++ b/.scripts/pwa/style.css @@ -14,7 +14,7 @@ background-color: #fff; transition: opacity ease .5s, visibility ease .5s; } -.pwa-toast .message { +.pwa-toast .pwa-msg { margin-bottom: 8px; } .pwa-toast button { @@ -29,10 +29,4 @@ .pwa-toast.show { visibility: visible; opacity: 1; -} -button#pwa-refresh { - display: none; -} -.pwa-toast.show.refresh button#pwa-refresh { - display: block; } \ No newline at end of file --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
