From WA to PWA

[Spomky]

Q	A
Bug fix?	no
New feature?	yes
Issues	Nothing, but for reference #1279
License	MIT

The goal of this PR is to add Progressive Web Application capabilities.
I enabled lots of features including:

• The ability to install the application and have a few number of shortcuts
• The application can run offline for certain pages.
• Fine grained cache strategy for a fast application and less server loads.

[weaverryan]

Wow! What a great treat for me to see in the new year. I'd like to focus a lot on PWA's in 2024 - Rails is doing a similar push. So having ux.symfony.com as a PWA playground that we can iterate on is a great idea.

How did you create all of the screenshots? And how many are needed in reality? You included a lot - is one needed for every page? Or were you just being very "robust"? :)

[Spomky]

How did you create all of the screenshots?

By hand 😐. With the day 30 of the LAST series and this comment, an idea came to my mind💡: what about auto-screenshots generated just by setting a path/route and an image size?

I tried with panther and it just works as expected.
I added a few options and a config like as follows is correctly understood

[
    'path' => 'https://ux.symfony.com',
    'form_factor' => 'narrow',
    'platform' => 'ios',
    'height' =>  2_532,
    'width' =>  1_170,
    'format' => 'png',
],
[
    'path' => 'https://ux.symfony.com',
    'form_factor' => 'wide',
    'platform' => 'ipados',
    'height' =>  1_536,
    'width' =>  2_048,
    'format' => 'png',
],

And how many are needed in reality? You included a lot - is one needed for every page? Or were you just being very "robust"? :)

The number of screenshots is not really clear. What I understand is that only 2 or 3 are really used, but could be more e.i. on Microsoft Store. You can tag a screenshot for a particular platform, but I think it should be limited to specific features you want to highlight.
In this example, I went too far. Some pictures could be removed.

[Spomky]

@weaverryan I removed the screenshots in this example and now they are all generated using Panther.

[weaverryan]

I tried with panther and it just works as expected.
I added a few options and a config like as follows is correctly understood

WOW!!!

[kbond]

Forgive these ignorant questions but I don't know anything about PWAs:

• with this PR, does it mean we can register ux.symfony.com on the various app stores (Microsoft, android, apple)?
• does it download to your device as a normal app?
• what is the worker you described and how does it add offline support?

[Spomky]

Hi @kbond,

with this PR, does it mean we can register ux.symfony.com on the various app stores (Microsoft, android, apple)?

If you had asked me this question a month ago I probably would have said "no" or "I don't know".
But I recently discovered that it is possible to submit a PWA to an app store by packaging it. I don't know how exactly it works, but tools like https://www.pwabuilder.com/ help create the packages that are submitted.

does it download to your device as a normal app?

Not exactly. This is still a web application loaded by a browser so there is no full download of the application (although this is still possible). In general, you select the most important pages/assets that are pre-cached. Other pages may be cached as the user visit uses the application.

what is the worker you described and how does it add offline support?

The Service Worker is a JS script that acts as a proxy and allows you to react to events or interact with the web API. It is saved by the browser when you "install" the application.
Where it's very clever is that fetch can be totally controlled. I generally use Workbox because it offers caching strategies to simplify this (NetworkOnly, CacheOnly, CacheFirst, NetworkFirst, or StaleWhileRevalidate). Offline mode is possible by telling the Service Worker to keep certain responses so your application will always show a real page, including assets. Thanks to the web API like BackgroundSync, it is even possible to keep POST/PUT/DELETE requests in a queue and re-execute them when the network is available again.

[tacman]

https://store.app/ attempts to be an app store for PWAs. It's not very good just yet, but the idea is there. I've submitted some support issues and never received an answer.

[Spomky]

That's great. The offline functionality now works wonderfully for reading pages.
Not a single line of JS and yet everything is there.

[Spomky]

Hi all,

Initially, this PR was just a playground for the development of a bundle.
Now the bundle is marked as stable and I really think this PR could be considered stable as well.
Let me know what you think about it and if it should be updated, closed or could be merged.

Many thanks.
Regards.

[tacman]

@Spomky How do I run this as a PWA? I've cloned the repo and am in the 2.x branch, but I don't see the pwa-bundle in composer.json. The features/pwa branch is gone.