Adding service workers in Aurelia The 2019 Stack Overflow Developer Survey Results Are InAurelia CLI PWA with Webpack and WorkboxHow to configure service workers with create-react-appHow to register service worker using webpack?Service worker using sw-precache, webpack and reactWrite data to firebase in service workerAdd rails index page to manifest for service workerWorkbox service worker + manifest.json setup webpack 4How to add webpack hash name to service worker file?How can I customize my Service Worker based on environment variables?Unable to register service worker in angular using angular cliService worker fails to register on Facebook Instant Games
Carnot-Caratheodory metric
What do hard-Brexiteers want with respect to the Irish border?
What is the motivation for a law requiring 2 parties to consent for recording a conversation
Time travel alters history but people keep saying nothing's changed
How come people say “Would of”?
Inline version of a function returns different value then non-inline version
How are circuits which use complex ICs normally simulated?
If the Wish spell is used to duplicate the effect of Simulacrum, are existing duplicates destroyed?
Is domain driven design an anti-SQL pattern?
Dual Citizen. Exited the US on Italian passport recently
Why Did Howard Stark Use All The Vibranium They Had On A Prototype Shield?
Landlord wants to switch my lease to a "Land contract" to "get back at the city"
How long do I have to send payment?
Why is my p-value correlated to difference between means in two sample tests?
Where to refill my bottle in India?
What are the motivations for publishing new editions of an existing textbook, beyond new discoveries in a field?
Understanding the implication of what "well-defined" means for the operation in quotient group
Inversion Puzzle
Output the Arecibo Message
Why is Grand Jury testimony secret?
Is three citations per paragraph excessive for undergraduate research paper?
Is this food a bread or a loaf?
"What time...?" or "At what time...?" - what is more grammatically correct?
What is a mixture ratio of propellant?
Adding service workers in Aurelia
The 2019 Stack Overflow Developer Survey Results Are InAurelia CLI PWA with Webpack and WorkboxHow to configure service workers with create-react-appHow to register service worker using webpack?Service worker using sw-precache, webpack and reactWrite data to firebase in service workerAdd rails index page to manifest for service workerWorkbox service worker + manifest.json setup webpack 4How to add webpack hash name to service worker file?How can I customize my Service Worker based on environment variables?Unable to register service worker in angular using angular cliService worker fails to register on Facebook Instant Games
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
To make my aurelia app a proper PWA, that I have created using aurelia cli, I need to register a service worker.
There is already a similar unanswered question or few discussions and forum posts on the web available regarding the subject matter but I couldn't find anything concrete to help me get started.
I am thinking of three possible ways to handle this
option[1] - use index.html page and register a service worer inside a script tag outside the scope of aurelia app.
// service worker in index.html file
<!DOCTYPE html>
<html>
<head>
</head>
<body aurelia-app="main">
<script type="text/javascript">
... my service worker code here ...
</script>
</body>
</html>
option[2] - inside aurelia main.js/main.ts
// inside aurelia main.js/main.ts file
export function configure(aurelia)
... rest of the conf ...
registerServiceWorker();
return aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
option [3] - app.js file
// inside app.js file constructor
export class App {
constructor()
this.registerServiceWorker();
What would be the proper/right way to handle this task? As I am using webpack, would it need more configuration to make the service worker play nice with webpack and aurelia?
If using WorkBox is the only way forward, I can live with that too but to keep things simple I would prefer to use vanilla service workers directly in aurelia.
javascript aurelia service-worker aurelia-framework
asked Mar 22 at 2:53
lahorylahory
284
add a comment |
To make my aurelia app a proper PWA, that I have created using aurelia cli, I need to register a service worker.
There is already a similar unanswered question or few discussions and forum posts on the web available regarding the subject matter but I couldn't find anything concrete to help me get started.
I am thinking of three possible ways to handle this
option[1] - use index.html page and register a service worer inside a script tag outside the scope of aurelia app.
// service worker in index.html file
<!DOCTYPE html>
<html>
<head>
</head>
<body aurelia-app="main">
<script type="text/javascript">
... my service worker code here ...
</script>
</body>
</html>
option[2] - inside aurelia main.js/main.ts
// inside aurelia main.js/main.ts file
export function configure(aurelia)
... rest of the conf ...
registerServiceWorker();
return aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
option [3] - app.js file
// inside app.js file constructor
export class App {
constructor()
this.registerServiceWorker();
What would be the proper/right way to handle this task? As I am using webpack, would it need more configuration to make the service worker play nice with webpack and aurelia?
If using WorkBox is the only way forward, I can live with that too but to keep things simple I would prefer to use vanilla service workers directly in aurelia.
javascript aurelia service-worker aurelia-framework
asked Mar 22 at 2:53
lahorylahory
284
add a comment |
To make my aurelia app a proper PWA, that I have created using aurelia cli, I need to register a service worker.
There is already a similar unanswered question or few discussions and forum posts on the web available regarding the subject matter but I couldn't find anything concrete to help me get started.
I am thinking of three possible ways to handle this
option[1] - use index.html page and register a service worer inside a script tag outside the scope of aurelia app.
// service worker in index.html file
<!DOCTYPE html>
<html>
<head>
</head>
<body aurelia-app="main">
<script type="text/javascript">
... my service worker code here ...
</script>
</body>
</html>
option[2] - inside aurelia main.js/main.ts
// inside aurelia main.js/main.ts file
export function configure(aurelia)
... rest of the conf ...
registerServiceWorker();
return aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
option [3] - app.js file
// inside app.js file constructor
export class App {
constructor()
this.registerServiceWorker();
What would be the proper/right way to handle this task? As I am using webpack, would it need more configuration to make the service worker play nice with webpack and aurelia?
If using WorkBox is the only way forward, I can live with that too but to keep things simple I would prefer to use vanilla service workers directly in aurelia.
javascript aurelia service-worker aurelia-framework
asked Mar 22 at 2:53
lahorylahory
284
To make my aurelia app a proper PWA, that I have created using aurelia cli, I need to register a service worker.
There is already a similar unanswered question or few discussions and forum posts on the web available regarding the subject matter but I couldn't find anything concrete to help me get started.
I am thinking of three possible ways to handle this
option[1] - use index.html page and register a service worer inside a script tag outside the scope of aurelia app.
// service worker in index.html file
<!DOCTYPE html>
<html>
<head>
</head>
<body aurelia-app="main">
<script type="text/javascript">
... my service worker code here ...
</script>
</body>
</html>
option[2] - inside aurelia main.js/main.ts
// inside aurelia main.js/main.ts file
export function configure(aurelia)
... rest of the conf ...
registerServiceWorker();
return aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
option [3] - app.js file
// inside app.js file constructor
export class App {
constructor()
this.registerServiceWorker();
What would be the proper/right way to handle this task? As I am using webpack, would it need more configuration to make the service worker play nice with webpack and aurelia?
If using WorkBox is the only way forward, I can live with that too but to keep things simple I would prefer to use vanilla service workers directly in aurelia.
javascript aurelia service-worker aurelia-framework
javascript aurelia service-worker aurelia-framework
asked Mar 22 at 2:53
lahorylahory
284
asked Mar 22 at 2:53
lahorylahory
284
edited Mar 22 at 3:00
lahory
asked Mar 22 at 2:53
lahorylahory
284
asked Mar 22 at 2:53
lahorylahory
284
asked Mar 22 at 2:53
lahorylahory
284
284
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
This is how I made it to work.
1- insatll workbox plugin
yarn add workbox-webpack-plugin
2- configure webpack
//webpack.config.js
// add plugin somewhere in the top section
const workboxPlugin = require('workbox-webpack-plugin');
//inside plugins section
plugins: [
// somewhere in the bottom is OK
new workboxPlugin.GenerateSW(
swDest: 'sw.js', // name of your service worker file
clientsClaim: true,
skipWaiting: true
),
3- put your sw.js file in static dir. It will be moved to the dist folder on build.
4- if it is a complete PWA, add manifest.json file too in the static dir. you can get a sample manifest.json file from google developr site.
5- add service worker init script into the index file
// index.html or index.ejs file
<script>
if ('serviceWorker' in navigator)
navigator.serviceWorker.register('/sw.js')
.then(function(registration) return registration.update(); )
.catch(error => console.log(error));
</script>
run and hopefully you should get the serveiceworker installed and running.
P.S. is this the proper way to do it? I have no idea, but for now it is working for me.
answered Apr 4 at 3:17
lahorylahory
284
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%2f55292228%2fadding-service-workers-in-aurelia%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
This is how I made it to work.
1- insatll workbox plugin
yarn add workbox-webpack-plugin
2- configure webpack
//webpack.config.js
// add plugin somewhere in the top section
const workboxPlugin = require('workbox-webpack-plugin');
//inside plugins section
plugins: [
// somewhere in the bottom is OK
new workboxPlugin.GenerateSW(
swDest: 'sw.js', // name of your service worker file
clientsClaim: true,
skipWaiting: true
),
3- put your sw.js file in static dir. It will be moved to the dist folder on build.
4- if it is a complete PWA, add manifest.json file too in the static dir. you can get a sample manifest.json file from google developr site.
5- add service worker init script into the index file
// index.html or index.ejs file
<script>
if ('serviceWorker' in navigator)
navigator.serviceWorker.register('/sw.js')
.then(function(registration) return registration.update(); )
.catch(error => console.log(error));
</script>
run and hopefully you should get the serveiceworker installed and running.
P.S. is this the proper way to do it? I have no idea, but for now it is working for me.
answered Apr 4 at 3:17
lahorylahory
284
add a comment |
This is how I made it to work.
1- insatll workbox plugin
yarn add workbox-webpack-plugin
2- configure webpack
//webpack.config.js
// add plugin somewhere in the top section
const workboxPlugin = require('workbox-webpack-plugin');
//inside plugins section
plugins: [
// somewhere in the bottom is OK
new workboxPlugin.GenerateSW(
swDest: 'sw.js', // name of your service worker file
clientsClaim: true,
skipWaiting: true
),
3- put your sw.js file in static dir. It will be moved to the dist folder on build.
4- if it is a complete PWA, add manifest.json file too in the static dir. you can get a sample manifest.json file from google developr site.
5- add service worker init script into the index file
// index.html or index.ejs file
<script>
if ('serviceWorker' in navigator)
navigator.serviceWorker.register('/sw.js')
.then(function(registration) return registration.update(); )
.catch(error => console.log(error));
</script>
run and hopefully you should get the serveiceworker installed and running.
P.S. is this the proper way to do it? I have no idea, but for now it is working for me.
answered Apr 4 at 3:17
lahorylahory
284
add a comment |
This is how I made it to work.
1- insatll workbox plugin
yarn add workbox-webpack-plugin
2- configure webpack
//webpack.config.js
// add plugin somewhere in the top section
const workboxPlugin = require('workbox-webpack-plugin');
//inside plugins section
plugins: [
// somewhere in the bottom is OK
new workboxPlugin.GenerateSW(
swDest: 'sw.js', // name of your service worker file
clientsClaim: true,
skipWaiting: true
),
3- put your sw.js file in static dir. It will be moved to the dist folder on build.
4- if it is a complete PWA, add manifest.json file too in the static dir. you can get a sample manifest.json file from google developr site.
5- add service worker init script into the index file
// index.html or index.ejs file
<script>
if ('serviceWorker' in navigator)
navigator.serviceWorker.register('/sw.js')
.then(function(registration) return registration.update(); )
.catch(error => console.log(error));
</script>
run and hopefully you should get the serveiceworker installed and running.
P.S. is this the proper way to do it? I have no idea, but for now it is working for me.
answered Apr 4 at 3:17
lahorylahory
284
This is how I made it to work.
1- insatll workbox plugin
yarn add workbox-webpack-plugin
2- configure webpack
//webpack.config.js
// add plugin somewhere in the top section
const workboxPlugin = require('workbox-webpack-plugin');
//inside plugins section
plugins: [
// somewhere in the bottom is OK
new workboxPlugin.GenerateSW(
swDest: 'sw.js', // name of your service worker file
clientsClaim: true,
skipWaiting: true
),
3- put your sw.js file in static dir. It will be moved to the dist folder on build.
4- if it is a complete PWA, add manifest.json file too in the static dir. you can get a sample manifest.json file from google developr site.
5- add service worker init script into the index file
// index.html or index.ejs file
<script>
if ('serviceWorker' in navigator)
navigator.serviceWorker.register('/sw.js')
.then(function(registration) return registration.update(); )
.catch(error => console.log(error));
</script>
run and hopefully you should get the serveiceworker installed and running.
P.S. is this the proper way to do it? I have no idea, but for now it is working for me.
answered Apr 4 at 3:17
lahorylahory
284
edited Apr 4 at 3:36
answered Apr 4 at 3:17
lahorylahory
284
answered Apr 4 at 3:17
lahorylahory
284
answered Apr 4 at 3:17
lahorylahory
284
284
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.
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%2f55292228%2fadding-service-workers-in-aurelia%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
