Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

service worker and sw precache with angular universal

I used sw precache with service worker.I cached only browser folder in service worker.So that server side rendering not working in service worker.can anyone pls help me to solve this.if ssr working service worker not working and vice versa

below is my sw precache config.json

module.exports = {
navigateFallback: '/index.html',
stripPrefix: 'dist/browser',
root: 'dist/browser',
staticFileGlobs: [

'dist/browser/index.html',
'dist/browser/**.js',
'dist/browser/**.css',
'dist/browser/**.ico',
'dist/browser/assets/images/**.jpg',
'dist/browser/assets/images/**.png',
'dist/browser/assets/images/**.gif',
'dist/browser/assets/js/**/**.js',
'dist/browser/assets/js/**.js',
'dist/browser/assets/css/**.css'


 ],

runtimeCaching: [{
urlPattern: /^https:\/\/tg\.s3\.rfyfg\.com\//,
handler: 'cacheFirst'
}]
};

Thanks

like image 308
kamalav Avatar asked May 21 '18 05:05

kamalav


People also ask

Does Angular use service workers?

Adding a service worker to an Angular app is one of the steps for turning it into a Progressive Web App (also known as a PWA). At its simplest, a service worker is a script that runs in the web browser and manages caching for an application. Service workers function as a network proxy.

What is NGSW JSON?

The ngsw-config.json configuration file specifies which files and data URLs the Angular service worker should cache and how it should update the cached files and data. The Angular CLI processes the configuration file during ng build .

What is NGSW cache bust?

It's trying to get the service worker configuration to see what needs updated, but can't access the file. However, this should not impede the service worker from serving up anything it's already cached, and operate normally until back online. Once online you will see the call to the ngsw.

Which of the following design goals are Behaviours followed by Angular service workers select all that apply?

The Angular service worker's behavior follows that design goal: Caching an application is like installing a native application. The application is cached as one unit, and all files update together.


1 Answers

You could choose to only send server-side rendered content to web crawlers so that they can index your page for SEO.

An example configuration using nginx:

location / {
    proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto  https;
    proxy_set_header Host               $http_host;
    proxy_redirect                      off;
    proxy_ignore_headers                X-Accel-Expires Expires Cache-Control;
    if ($http_user_agent ~* "whatsapp|googlebot|yahoo|bingbot|baiduspider|yandex|yeti|yodaobot|gigabot|ia_archiver|facebookexternalhit|twitterbot|developers\.google\.com|linkedinbot|discordbot|embedly|quora link preview|slackbot|pinterest|vkShare") {
        proxy_pass http://localhost:4000; // your server
        break;
    }
    rewrite . /static/index.html last;
}
like image 142
Joshua Chan Avatar answered Oct 20 '22 00:10

Joshua Chan