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

How to show custom 404 page using sw-toolbox sw-precache libraries for service-worker
How much is the lifetime of a Service Worker, can it be controlled?
How can a initialize sw-precache with all site pages
How to test service worker background sync
service worker and client requests 'Cache-control': 'no-cache'
Service worker - get push data from my server
ServiceWorker not receiving fetch requests
how to add script in <head> section of prestashop
How to configure create-react-pwa with nested homepage (localhost/app)
Fetching cached objects in ServiceWorker - Failed
Service Worker cache busting
How to deploy updates to service workers running on customers' sites?
Permanently registered service workers
Service-worker and tracking
Service worker sync fires only the first time
Pass custom data to service worker sync?

Categories

HOME
xml
twitter-bootstrap-3
api
awk
amp-html
pdfbox
jquery-ui-sortable
windows-ce
radgridview
cumulocity
mongodb-csharp
microsoft-dynamics-nav
aws-sdk
php-mysqlidb
short-url
gmock
draft-js-plugins
fable-f#
asymptotic-complexity
ms-access-2003
wcag
ceylon
cppreference
jaws
twiml
testcomplete
code-snippets
vue-chartjs
python-import
google-earth-engine
xdocreport
amazon-ses
verifiable-c
jvmti
smoothstate.js
cnc
arq
qtranslate
d3-force-directed
juice-ui
smartfoxserver
avspeechsynthesizer
http-status-code-401
database-relations
np-spring
qbxml
blitline
piracy-prevention
highland.js
directdraw
toran-proxy
rewrite
zen-cart
sony-lifelog-api
viola-jones
omnifaces
nutiteq
nsurlsessiondatatask
cross-join
dbaccess
rapidsvn
uncaught-typeerror
contrast
lambda-architecture
ss7
personalization
cancellation
jquery-slider
eclipse-kepler
ie8-compatibility-mode
code-duplication
cocoalibspotify-2.0
hidapi
route-provider
actiondispatch
pagedown
stacky
mysql-error-2013
wimax
intersect
panda3d
fragmenttransaction
paginator
josql
lambdaj
azman
failing-tests
convention
winmain
google-ajax-api
lr
squishit
maven-1
object-database
folding
burndowncharts
fdf
soappy

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