qwik
qwik copied to clipboard
feat: Add device's homescreen
What is it?
- [x] Feature / enhancement
Description
You have to add a manifest.json
file to use a Qwik project like a native mobile app. That's all to show Qwik in fullscreen when added to the device's homescreen.
Use cases and why
- Prepared for PWA
Checklist:
- [x] My code follows the developer guidelines of this project
- [x] I have performed a self-review of my own code
- [ ] I have made corresponding changes to the documentation
- [ ] Added new tests to cover the fix / functionality
Mobile context menu in the browser to add a Qwik App to the device's homescreen:
Icon on device's homescreen:
![](https://user-images.githubusercontent.com/20791239/196202902-de28ea6b-f7ea-4632-a94c-81faecfdb63b.jpg)
Before - Without a manifest a Qwik App shows the browser window:
![](https://user-images.githubusercontent.com/20791239/196044874-6e57e879-eacc-4778-a3a3-f7785a974a58.jpg)
After - With a manifest.json it shown like a native app:
![](https://user-images.githubusercontent.com/20791239/196044998-67cd525a-757b-4637-9ee1-04dce90a631c.jpg)
Reference see https://developer.mozilla.org/en-US/docs/Web/Manifest
Run & review this pull request in StackBlitz Codeflow.
I think with the url to the manifest we'll need to prefix it with /
, so that all pages in subdirectories will reference the right location. Thanks!
Thanks a lot!
Thank you for the merge :)