I’m creating my PWA using Framework7 Core and Firebase Hosting. Whenever implementing a new version (deploy) of the PWA, some users say that the PWA has a black screen, when closing and opening again it works. I notice that this happens when a user spends a long period of time without accessing the PWA.
app.js
view: {
browserHistory: true,
browserHistorySeparator: "",
browserHistoryRoot: '/',
browserHistoryTabs: "replace",
unloadTabContent: false,
browserHistoryOnLoad: true,
browserHistoryStoreHistory: false,
browserHistoryAnimateOnLoad: false,
iosSwipeBack: true,
iosSwipeBackActiveArea: 50,
mdSwipeBack: true,
},
// Register service worker (only on production build)
serviceWorker:
process.env.NODE_ENV === "production"
? {
path: "/service-worker.js",
}
: {},
workbox-config.js
module.exports = {
globDirectory: "www/",
globPatterns: ["**/*.{woff,woff2,js,css,png,jpg,svg,html}"],
globIgnores: [],
ignoreURLParametersMatching: [/^utm_/, /^fbclid$/],
swDest: `www/service-worker.js`,
cleanupOutdatedCaches: true,
runtimeCaching: [
{
urlPattern: /\.(?:js|css|html|svg|png|jpg|jpeg|woff|woff2)$/,
handler: 'StaleWhileRevalidate',
options: {
cacheName: 'static-resources',
},
},
],
skipWaiting: true,
navigateFallbackDenylist: [],
navigateFallback: "index.html",
navigateFallbackAllowlist: [/\.(?:(?:js|css)$)/],
};
vite.config.js
import path from "path";
import framework7 from "rollup-plugin-framework7";
const SRC_DIR = path.resolve(__dirname, "./src");
const PUBLIC_DIR = path.resolve(__dirname, "./public");
const BUILD_DIR = path.resolve(__dirname, "./www");
export default async () => {
return {
plugins: [framework7({ emitCss: false })],
root: SRC_DIR,
base: "/",
publicDir: PUBLIC_DIR,
build: {
outDir: BUILD_DIR,
minify: "esbuild",
sourcemap: false,
assetsInlineLimit: 0,
emptyOutDir: true,
},
resolve: {
alias: {
"@": SRC_DIR,
},
extensions: [".js", ".json", ".jsx", ".mjs", ".ts", ".tsx", ".f7", ".html"],
},
server: {
host: true,
port: 3000,
},
esbuild: {
jsxFactory: "$jsx",
jsxFragment: '"Fragment"',
},
};
};
firebase.json
{
"hosting": {
"public": "www",
"ignore": ["**/.*", "**/node_modules/**"],
"site": "testes-aso",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{
"source": "/index.html",
"headers": [
{
"key": "Cache-Control",
"value": "no-store, must-revalidate"
},
{
"key": "Expires",
"value": "0"
},
{
"key": "Pragma",
"value": "no-cache"
}
]
},
{
"source": "**/*.js",
"headers": [
{
"key": "Content-Type",
"value": "text/javascript"
}
]
},
{
"source": "**/service-worker.js",
"headers": [
{
"key": "Service-Worker-Allowed",
"value": "/"
},
{
"key": "Cache-Control",
"value": "no-cache"
}
]
}
]
}
}