pwafire / pwafire Goto Github PK
View Code? Open in Web Editor NEWProgressive Web Apps API of APIs
Home Page: https://docs.pwafire.org
License: MIT License
Progressive Web Apps API of APIs
Home Page: https://docs.pwafire.org
License: MIT License
npm i --save pwafire@latest
// Get the check instance from pwafire...
import { check } from "pwafire";
//...
// The response is a boolean, true or false...
const supported = await check.Share()
Native App "Install" Progressive Web App Support
After publishing your native app, say Android, the next thing that rings in your mind as a dev is how to get it out there to people for them to install. That matters.
The most ideal place to fall for is the Web. The question is, why the Web? It's the incredible reach that the Web has on all devices that your target users are using. So, most of you would build a single page site to get your native app out there with some fancy install button.
With the reach and capabilities that progressive web app have, you could rather build a progressive web app that automatically in a more engaging way prompts the user to install your native app.
Native app install banners give you the ability to let users quickly and seamlessly install your native app on their device from the app store, without leaving the browser, and without showing an annoying interstitial.
How do you get that done?
Well, with pwafire app, you will start your progressive web app project and add a few lines of code to the manifest.json to add that Native App Install capabilities on the web . Check the code snippet below.
"prefer_related_applications": true,
"related_applications": [
{
"platform": "play",
"id": "your_native_app_id"
}
]
prefer_related_applications
Tells the browser to prompt the user with your native app instead of the web app. Leaving this value unset, or false, the browser will prompt the user to install the web app instead.
related_applications
Is an array with a list of objects that tell the browser about your preferred native application. Each object must include a platform property and an id property. Where the platform is play and the id is your Play Store app ID.
Read more about this add on PWA Fire Bundle on this doc published.
Cheers and have fun!
Unlocking new capabilities for the web
This is an amazing project pushed forward by the Google's Web Team
Goal is to make sure that a more semantic and expressive response is sent back in each API use instance.
For example;
{
ok: true,
message: "Text copied"
}
Upgrade bundle to workbox 3.5.0
With more customization options for generating a service worker, support for the HTTP PATCH method in routes, exposing the registerQuotaErrorCallback utility function publicly, and more!
Read more about the latest workbox release here
Describe the bug
I am working on react JS (PWA) application. In my application, I need to display notifications and badging.
Below is my code for displaying badging.
const unreadCount = 24;
pwa.setBadge(unreadCount);
It is working on desktop (PWA) but not on mobile device (PWA).
Please help me. I am trying this issue since yesterday.
Adding background sync support
Service workers solve the page loading part by letting you serve content from a cache. But what about when the page needs to send something to the server ๐ฒ ?
What could I use background sync for?
Use it to schedule any data sending that you care about beyond the life of the page. Chat messages, emails, document updates, settings changes, photo uploads. Anything that you want to reach the server even if user navigates away or closes the tab.
The page could store these in an "outbox" store in indexedDB, and the service worker would retrieve them, and send them on connection to the internet. Although, you could also use it to fetch small bits of data as well ๐ ๐ ๐
We shall be adding the codelab below
PWA Fire Bundle Background sync is activated once your page is loaded by default. Though you could re-configure this to anything. Maybe listen to events like on click with javascript.
Describe the bug
I was working on a PHP project with file path /index.php
and includes /includes/header.php
Installed service worker in index.php
before closing body.
PWA works fine and Installs on Mobile and Desktop.
But I ran Light House audits check and discovered that the app does not work Offline.
Seem my return cache.addAll([
is not catching php files?
What could be wrong?
Expected behavior
PWA should work Offline
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Smartphone (please complete the following information):
PWA prompt not notifying
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
A clear and concise description of what you expected to happen.
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
Add any other context about the problem here.
Referring to URL => https://pwafire.org/developer/codelabs/pwafire/
Web Manifest // app.webmanifest config section:
Typo => ( call it aything you want)
Firebase Hosting section:
Incorrect term => Para 6. are in the PWA Fire Profile directory then
Result did not occur => 10. Visit your web app on your phone now. You should see an "install to homescreen" banner There was no 'install to homescreen' message or icon
We shall wait until 4.0 Beta is stable
What's new in 4.0.0 Beta?
Learn more here
Updating the next iteration with latest shipping New Web Capabilities.
Assign : @mayeedwin
Enhancement of the PWA Fire bundle with push notification add on by @mayeedwin to be published soon.
Features : Add to Homescreen and Offline Capabilities
Feedback from Thomas Steiner
Describe the bug
We have a documentation typo fix and codelab flow and starter project dir mix
Additional context
Working on the fix : )
Done!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.