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

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?
Can I have multiple Progressive Web Apps on my site?
Using service workers across multiple subdomains
What's the difference between using the Service Worker Cache API and regular browser cache?
Access screen height and width in a service worker
Precedence rule for serviceworker in case of two serviceworkers
web push notification doesn't show if pc is off or sleeping

Categories

HOME
uml
microsoftgraph
deep-learning
fpga
yahoo-finance
jwplayer
requirements
devise
replace
alarm
seo
static-site
google-apps
xcodebuild
intercom
flatpak
searchview
feathersjs
jmp
sencha-touch
href
dataflow-diagram
hta
event-store
gmock
roundup
siri
fable-f#
motion-detection
ms-access-web-app
ceylon
errbot
carrierwave
uitapgesturerecognizer
scrollview
xbox
recurring-events
postback
deltaspike
glib
getpixel
yowsup
searchkit
sharepoint-workflow
latitude-longitude
sim-toolkit
reason
google-earth-engine
sessionstorage
z-notation
ods
mesosphere
ovf
builder
posixct
excel-dna
seq
gets
visual-studio-2008-sp1
meteor-packages
file-uri
http-status-code-401
spreadjs
hadoop-partitioning
fuzzywuzzy
pushbots
character-replacement
gocql
fuelcms
canalyzer
mod-proxy
lasso
jdk1.7
keyup
dnssec
java-security
packet-sniffers
teaspoon
human-computer-interface
nsmenu
gii
file-not-found
menubar
spring-3
embedded-fonts
isqlquery
nebula
kaleidoscope
abstract-data-type
android-icons
asplinkbutton
curb
cuda-gdb
android-holo-everywhere
google-ajax-api
inline-formset
web-garden
pagemethods
murmurhash
flvplayback
soappy
pnrp

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