Should I include large files in PWA build for offline capability?
I am developing a PWA with Vue 3 CLI that grabs some of it's content from a seperate CMS/API. The application is a touchscreen game and a primary use case is running without an internet connection, although the user environment is controlled and the game can be updated with latest updates sync'd and cached via ServiceWorkers when required.
When I build my app, Webpack performance recommendations warn of assets larger than the recommended size limit; in this case an intro video (25MB) and some font files (300kB each).
Should I be serving the video and fonts (and other large files) from the CMS/API and keeping my Vue app build as small as possible, bearing in mind the offline functionality being important? Or is there a good reason to package the fonts and video in the Vue JS build output?
This is my first PWA, so am just looking for confirmation whether to follow the Webpack guidelines in this case, given the app functioning properly offline is a priority?
vue.js webpack service-worker progressive-web-apps offline-caching
asked Nov 20 '18 at 11:40
Rhecil Codes
102113
add a comment |
I am developing a PWA with Vue 3 CLI that grabs some of it's content from a seperate CMS/API. The application is a touchscreen game and a primary use case is running without an internet connection, although the user environment is controlled and the game can be updated with latest updates sync'd and cached via ServiceWorkers when required.
When I build my app, Webpack performance recommendations warn of assets larger than the recommended size limit; in this case an intro video (25MB) and some font files (300kB each).
Should I be serving the video and fonts (and other large files) from the CMS/API and keeping my Vue app build as small as possible, bearing in mind the offline functionality being important? Or is there a good reason to package the fonts and video in the Vue JS build output?
This is my first PWA, so am just looking for confirmation whether to follow the Webpack guidelines in this case, given the app functioning properly offline is a priority?
vue.js webpack service-worker progressive-web-apps offline-caching
asked Nov 20 '18 at 11:40
Rhecil Codes
102113
add a comment |
I am developing a PWA with Vue 3 CLI that grabs some of it's content from a seperate CMS/API. The application is a touchscreen game and a primary use case is running without an internet connection, although the user environment is controlled and the game can be updated with latest updates sync'd and cached via ServiceWorkers when required.
When I build my app, Webpack performance recommendations warn of assets larger than the recommended size limit; in this case an intro video (25MB) and some font files (300kB each).
Should I be serving the video and fonts (and other large files) from the CMS/API and keeping my Vue app build as small as possible, bearing in mind the offline functionality being important? Or is there a good reason to package the fonts and video in the Vue JS build output?
This is my first PWA, so am just looking for confirmation whether to follow the Webpack guidelines in this case, given the app functioning properly offline is a priority?
vue.js webpack service-worker progressive-web-apps offline-caching
asked Nov 20 '18 at 11:40
Rhecil Codes
102113
I am developing a PWA with Vue 3 CLI that grabs some of it's content from a seperate CMS/API. The application is a touchscreen game and a primary use case is running without an internet connection, although the user environment is controlled and the game can be updated with latest updates sync'd and cached via ServiceWorkers when required.
When I build my app, Webpack performance recommendations warn of assets larger than the recommended size limit; in this case an intro video (25MB) and some font files (300kB each).
Should I be serving the video and fonts (and other large files) from the CMS/API and keeping my Vue app build as small as possible, bearing in mind the offline functionality being important? Or is there a good reason to package the fonts and video in the Vue JS build output?
This is my first PWA, so am just looking for confirmation whether to follow the Webpack guidelines in this case, given the app functioning properly offline is a priority?
vue.js webpack service-worker progressive-web-apps offline-caching
vue.js webpack service-worker progressive-web-apps offline-caching
asked Nov 20 '18 at 11:40
Rhecil Codes
102113
asked Nov 20 '18 at 11:40
Rhecil Codes
102113
asked Nov 20 '18 at 11:40
Rhecil Codes
102113
asked Nov 20 '18 at 11:40
Rhecil Codes
102113
asked Nov 20 '18 at 11:40
Rhecil Codes
102113
102113
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
There is a limit you can store depending on your browser How Much Can You Store
Me personally i would not recommend to store such large video files. If it is not absolute needed for your users offline experience.
answered Nov 20 '18 at 12:00
André Kelling
197111
add a comment |
If the video is not mandatory to play the game, I would not cache it by default, but give the user the opportunity to do it if she wants.
Some players might have low quota data plans and want to not show the video.
The fonts look like a good asset to put in cache.
answered Nov 26 '18 at 17:16
Nicolas Hoizey
1,1161020
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%2f53392238%2fshould-i-include-large-files-in-pwa-build-for-offline-capability%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
There is a limit you can store depending on your browser How Much Can You Store
Me personally i would not recommend to store such large video files. If it is not absolute needed for your users offline experience.
answered Nov 20 '18 at 12:00
André Kelling
197111
add a comment |
There is a limit you can store depending on your browser How Much Can You Store
Me personally i would not recommend to store such large video files. If it is not absolute needed for your users offline experience.
answered Nov 20 '18 at 12:00
André Kelling
197111
add a comment |
There is a limit you can store depending on your browser How Much Can You Store
Me personally i would not recommend to store such large video files. If it is not absolute needed for your users offline experience.
answered Nov 20 '18 at 12:00
André Kelling
197111
There is a limit you can store depending on your browser How Much Can You Store
Me personally i would not recommend to store such large video files. If it is not absolute needed for your users offline experience.
answered Nov 20 '18 at 12:00
André Kelling
197111
answered Nov 20 '18 at 12:00
André Kelling
197111
answered Nov 20 '18 at 12:00
André Kelling
197111
answered Nov 20 '18 at 12:00
André Kelling
197111
197111
add a comment |
add a comment |
If the video is not mandatory to play the game, I would not cache it by default, but give the user the opportunity to do it if she wants.
Some players might have low quota data plans and want to not show the video.
The fonts look like a good asset to put in cache.
answered Nov 26 '18 at 17:16
Nicolas Hoizey
1,1161020
add a comment |
If the video is not mandatory to play the game, I would not cache it by default, but give the user the opportunity to do it if she wants.
Some players might have low quota data plans and want to not show the video.
The fonts look like a good asset to put in cache.
answered Nov 26 '18 at 17:16
Nicolas Hoizey
1,1161020
add a comment |
If the video is not mandatory to play the game, I would not cache it by default, but give the user the opportunity to do it if she wants.
Some players might have low quota data plans and want to not show the video.
The fonts look like a good asset to put in cache.
answered Nov 26 '18 at 17:16
Nicolas Hoizey
1,1161020
If the video is not mandatory to play the game, I would not cache it by default, but give the user the opportunity to do it if she wants.
Some players might have low quota data plans and want to not show the video.
The fonts look like a good asset to put in cache.
answered Nov 26 '18 at 17:16
Nicolas Hoizey
1,1161020
answered Nov 26 '18 at 17:16
Nicolas Hoizey
1,1161020
answered Nov 26 '18 at 17:16
Nicolas Hoizey
1,1161020
answered Nov 26 '18 at 17:16
Nicolas Hoizey
1,1161020
1,1161020
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53392238%2fshould-i-include-large-files-in-pwa-build-for-offline-capability%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
