Workbox PWA - service worker on iOS not handling image files referenced in CDN-hosted CSS - progressive-web-apps

We've a PWA, with a workbox-based service worker, installing in standalone mode.
Our main css file is hosted on a CDN (Cloudfront) - with the correct CORS (as are our images and other static files).
Everything works as expected on Android/Chrome. Image files referenced in the css file get handled by the service worker and served from the cache.
On iOS/Safari, any image files that are required within the CSS file go straight to network - the cache for these files is never used. The service worker doesn't seem to handle these requests at all. If I host the css file locally rather than on CDN the iOS issue goes away.
Is this a known iOS issue - or is there a possible fix?

Related

ionic app not able to refresh due to /home routing

Built a fresh ionic v5 app from blank template. Added minimal logic to the home page for a simple toy project and deployed to a static blob on Azure.
Copied www folder to a blob and then made it public. Surf to the URL of index.html but this produced many errors of runtime.js:1 Failed to load resource: the server responded with a status of 400 (One of the request inputs is out of range.)
So then I tried a fresh storage module and used the 'static website` option and that does work except...
when it runs, it adds /home to the address and if the user tries to refresh the page then it fails with The requested content does not exist. because of course it thinks that's a resource inside the site.
You can simulate this by running a server (eg. http-server) inside the www folder, run the app then refresh with F5. I notice there is no problem when running using the dev command ng serve
Older ionic projects didn't have this problem. Have I done something peculiar?
This prevents any mobile phone from viewing the app and then adding to home screen because it includes the /home in the address.
Have found a partial solution here
https://stackoverflow.com/a/56584151/769427
which describes using the 404 page setting of a static website to point at index.html.
It does make it work (and with deep linking too) but the disadvantage is that a 404 error is registered each time in the dev tools.

Deploying ionic 4 website to digitaloceans spaces CDN

I'm trying to deploy a basic ionic 4 application to spaces CDN provided by digitalocean.
I uploaded the static website on gitlabpages and the website is working.
I've tried to replicate the results on spaces CDN but the file instead of being opened by the browser get downloaded once opened.
I figured out it could be the --base-href, and I tried to modify it, but without success, the index file provided by the build still get downloaded
At first I build the ionic app
ionic build --prod --base-href="xxx.gitlab.io/xxx" //code used to deploy for gitlab pages
Then for gitlab pages I deployed it using gitlab-ci.yml file, as explained here, while for deploying on spaces I used a python script
I would expect to be able to upload an ionic build into spaces CDN and being able using the link provided to see the website.
I'm not sure if I'm doing something wrong at conceptual level using a CDN, it is actually my first time trying to serve a website using this tech.
UPDATE
I've uploaded to the CDN again, and I realized that if I use the origin link, it actually load the html (even tho it gives me a lot of errors).
While is I use the CDN link, it try to download the file.
I have purged the cache of the CDN so in my opinion the CDN and the origin should behave exactly the same, Am I wrong?

How do I invalidate the service worker cache on deployed Gatsby website on S3 Cloudfront?

I am building my first Gatsby website. We host it on AWS S3. Also we use gatsby-plugin-offline.
So far I'm not able to find a good solution on how to invalidate the cache after a new deployment.
Even if I manually de-register sw.js service worker and clean the site data via Devtools -> Application -> Clear Storage, the browser keeps loading a cached version (missing added pages, displaying old text content, etc.).
For deployment I use amplify.
How do you invalidate an old cache when deploying a new build?
Thanks.
Did you check the amplify configuration of gatsby-auth-starter-aws-amplify ? The offline plugin is active in this starter and it is the recommended starter for deploying gatsby to amplify.
Another solution would be to use the s3 plugin with aws-cli
Gatsby's caching docs explains caching rules for Gatsby to work well. Common problems are caused by HTML pages' caching (The cache-control header in HTML files should be cache-control: public, max-age=0, must-revalidate)

Develop a Service Fabric Web Application without redeploying after each file change

I have stateless .net core 2 Fabric Service Web Application creating using one of the templates that comes with Service Fabric SDK. It is a real pain to develop since I have to do a full deploy before I can see any changes to code/html/script. In my case that operation takes more than 5 minutes.
I have looked at this article that states how it can be done by running the web app from the commandline.
That article is based on Net Core RC2. Does anyone has an updated example on how to do this?
https://dzone.com/articles/aspnet-core-with-kestrel-and-service-fabric
Together with Azure Developer Support i found a solution to speed up the development process
I Fabric Explorer you need to find the node where you Web Application is running. I my case that is _Node_0
By SF SDK design, local SF published file is under C:\SfDevCluster\Data_App\ this folder. In my environment, the website file path is C:\SfDevCluster\Data_App_Node_0\Application1Type_App1\Web1Pkg.Code.1.0.0\wwwroot\lib\bootstrap\dist
So you can also find your HTML, CSS, JS and other static resources under below path:
C:\SfDevCluster\Data_App[node_id][application_type_and_instance_name][service_type_and_version]\
You can just modify the files in this folder, then the change will immediately apply to your local test web browser. Please notice if your service is hosted by micro-service running in several nodes, you may need to modify all nodes files because load balancer may access any folder files randomly.

Deployed MVC4 application not opens completely

I deployed MVC 4 application to Arvixe.com hosting. In local everything is okay, site opens full, but after deploying, site opens, but, not full. css, jquery, javascript is not working. Only html tags seem.
Arvixe support send this to me: How to Bin Deploy ASP.NET Assemblies on Shared Servers. But I can not understand it well. Can anybody help me to find that why site does not open full? What shloud I check to solve this?
When linking your views and resources you should use relative paths
instead of
"Views/MyView.aspx"
use
"~/Views/MyView.aspx"
This is valid for all resources in your application and it is know to cause these problems.
When working locally the paths are correct since it's all resolved to your computer.
In a web environment you will have to use the relative path so the url is resolved in front of all your resources.