Add some features

[zDaleZ]

This pull aims to add a set of new features to improve the users experience. The following features are currently planned to be added to this pull:

• • [x] Badging API Every time a new notification comes, display a badge on the App icon.
• • [x] Alerts when lost, restored network connection, a sw update is available & needs to refresh the app or the app is installable. Tell users something important is happening.
• • [x] Make a simple cache logic to improve loading speed. Currently with no offline app experience, only cache files.
• • [ ] Custom offline page.
• • [x] Kill switch for sw If admin disable this extension, it'll leave a sw. Open the kill switch to unregister the sw.
• • [ ] Use GoogleChromeLabs/pwacompat to support Apple splash screen (#39)
• • [ ] Allow to upload SVG image as app icon (size: any).

Related Needs

• • [ ] With a standalone WebSocket Server for real time updating.

[zDaleZ]

@askvortsov1 How do you think of these features or have any other features are valuable to add?

[zDaleZ]

First stage: Added network and install alerts, badge and instant sw update support.

[askvortsov1]

Planned changes sound good! Offline cache might be cool, but I also worry that this could be a deep dark rabbit hole.

One thing that people have reported that might be useful is better pusher / websockets refresh functionality with PWAs; iirc, on Discuss some people have complained that discussions don't automatically refresh / that there might not be a good mechanism for manually refreshing

[zDaleZ]

Planned changes sound good! Offline cache might be cool, but I also worry that this could be a deep dark rabbit hole.

One thing that people have reported that might be useful is better pusher / websockets refresh functionality with PWAs; iirc, on Discuss some people have complained that discussions don't automatically refresh / that there might not be a good mechanism for manually refreshing

I know, so they can only use 3rd-party pusher / websockets for now.

Currently with no offline app experience, only cache files.

Rest assured. For now I am planning to cache only forum.js, language files and forum.css, which are having a verison stamp to control the version (Example: /assets/forum.css?v=6b00d4ac). Because we don't cache html, so if the file updates, the link will update in time - we still always have the latest resources. Oh, one more thing, avatar and the uploaded files also have their unique URL, maybe they can be cached too.

[zDaleZ]

One thing that people have reported that might be useful is better pusher / websockets refresh functionality with PWAs;

One solution is using 3rd-party php extention, I found swoole and workerman. It needs further development, maybe will take more time to implement. Well, add this to the task list, though it's not actually dedicated to this.

[askvortsov1]

Hey @DellZHackintosh! Should I review the current state of this PR?

[zDaleZ]

Hello @askvortsov1, thank you for your interest in the current state of this PR. Nevertheless, I'm preparing for my final exam, so I have to pause the development at this time. I'll continue on summer holiday. Appreciate again for your interest and understanding! 😊

[askvortsov1]

No rush at all, thanks again for your contributions, and good luck with your exams!

[zDaleZ]

Second Stage: Kill switch, install alert, files cache and custom offline

[zDaleZ]

Third stage.

[zDaleZ]

How things work now

1. Badging API (Behavior depends on platform and browsers)
2. Alerts when lost, restored network connection, a sw update is available & needs to refresh the app or the app is installable. (When a sw update is available & needs to refresh the app, we also show a badge, behavior depends on platform and browsers) (Available on Chrome, Edge & Opera with the ability to install, and Safari with the instruction. Has a bug that it'll appear again after dismissing and refreshing the page, but I can't find why) (...So I added a switch, and it's disabled by default)
3. Make a simple cache logic to improve loading speed.
4. Kill switch for sw

Features that cannot be completed for the time being

• Custom offline page When set the page to a fof's custom page and offline, Flarum will redirect to the homepage, dramatically reduced availability.
• Allow to upload SVG image as app icon The upload feature depends on Intervention\Image, and it doesn't support SVG when with its default driver - GD. Replace its driver with Imagick can solve that, but unnecessary.
• Use GoogleChromeLabs/pwacompat to support Apple splash screen Users can simply follow their instruction (adding a <script> to <head>) to have it.

Looking forward to implementing more.

[zDaleZ]

Stage 4: The ability of customizing an offline page has been implemented.

[zDaleZ]

Has a bug that it'll appear again after dismissing and refreshing the page, but I can't find why

Ok I realized that the "not configured" alert has the same bug on my side too, so it's may not my fault......Well, ship it now.