surya/myprojplanet_vite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Workbox

Browse Source
This commit is contained in:
Paolo Arena
2021-09-22 01:14:30 +02:00
parent db4b06f67f
commit f24dd63551
17 changed files with 707 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
src-pwa/custom-service-worker.js
View File

@@ -1,24 +1,39 @@
/*
* This file (which will be your service worker)
* is picked up by the build system ONLY if
* quasar.conf > pwa > workboxPluginMode is set to "InjectManifest"
*/
import { cleanupOutdatedCaches, precacheAndRoute } from 'workbox-precaching'
import { registerRoute } from 'workbox-routing'
// Questo è il swSrc
import { clientsClaim, setCacheNameDetails, skipWaiting } from 'workbox-core'
console.log(' [ VER-0.0.63 ] _---------________------ PAO: this is my custom service worker')
import {
NetworkFirst,
NetworkOnly,
StaleWhileRevalidate,
CacheFirst,
} from 'workbox-strategies'
importScripts('../public/js/idb.js')
importScripts('../public/js/storage.js')
importScripts('../public/js/workbox-sw.js')
// Used for filtering matches based on status code, header, or both
import { CacheableResponsePlugin } from 'workbox-cacheable-response'
// Used to limit entries in cache, remove entries after a certain period of time
import { ExpirationPlugin } from 'workbox-expiration'
console.log(
' [ VER-0.0.65 ] _---------________------ PAO: this is my custom service worker')
importScripts('js/idb.js')
importScripts('js/storage.js')
importScripts('js/workbox-sw.js')
// importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js');
// importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js');
// importScripts('./ChabokSDKWorker.js', 'https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js');
let port = 3000
if (self.location.hostname.startsWith('test')) {
port = 3001
}
// console.log('SW-06 1');
console.log('SW-06 1')
const cfgenv = {
serverweb: `${self.location.protocol}//${self.location.hostname}:${port}`,
dbname: 'mydb3',
@@ -27,22 +42,22 @@ const cfgenv = {
// console.log('serverweb', cfgenv.serverweb)
async function writeData(table, data) {
async function writeData (table, data) {
// console.log('writeData', table, data);
await idbKeyval.setdata(table, data)
}
async function readAllData(table) {
async function readAllData (table) {
// console.log('readAllData', table);
return idbKeyval.getalldata(table)
}
async function clearAllData(table) {
async function clearAllData (table) {
// console.log('clearAllData', table);
await idbKeyval.clearalldata(table)
}
async function deleteItemFromData(table, id) {
async function deleteItemFromData (table, id) {
// console.log('deleteItemFromData', table, 'ID:', id);
await idbKeyval.deletedata(table, id)
@@ -59,31 +74,33 @@ if (!workbox) {
}
if (workbox) {
// console.log('WORKBOX PRESENT')
// const url = new URL(location.href);
// const debug = url.searchParams.has('debug');
const debug = false
const debug = true
workbox.setConfig({ debug })
workbox.core.setCacheNameDetails({ prefix: self.location.hostname })
const precacheList = self.__WB_MANIFEST || [];
setCacheNameDetails({
prefix: self.location.hostname,
suffix: 'v1',
precache: 'precache',
runtime: 'runtime'
})
/**
* The workboxSW.precacheAndRoute() method efficiently caches and responds to
* requests for URLs in the manifest.
* See https://goo.gl/S9QRab
*/
self.__precacheManifest = [].concat(self.__precacheManifest || [])
workbox.precaching.suppressWarnings()
workbox.precaching.precacheAndRoute(self.__precacheManifest, {})
// clientsClaim()
// skipWaiting()
// workbox.routing.registerRoute(/^http/, workbox.strategies.networkFirst(), 'GET');
precacheAndRoute(precacheList)
// cleanupOutdatedCaches()
workbox.routing.registerRoute(
registerRoute(
new RegExp(/\.(?:png|gif|jpg|jpeg|svg)$/),
new workbox.strategies.CacheFirst({
new CacheFirst({
cacheName: 'images',
plugins: [
new workbox.expiration.Plugin({
// Ensure that only requests that result in a 200 status are cached
new CacheableResponsePlugin({
statuses: [200],
}),
new ExpirationPlugin({
maxEntries: 60,
maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
}),
@@ -92,25 +109,33 @@ if (workbox) {
)
// Per Articoli....
const articleHandler = workbox.strategies.networkFirst({
const articleHandler = new NetworkFirst({
cacheName: 'articles-cache',
plugins: [
new workbox.expiration.Plugin({
// Ensure that only requests that result in a 200 status are cached
new CacheableResponsePlugin({
statuses: [200],
}),
new ExpirationPlugin({
maxEntries: 50,
}),
],
})
workbox.routing.registerRoute(
registerRoute(
new RegExp(/(.*)article(.*)\.html/), args => articleHandler.handle(args),
)
workbox.routing.registerRoute(
registerRoute(
new RegExp(/.*(?:googleapis|gstatic)\.com.*$/),
workbox.strategies.staleWhileRevalidate({
new StaleWhileRevalidate({
cacheName: 'google-fonts',
plugins: [
new workbox.expiration.Plugin({
// Ensure that only requests that result in a 200 status are cached
new CacheableResponsePlugin({
statuses: [200],
}),
new ExpirationPlugin({
maxEntries: 30,
}),
],
@@ -119,7 +144,7 @@ if (workbox) {
// console.log(' routing.registerRoute function declaration:')
function Execute_Fetch(table, args) {
function Execute_Fetch (table, args) {
console.log('Execute_Fetch registerRoute! ',
`${cfgenv.serverweb}/${table}/`)
// console.log('DATABODY:', args.event.request.body)
@@ -157,7 +182,7 @@ if (workbox) {
.then(data => {
// console.log(' 4) data = ', data)
if (data) {
myarr = idbKeyval.getArrayByTable(table, data)
const myarr = idbKeyval.getArrayByTable(table, data)
if (myarr) {
let promiseChain = Promise.resolve()
@@ -198,7 +223,7 @@ if (workbox) {
}
for (const table of MainTables) {
workbox.routing.registerRoute(
registerRoute(
new RegExp(`${cfgenv.serverweb}/${table}/`),
(args) => {
Execute_Fetch(table, args)
@@ -206,7 +231,7 @@ if (workbox) {
)
}
workbox.routing.registerRoute(
registerRoute(
(routeData) => (routeData.event.request.headers.get('accept')
.includes('text/html')), (args) => caches.match(args.event.request)
.then((response) => {
@@ -224,32 +249,46 @@ if (workbox) {
}),
)
workbox.routing.registerRoute(
registerRoute(
new RegExp(/.*\/(?:statics\/icons).*$/),
new workbox.strategies.CacheFirst({
new CacheFirst({
cacheName: 'image-cache',
plugins: [
new workbox.expiration.Plugin({
// Ensure that only requests that result in a 200 status are cached
new CacheableResponsePlugin({
statuses: [200],
}),
new ExpirationPlugin({
maxAgeSeconds: 30 * 24 * 60 * 60,
}),
],
}),
)
workbox.routing.registerRoute(
registerRoute(
new RegExp(/\.(?:js|css|font)$/),
new workbox.strategies.StaleWhileRevalidate({
new StaleWhileRevalidate({
cacheName: 'js-css-fonts',
// Ensure that only requests that result in a 200 status are cached
plugins: [
new CacheableResponsePlugin({
statuses: [200],
}),
],
}),
)
// Storage
workbox.routing.registerRoute(
registerRoute(
new RegExp(/.*(?:storage)/),
workbox.strategies.staleWhileRevalidate({
new StaleWhileRevalidate({
cacheName: 'storage',
plugins: [
new workbox.expiration.Plugin({
// Ensure that only requests that result in a 200 status are cached
new CacheableResponsePlugin({
statuses: [200],
}),
new ExpirationPlugin({
maxAgeSeconds: 30 * 24 * 60 * 60,
// Only cache 10 requests.
maxEntries: 200,
@@ -258,12 +297,16 @@ if (workbox) {
}),
)
workbox.routing.registerRoute(
registerRoute(
new RegExp(/.*\/(?:statics).*$/),
new workbox.strategies.CacheFirst({
new CacheFirst({
cacheName: 'statics',
plugins: [
new workbox.expiration.Plugin({
// Ensure that only requests that result in a 200 status are cached
new CacheableResponsePlugin({
statuses: [200],
}),
new ExpirationPlugin({
maxAgeSeconds: 10 * 24 * 60 * 60,
// Only cache 10 requests.
}),
@@ -271,15 +314,17 @@ if (workbox) {
}),
)
workbox.routing.registerRoute(
registerRoute(
new RegExp('/admin/'),
workbox.strategies.networkOnly(),
new NetworkOnly(),
)
workbox.routing.registerRoute(
/*registerRoute(
new RegExp('/owa/'),
workbox.strategies.networkOnly(),
new NetworkOnly(),
)
*/
}
if ('serviceWorker' in navigator) {
@@ -290,8 +335,8 @@ if ('serviceWorker' in navigator) {
// self.addEventListener('fetch', (event) => {
// if (event.request.url === '/') {
// const staleWhileRevalidate = new workbox.strategies.StaleWhileRevalidate();
// event.respondWith(staleWhileRevalidate.handle({ event }));
// const StaleWhileRevalidate = new StaleWhileRevalidate();
// event.respondWith(StaleWhileRevalidate.handle({ event }));
// }
// });