# PWA integration

**URL:** <https://community.piwik.pro/t/pwa-integration/3533>\
**Category:** API & integrations\
**Created:** [January 25, 2024, 9:23am UTC](https://community.piwik.pro/t/pwa-integration/3533 "2024-01-25T09:23:14Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![xEndLe](https://avatars.discourse-cdn.com/v4/letter/x/e480ec/32.png) [@xEndLe](https://community.piwik.pro/u/xEndLe)\
**Post date:** [January 25, 2024, 9:23am UTC](https://community.piwik.pro/t/pwa-integration/3533/1 "2024-01-25T09:23:14Z")

</div>

Hi,

I’m trying to follow the doc here to integrate Piwik for events tracking offline in my pwa:

> **[Progressive Web Applications integration](https://developers.piwik.pro/en/latest/data_collection/other_integrations/PWA_Integration.html)**
>
> If you ’ re building an application that works offline, then understanding how users are interacting with your app when they don ’ t have connectivity is crucial to optimizing that experience. Anal...

But I keep having an error no matter what method I use to “import” the module “import PiwikPro from ‘@piwikpro/pwa-piwik-pro’;”

I either can’t use import in my serviceworker.js and if I load it via cdn in a script tag in my html I can’t use it in my serviceworker.js file because it doesn’t know it.

I’m stuck right now and I don’t find anything on the web.

Can someone help or have an example of pwa integration somewhere ?

Best

---

<div class="post-metadata">

**Author:** ![Daniel\_Twork](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/daniel_twork/32/498_2.png) [@Daniel\_Twork](https://community.piwik.pro/u/Daniel_Twork)\
**Post date:** [January 31, 2024, 9:40am UTC](https://community.piwik.pro/t/pwa-integration/3533/2 "2024-01-31T09:40:15Z")

</div>

Hi,

What technology are you trying to use PWA in Angular, react? I ask because in our repository you will find an example of we using PWA together with Angular, maybe it will be helpful. If you explain what technology you are using I will try to prepare a solution for you.

The PWA library works independently, the very important thing is that the target file from the service worker is in js so that the browser can install it correctly.

For this purpose, it is best to prepare a person builder, e.g. ES5, which will import the library and create a single file in js.

---

<div class="post-metadata">

**Author:** ![xEndLe](https://avatars.discourse-cdn.com/v4/letter/x/e480ec/32.png) [@xEndLe](https://community.piwik.pro/u/xEndLe)\
**Post date:** [February 1, 2024, 3:37pm UTC](https://community.piwik.pro/t/pwa-integration/3533/3 "2024-02-01T15:37:14Z")

</div>

Hi @Daniel_Twork ,

Thanks for your answer.  
I just use vanilla javascript and html. it’s just simple HTML files and script tags.  
I have my app.js file which register the service worker file: sw.js

Webpack bundles the sw.js file into the bundle.xxxxx.js file.

Best regards

---

<div class="post-metadata">

**Author:** ![Dylan\_Thomas](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/dylan_thomas/32/4217_2.png) [@Dylan\_Thomas](https://community.piwik.pro/u/Dylan_Thomas)\
**Post date:** [March 27, 2025, 7:09pm UTC](https://community.piwik.pro/t/pwa-integration/3533/4 "2025-03-27T19:09:10Z")

</div>

I looked everywhere to see how I could use Piwik Pro analytics for a PWA that wasn’t built with a framework and I didn’t find anything useful. So here is what I did that worked for me. You’re basically going to create a node project that only has the Piwik Pro analytics functions in it and build that.

Note, this is only for analytics, it doesn’t work with the connection or install tracking (PiwikPro.enableInstallTracking(); and PiwikPro.enableInternetConnectionTracking();

**Overview:**

1. Install modules
2. Create a js file importing Piwik
3. Configure Rollup
4. Use Rollup to build
5. Import build into service worker

## Install modules

In your project, run:

`npm install @piwikpro/pwa-piwik-pro`  
`npm install -g rollup`  
`npm install @rollup/plugin-node-resolve`  
`npm install @rollup/plugin-replace`

## Create a js file importing Piwik

In `main.js` (or any other filename), put the following:

```auto
import PiwikPro from '@piwikpro/pwa-piwik-pro';

PiwikPro.initialize({
    containerURL: 'ttc-az.piwik.pro',
    containerId: 'c2c46c52-7720-411c-816d-c457f8d973eb'
});

```

## Configure Rollup

Create a `rollup.config.mjs` in your project directory with the following (change filenames as needed):

```auto
import resolve from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';

export default {
	input: 'main.js',
	output: {
		file: 'bundle.js',
		format: 'iife', // immediately-invoked function expression — suitable for <script> tags
		sourcemap: true
	},
	plugins: [
		resolve(), // tells Rollup how to find node_modules
                replace({
			'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
			preventAssignment: true
		}),// makes scripts work outside Node environment by setting the variable manually
	]
};

```

## Use Rollup to build

Running `rollup -c` in your project directory should process everything you need into `bundle.js`

## Import build into service worker

Add the following into your service-worker js file:

```auto
// Import Piwik Pro Scripts
importScripts('bundle.js')

```