Application cache as a means of creating offline browser apps has been deprecated. The current way to make an offline web app is to use service workers.
Service workers allow you to bootstrap all network requests and provide content for them. Since service worker can run even when user closes the tab, it can provide cached content when internet temporarily doesn't work.
However when I got interested in offline web applications, it was because I hoped to use even when I have permanently no access to internet. I created simple offline app, but it does not work when I close and open the browser — I get message that page cannot be loaded.
Is there a way to make service worker offline app work even after browser is closed and re-opened? If not, are there any planned standards for this? It would be very valuable to mobile users.
If it is running in the background then it could have send notification even after closing browser also. within the w3c document (w3c.github.io/ServiceWorker/#user-agent-shutdown) it also states that the user agent should store the service worker state in case of a shut down.
Each request triggers a fetch event that, in this service worker, searches the cache for a match, if there's a match, responds with cached resource. If there isn't a match, the resource is requested normally. Caching resources allows the app to work offline by avoiding network requests.
Offline mode is a functionality that enables web applications to operate when there is no internet connection. If the web application is in online mode and the internet gets disconnected, some of the functionalities of the application will still work.
In order for your PWA to be offline-capable, service workers pay a part in serving the content, but you'd also need to cache your page's resources as well. To cache your page's resources, first you need to plan out the size of your Cache Storage since there's a limit to it.
Can an offline JavaScript app using service workers work after browser restart?
Yes, it can, provided it's cached all of its resource previously. This example goes through the steps of ensuring that.
The reason it can is that when you navigate to the URL that the service worker is registered for, the cached copy of the service worker is activated and it's given the opportunity to satisfy network requests for the app. So if you've cached everything, and you satisfy all of the requests by handling the fetch
event, your app can be entirely offline.
There is a great deal of development in the area of service workers. Chrome is taking the lead, but Firefox follows closely. IE support is negligible however.
You can see the W3C working draft. For browser support, check e.g. here.
I also suggest taking a look at Nolan Lawson's pokedex.org application, it is an offline-capable web app based on service workers.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With