PWA prompt not notifying

API Feature Detection

• Goal is to allow room for custom handlers if need be
• This approach is going to be experimental and will be updated
• This addition is going to be built for available stable apis

Example and use case

• Web Share is both on Edge desktop and mobile, but not with chrome. I'd like to show a copy link button for chrome
• Install latest pwafire version, already up for testing in v4 alpha-3*

 npm i --save pwafire@latest

• Try it out

  // Get the check instance from pwafire...
  import { check } from "pwafire";
  //...
  // The response is a boolean, true or false...
   const supported = await check.Share()

Done!

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"
}

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.

Feedback from Thomas Steiner

• You should probably add some feature detection to the APIs
• Checkout our Browser Test Tool
• Check https://web.dev/fugu-status/
• Check https://developer.mozilla.org/en-US/docs/Web/API

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

Unlocking new capabilities for the web
This is an amazing project pushed forward by the Google's Web Team

Experiment the web capability codelabs 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

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!

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.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

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):

• OS: [e.g. iOS] MACOS SIerra 10.12.6
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Updating the next iteration with latest shipping New Web Capabilities.

Assign : @mayeedwin

Features : Add to Homescreen and Offline Capabilities

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):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari] [ x ]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Enhancement of the PWA Fire bundle with push notification add on by @mayeedwin to be published soon.

Describe the bug
We have a documentation typo fix and codelab flow and starter project dir mix

Additional context
Working on the fix : )

PWA installed properly

But i noticed my site load speed reduce?

Any comments @mayeedwin ?

What's new in 4.0.0 Beta?

Learn more here