service-worker


Service worker's offline caching is not working if I add my PWA on home screen


I made a PWA. Currently is deployed on heroku. URL - https://plain-js-pwa.herokuapp.com/.
My PWA installs service worker and manifest.json file. If I open it on chrome on mobile phone and put my phone on flight mode, then refreshing the url still gives shows me my application. Its expected as my service worker is doing offline caching.
But when I add my PWA to home screen, and try to open it on flight mode then it doesn't work. This is probably my first PWA, so please help me. I am generating my service worker file from 'sw-precache-webpack-plugin'.
My manifest.json file is:
{
"name": "VanillaJS-webpack App",
"short_name": "VanillaJS-webpack App",
"description": null,
"dir": "auto",
"lang": "en-US",
"display": "standalone",
"orientation": "any",
"start_url": "/?homescreen=1",
"background_color": "#ee6e73",
"icons": [
{
"src": "android-chrome-36x36.png",
"sizes": "36x36",
"type": "image/png"
},
{
"src": "android-chrome-48x48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "android-chrome-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "android-chrome-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "android-chrome-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/android-chrome-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}

Related Links

Service Worker, double caching?
ServiceWorkerRegistration.active not being set first time (Chrome)
Pre cache folder and subfolder content
Push web api, notificationclick, how to open desktop client instead opening a new browser client
keys property doesn't exist on my PushRegistration object
Web push notifications not showing since Chrome switched to OSX notifications
Can I have multiple service workers both intercept the same fetch request?
Ensure service worker is updated when hosted on a CDN?
When is my service worker updated?
difference between fetching page and file in serviceworker
How to allow serviceworkers for http in chrome
Read cookies from within a Service Worker?
How to handle URLs that aren't controlled by a service worker
Why does this code fail to execute 'fetch'?
How to know that Event.respondWith has finished(callback for Event.respondWith()
Is it possible to build a Progressive Web App without client side rendering?

Categories

HOME
fabricjs
microsoftgraph
design-patterns
awk
apache-flink
telegram
formal-languages
zend-framework
yahoo-finance
nsbundle
telegram-bot
google-cloud-datalab
jtextpane
performancepoint
rtf
frequency-distribution
plink
scrolltop
bitnami
fileserver
jersey-1.0
easeljs
roundup
dapper-extensions
onload
beautifier
fractions
intersystems-cache
gp
ntp
google-cast
livelink
kudu
left-join
getpixel
hibernate-search
video-capture
odroid
recurrent-neural-network
diacritics
hackintosh
numberpicker
glm-math
tcc
contract
android-exoplayer
flask-restful
jboss-4.2.x
cnc
chai-as-promised
vugen
tinkerpop
appdomain
monkey
cd-burning
vibrate
restore
reachability
change-tracking
autosar
flex-monkey
hadoop-2.7.2
preprocessor
tinkerpop3
bizagi
redis-cluster
exim4
jaunt-api
spring-retry
decimalformat
binomial-theorem
amiga
sha512
branch-and-bound
linked-tables
ansi
entry-point
imagefilter
verold
rcaller
wxformbuilder
ray
maven-scm
xmltodict
rfc5322
eclipse-kepler
jammer
observium
workitem
xcode3.2
iboutlet
paginator
koken
infobright
promotion-code
socketserver
cac
globals
eclipse-marketplace
mathematical-notation
interop-domino
xpsdocument

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App