Possible to create PWA with livewire?

#1

Good day folks,
I’m starting to move toward Livewire for a couple of projects but it’s yet to find any documentation or guide about PWA with livewire. is it possible? can you guys recommend any guide?

2 Likes
#2

I’ve been wondering the same thing! I think it can be done and am considering testing the idea out sometime soon.

For offline purposes you would want to use the cache API and cache all the requests that livewire makes. I’m not sure how well this would work with wire:loading but it should be fine.

You would also want to use a service worker to save the assets.

1 Like
#3

Another thing that maybe useful is client side url updating via the history API.

//SomeComponent.php
$this->emit('urlChange', 'https://someurl.local/category/somecategory?test');
Listen for the event.

//some-component.blade.php
@push('footer-scripts')
    <script type="text/javascript">
        document.addEventListener('livewire:available', function () {
            window.livewire.on('urlChange', param => {
                history.pushState(null, null, param);
            })
        })
    </script>
@endpush
1 Like
#4

if they come up with something easy and straight forward to do so then there will be almost no need for JS anymore. hope they do.

1 Like
#5

I agree, something simple would be nice!

I gave this all a try the other day. Unfortunately it’s a bit more complex than I had first thought (who would have thought!). Apparently Cache API does not work with POST requests which is the method livewire uses with all its requests as far as I know. However, you could still intercept the fetch request and then store the data in IndexDB instead. It’ll be more work but still possible.

Here is how someone else did that:

Another thought is if you have multiple pages it maybe useful to use a turbolinks style setup for GET requests to different pages.

Lastly, if the information is private then I think the data will need to be stored in an encrypted state and maybe de-encrypted with a session based token. I’m not sure about that one.